/**
 * Select, look "field": .mk-select--field (templates/components/select.php),
 * a part of select.css; the frame, label, states and error come from
 * field.css (.mk-field on the same root).
 *
 * Full width, label above. The trigger looks like a text field (padding
 * 10 / 12, radius 4, 1px border, body-medium) with the chevron on the right;
 * open or focused = the focus border. The placeholder is gray. The list
 * opens 4 below, full width: radius 4, 1px border `field.listBorder`, white,
 * options padding 10; the selected one on the subtle background with a
 * check (24) in `field.optionCheck` on the right.
 */

.mk-select--field {
	display: flex;
	align-items: stretch;
	gap: 0;
	inline-size: 100%;
}

.mk-select--field .mk-select__field {
	max-inline-size: none;
}

.mk-select--field .mk-select__trigger {
	padding-block: var(--wp--custom--field--padding-block);
	padding-inline: var(--wp--custom--field--padding-inline);
	border: var(--wp--custom--field--border-width) solid var(--mk-field-border);
	border-radius: var(--wp--custom--field--radius);
	outline: 0;
	background-color: var(--wp--custom--color--field--background);
	box-shadow: none;
	color: var(--wp--custom--color--field--text);
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
	transition-property: border-color;
}

@media (hover: hover) {
	.mk-select--field .mk-select__trigger:hover {
		--mk-field-border: var(--wp--custom--color--field--border-hover);
	}
}

.mk-select--field .mk-select__trigger:is(:focus, [aria-expanded="true"]) {
	--mk-field-border: var(--wp--custom--color--field--border-focus);
}

.mk-select--field.is-error .mk-select__trigger {
	--mk-field-border: var(--wp--custom--color--field--border-error);
}

.mk-select--field .mk-select__value.is-placeholder {
	color: var(--wp--custom--color--field--placeholder);
}

/* Success: the check sits before the chevron, in the border colour. */
.mk-select--field .mk-select__trigger > .mk-icon--check {
	display: none;
	margin-inline-start: auto;
	color: var(--mk-field-border);
}

.mk-select--field.is-success .mk-select__trigger > .mk-icon--check {
	display: block;
}

.mk-select--field.is-success .mk-select__trigger > .mk-icon--chevron-down {
	margin-inline-start: 0;
}

.mk-select--field .mk-select__list {
	inset-block-start: calc(100% + var(--wp--custom--field--list-offset));
	inset-inline: 0;
	padding: 0;
	border: var(--wp--custom--field--border-width) solid
		var(--wp--custom--color--field--list-border);
	border-radius: var(--wp--custom--field--radius);
	background-color: var(--wp--custom--color--field--background);
	box-shadow: none;
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
}

.mk-select--field .mk-select__list:empty {
	display: none;
}

.mk-select--field .mk-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--field--icon-gap);
	padding: var(--wp--custom--field--option-padding);
	color: var(--wp--custom--color--field--text);
	white-space: normal;
}

.mk-select--field .mk-select__option:is(.is-active, [aria-selected="true"]) {
	background-color: var(
		--wp--custom--color--field--option-selected-background
	);
}

.mk-select--field .mk-select__option .mk-icon--check {
	flex: none;
	visibility: hidden;
	inline-size: var(--wp--custom--field--icon-size);
	block-size: var(--wp--custom--field--icon-size);
	color: var(--wp--custom--color--field--option-check);
}

.mk-select--field .mk-select__option[aria-selected="true"] .mk-icon--check {
	visibility: visible;
}