/*
 * Show/hide toggle for password fields. Used with /assets/js/password-field.js.
 *
 * Usage:
 *   <link rel="stylesheet" href="/assets/css/password-field.css">
 *   <input type="password" name="password" data-password-toggle>
 *   <script src="/assets/js/password-field.js"></script>
 */

/* wrapper added by password-field.js around each input */
.password-field {
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

/* room for the button inside the field so typed text doesn't run under it */
.password-field input.has-password-toggle {
	min-width: 150px;
	padding-right: 30px;
}

/* increase all text fields to match pw field */
input.password-form-input {
	min-width: 150px;
}

/* count padding and border inside the 150px so the password box (with its extra
   right padding for the button) lines up with the other text boxes */
.password-field input.has-password-toggle,
input.password-form-input {
	/* !important: page frameworks (e.g. Materialize on the login page) set content-box on
	   inputs with more specific selectors, which would make the text boxes 12px wider */
	box-sizing: border-box !important;
}


.password-toggle {
	position: absolute;
	top: 50%;
	right: 4px;
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	color: #858b93;
	background: transparent;
	cursor: pointer;
	transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus {
	color: #22272e;
	background: transparent;
}

.password-toggle:focus-visible {
	outline: 2px solid #ff5494;
	outline-offset: 1px;
}

.password-toggle svg {
	width: 16px;
	height: 16px;
	display: block;
}