/**
 * Search field: .mk-search-field (templates/components/search-field.php).
 *
 * The bordered box is the <label>, so a click anywhere focuses the input.
 * Border: default → hover → focus (`interactive.default` → `selected` → `hover`
 * roles = #E3ACAF → #BF7D8B → #A36B77). Tokens: theme.json `custom.searchField`.
 * The clear button (optional) shows only while the field has text
 * (placeholder not shown).
 */

.mk-search-field {
	--mk-search-border: var(--wp--custom--color--interactive--default);

	margin: 0;
}

.mk-search-field__box {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--search-field--gap);
	box-sizing: border-box;
	inline-size: 100%;
	padding-block: var(--wp--custom--search-field--padding-block);
	padding-inline: var(--wp--custom--search-field--padding-inline);
	border-width: var(--wp--custom--search-field--border-width);
	border-style: solid;
	border-color: var(--mk-search-border);
	border-radius: var(--wp--custom--search-field--radius);
	background-color: var(--wp--custom--color--surface--default);
	color: var(--wp--custom--color--text--primary);
	cursor: text;
	transition-property: border-color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

@media (hover: hover) {
	.mk-search-field__box:hover {
		--mk-search-border: var(--wp--custom--color--interactive--selected);
	}
}

.mk-search-field__box:focus-within {
	--mk-search-border: var(--wp--custom--color--interactive--hover);
}

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

.mk-search-field__input {
	flex: 1;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	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);
	appearance: none;
}

.mk-search-field__input::placeholder {
	color: var(--wp--custom--color--text--placeholder);
	opacity: 1;
}

/* No native clear button: the field keeps one look in every browser. */
.mk-search-field__input::-webkit-search-cancel-button {
	appearance: none;
}

.mk-search-field__clear {
	display: inline-grid;
	flex: none;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--4);
	background: transparent;
	color: inherit;
	cursor: pointer;
	appearance: none;
}

.mk-search-field .mk-search-field__clear .mk-icon {
	inline-size: var(--wp--custom--search-field--clear-icon-size);
	block-size: var(--wp--custom--search-field--clear-icon-size);
}

.mk-search-field__input:placeholder-shown ~ .mk-search-field__clear {
	display: none;
}

@media (hover: hover) {
	.mk-search-field__clear:hover {
		color: var(--wp--custom--color--text--accent);
	}
}

.mk-search-field__clear: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 (prefers-reduced-motion: reduce) {
	.mk-search-field__box {
		transition: none;
	}
}