/* Eye icon that toggles masked characters, attached by /js/shared/password-toggle.js */

.svlag-password-toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	box-sizing: border-box;
	color: #999;
	cursor: pointer;
	line-height: 0;
	outline: none;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	z-index: 3;
}

	/* Hover surface behind the icon, shows the clickable area */
	.svlag-password-toggle:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 28px;
		height: 28px;
		margin: -14px 0 0 -14px;
		border-radius: 4px;
		background-color: transparent;
		transition: background-color 0.15s ease-in-out;
	}

	.svlag-password-toggle.is-visible {
		color: #555;
	}

	.svlag-password-toggle:hover,
	.svlag-password-toggle:focus,
	.svlag-password-toggle.is-visible:hover,
	.svlag-password-toggle.is-visible:focus {
		color: #298ccd;
		background: none;
	}

		.svlag-password-toggle:hover:before,
		.svlag-password-toggle:focus:before {
			background-color: #eaeef2;
		}

		.svlag-password-toggle:active:before {
			background-color: #dde3e9;
		}

	.svlag-password-toggle svg {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 18px;
		height: 18px;
		fill: currentColor;
		pointer-events: none;
	}

	/* Masked field: crossed out eye. Readable field: open eye */
	.svlag-password-toggle .svlag-password-toggle-eye {
		display: none;
	}

	.svlag-password-toggle.is-visible .svlag-password-toggle-eye-slash {
		display: none;
	}

	.svlag-password-toggle.is-visible .svlag-password-toggle-eye {
		display: inline-block;
	}

/* Edge/IE has a reveal icon of its own */
input[type="password"]::-ms-reveal {
	display: none;
}