/**
 * L'œil « afficher le mot de passe ».
 * Repris de l'extrait #70, l'œil devenant un bouton atteignable au clavier.
 */

.sp-password-wrap {
	position: relative;
}

.sp-password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #777;
	font-size: 18px;
	line-height: 1;
	z-index: 10;
	user-select: none;
	background: none;
	border: 0;
	padding: 4px;
	border-radius: 6px;
}

.sp-password-toggle:hover {
	color: #000;
}

.sp-password-toggle:focus-visible {
	outline: 2px solid #e9c36e;
	outline-offset: 2px;
	color: #000;
}

.sp-password-wrap input[type="password"],
.sp-password-wrap input[type="text"] {
	padding-right: 45px !important;
}

/* L'œil de MemberPress, masqué.
 *
 * L'extension pose le sien sur ses propres champs de mot de passe, et le
 * plugin pose celui-ci sur tout le site : sans cette règle, il y en a deux
 * côte à côte sur le formulaire de connexion.
 *
 * Cette règle vivait dans le CSS additionnel du Personnalisateur, donc en
 * base et sans versionnement. Elle est rapatriée ici, à côté de l'œil qu'elle
 * sert à ne pas doubler. */
.mepr-login-form .mp-hide-pw,
.mp-login-form .mp-hide-pw,
button.mp-hide-pw {
	display: none !important;
}