/**
 * Select: .mk-select (templates/components/select.php, store select.js).
 *
 * Label + field in a row; the field is at most 250px and never wider than
 * its parent (the value is cut with an ellipsis). The list opens under the
 * field, aligned to its end. Borders are inner strokes (inset shadow), as in
 * the design. --compact below 48rem: the label and the field turn into an
 * outline button (icon + short text); the value stays for screen readers.
 */

.mk-select {
	--mk-select-border: var(--wp--custom--color--select--border);

	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--select--label-gap);
	max-inline-size: 100%;
	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__label {
	flex: none;
}

.mk-select__field {
	position: relative;
	min-inline-size: 0;
	max-inline-size: var(--wp--custom--select--max-width);
}

.mk-select__trigger {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--select--gap);
	padding-block: var(--wp--custom--select--padding-block);
	padding-inline: var(--wp--custom--select--padding-inline);
	border-radius: var(--wp--custom--select--radius);
	box-shadow: inset 0 0 0 var(--wp--custom--select--border-width)
		var(--mk-select-border);
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition-property: box-shadow;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-select__trigger:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

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

.mk-select__trigger[aria-expanded="true"] {
	--mk-select-border: var(--wp--custom--color--interactive--selected);
}

.mk-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mk-select__trigger .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--select--icon-size);
	block-size: var(--wp--custom--select--icon-size);
}

.mk-select__trigger .mk-icon--chevron-down {
	margin-inline-start: auto;
	transition-property: transform;
	transition-duration: var(--wp--custom--motion--duration--base);
}

.mk-select__trigger[aria-expanded="true"] .mk-icon--chevron-down {
	transform: rotate(180deg);
}

.mk-select__list {
	position: absolute;
	inset-block-start: calc(100% + var(--wp--custom--select--list-offset));
	inset-inline-end: 0;
	z-index: var(--wp--custom--select--z-index);
	box-sizing: border-box;
	min-inline-size: 100%;
	max-block-size: var(--wp--custom--select--list-max-height);
	margin: 0;
	padding-block: var(--wp--custom--select--list-padding-block);
	padding-inline: 0;
	overflow-y: auto;
	border-radius: var(--wp--custom--select--list-radius);
	background-color: var(--wp--custom--color--select--list-background);
	box-shadow: var(--wp--custom--shadow--dropdown);
	list-style: none;
}

.mk-select__list[hidden] {
	display: none;
}

.mk-select__option {
	padding-block: var(--wp--custom--select--option-padding-block);
	padding-inline: var(--wp--custom--select--option-padding-inline);
	white-space: nowrap;
	cursor: pointer;
}

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

.mk-select__option[aria-selected="true"] {
	color: var(--wp--custom--color--select--option-selected-text);
}

/* Compact parts exist only below 48rem (`custom.breakpoint.tablet`). */
.mk-select__compact-label,
.mk-select__trigger > .mk-icon:not(.mk-icon--chevron-down) {
	display: none;
}

@media (max-width: 47.99rem) {
	.mk-select--compact .mk-select__trigger {
		gap: var(--wp--custom--button--outline--gap);
		padding-block: var(--wp--custom--button--outline--padding-block);
		padding-inline: var(--wp--custom--button--outline--padding-inline);
		border-radius: var(--wp--custom--button--outline--radius);
	}

	.mk-select--compact .mk-select__compact-label,
	.mk-select--compact .mk-select__trigger > .mk-icon {
		display: block;
	}

	.mk-select--compact .mk-select__trigger > .mk-icon--chevron-down {
		display: none;
	}

	/* Visually hidden, still read: the label names the control, the value is its state. */
	.mk-select--compact :is(.mk-select__label, .mk-select__value) {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mk-select__trigger,
	.mk-select__trigger .mk-icon {
		transition: none;
	}
}