/*
 * Ojo de la contraseña (C29): estilo del botón que agrega
 * `assets/js/password-toggle.js` a cada campo de contraseña.
 *
 * El botón va como hermano del campo, pegado a su borde derecho, y ocupa
 * todo el alto del contenedor (que en todos los formularios del sitio mide
 * lo mismo que el campo). 44 px de ancho: es el mínimo para tocarlo con el
 * dedo sin errar.
 */

.ace-pw-host {
	position: relative;
}

/* Que lo escrito no pase por debajo del ojo. */
.ace-pw-host input[data-ace-pw] {
	padding-inline-end: 48px;
}

.ace-pw-toggle {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	min-block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 10px 10px 0;
	background: transparent;
	color: #3a3a3a;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ace-pw-toggle:hover {
	color: #ce2731;
}

.ace-pw-toggle:focus-visible {
	outline: 2px solid #ce2731;
	outline-offset: -4px;
	border-radius: 10px;
	color: #ce2731;
}

.ace-pw-toggle__icon {
	display: block;
	inline-size: 20px;
	block-size: 20px;
	pointer-events: none;
}

/* WooCommerce agrega su propio "mostrar contraseña" en algunos formularios (cambio de contraseña): se deja el nuestro, uno solo. */
.ace-pw-host .show-password-input {
	display: none !important;
}