/**
 * Password field: .mk-field--password (templates/components/text-field.php,
 * type password; part of field.css). The input keeps room on the right for
 * the eye button (icon 24 = `field.iconSize`, 8 gap); `eye` while the
 * password is hidden, `eye-off` while it shows (aria-pressed). Icon colour
 * `color.field.toggle`; no success check.
 */

.mk-field--password .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__toggle {
	position: absolute;
	inset-inline-end: var(--wp--custom--field--padding-inline);
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--custom--color--field--toggle);
	cursor: pointer;
}

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

.mk-field__toggle[aria-pressed="true"] .mk-icon--eye,
.mk-field__toggle[aria-pressed="false"] .mk-icon--eye-off {
	display: none;
}

.mk-field__toggle:disabled {
	cursor: not-allowed;
}

.mk-field__toggle:focus-visible {
	border-radius: var(--wp--preset--border-radius--3);
	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);
}