/**
 * Field: .mk-field (templates/components/text-field.php, field-error.php;
 * the select look "field" adds select-field.css).
 *
 * Label caption (`color.field.label`) 4 above the control. Input body-medium,
 * padding 10 / 12, radius 4, 1px border: default `interactive.default`,
 * hover `interactive.selected`, focus `interactive.hover`, error
 * `interactive.error`; disabled = subtle border, subtle background, gray text.
 * Success (.is-success) keeps the border and shows a check (24) inside on
 * the right in the border colour. Error (.is-error): the message under the
 * field, 4 below it: info icon 16 + 4 + body-small text in the error colour.
 * States switch the local --mk-field-border only. Textarea (--textarea): the
 * same input look, 80 high (`field.textareaHeight`), fixed size (no resize),
 * the success check at the top; counter caption `color.field.counter` 4
 * below, on the right.
 */

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

	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.mk-field__label {
	margin-block: 0 var(--wp--custom--field--label-gap);
	color: var(--wp--custom--color--field--label);
	font-family: var(--wp--custom--text--caption--font-family);
	font-size: var(--wp--custom--text--caption--font-size);
	font-weight: var(--wp--custom--text--caption--font-weight);
	line-height: var(--wp--custom--text--caption--line-height);
	letter-spacing: var(--wp--custom--text--caption--letter-spacing);
}

.mk-field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.mk-field__input {
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
	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);
	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);
	appearance: none;
	transition-property: border-color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

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

@media (hover: hover) {
	.mk-field__input:hover:not(:disabled, :focus) {
		--mk-field-border: var(--wp--custom--color--field--border-hover);
	}
}

.mk-field__input:focus {
	--mk-field-border: var(--wp--custom--color--field--border-focus);
}

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

.mk-field__input:disabled {
	--mk-field-border: var(--wp--custom--color--field--border-disabled);

	background-color: var(--wp--custom--color--field--background-disabled);
	color: var(--wp--custom--color--field--text-disabled);
	cursor: not-allowed;
}

/* Success: room for the check on the right. */
.mk-field.is-success .mk-field__input {
	--mk-field-icon: calc(
		var(--wp--custom--field--icon-size) + var(--wp--custom--field--icon-gap)
	);

	padding-inline-end: calc(
		var(--wp--custom--field--padding-inline) + var(--mk-field-icon)
	);
}

.mk-field__control > .mk-icon--check {
	position: absolute;
	inset-inline-end: var(--wp--custom--field--padding-inline);
	display: none;
	inline-size: var(--wp--custom--field--icon-size);
	block-size: var(--wp--custom--field--icon-size);
	color: var(--mk-field-border);
	pointer-events: none;
}

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

.mk-field__input--textarea {
	display: block;
	block-size: var(--wp--custom--field--textarea-height);
	min-block-size: var(--wp--custom--field--textarea-height);
	resize: none;
}

.mk-field--textarea .mk-field__control {
	align-items: flex-start;
}

.mk-field--textarea .mk-field__control > .mk-icon--check {
	inset-block-start: var(--wp--custom--field--padding-block);
}

.mk-field__counter {
	margin-block: var(--wp--custom--field--counter-gap) 0;
	margin-inline: 0;
	color: var(--wp--custom--color--field--counter);
	font-family: var(--wp--custom--text--caption--font-family);
	font-size: var(--wp--custom--text--caption--font-size);
	font-weight: var(--wp--custom--text--caption--font-weight);
	line-height: var(--wp--custom--text--caption--line-height);
	letter-spacing: var(--wp--custom--text--caption--letter-spacing);
	text-align: end;
}

.mk-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--field--message-icon-gap);
	margin-block: var(--wp--custom--field--message-gap) 0;
	margin-inline: 0;
	color: var(--wp--custom--color--field--error);
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
}

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

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

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