/* Global password visibility toggle (see js/password_toggle.js) */

.pwd-toggle-wrap {
	position: relative;
	display: block;
	width: 100%;
}

/* Extra specificity so it beats .form-control / .lsm-input-with-icon padding */
.pwd-toggle-wrap > input.has-pwd-toggle {
	padding-right: 44px;
}

/* Edge/IE draw their own reveal button - avoid two eyes */
input.has-pwd-toggle::-ms-reveal,
input.has-pwd-toggle::-ms-clear {
	display: none;
}

.pwd-toggle-btn {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: inherit;
	opacity: 0.55;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.2s, background 0.2s;
}

.pwd-toggle-btn:hover,
.pwd-toggle-btn:focus {
	opacity: 1;
	background: rgba(128, 128, 128, 0.14);
}

.pwd-toggle-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Dark login/signup modal - the inherited page color is dark there, so force white */
.lsm-input-wrap .pwd-toggle-btn,
.login-signup-modal-content .pwd-toggle-btn {
	color: #fff;
	opacity: 0.7;
}

.lsm-input-wrap .pwd-toggle-btn:hover,
.lsm-input-wrap .pwd-toggle-btn:focus,
.login-signup-modal-content .pwd-toggle-btn:hover,
.login-signup-modal-content .pwd-toggle-btn:focus {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.pwd-toggle-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	pointer-events: none;
}