/*
 * Blue Team - Robert Breutzmann, Miguel Fernandez, Carolina Rodriguez, Sara White
 * Primary Author/Owner - Robert Breutzmann
 * src/main/webapp/css/passwordToggle.css
 *
 * Styles for the show/hide "eye" button js/passwordToggle.js adds to every
 * password field. Linked once, site-wide, by WEB-INF/includes/styles.jsp - so this
 * is the only copy of these rules; no page or modal stylesheet should
 * repeat them. Depends on site.css being linked first - every color here
 * comes from a semantic variable, no hex values.
 */

.password-toggle {
	position: relative;
	width: 100%;
}

/* Two classes, so this outranks the element-level field rules in site.css
   (.form-group input), which the account popups use too, and only the
   right-hand padding changes - room for the button, so a long
   password never runs underneath it. */
.password-toggle .password-toggle__input {
	padding-right: 2.75rem;
}

/* Edge draws its own reveal button inside password fields; hide it so a
   field never shows two eyes. */
.password-toggle .password-toggle__input::-ms-reveal {
	display: none;
}

.password-toggle__btn {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
}

.password-toggle__btn:hover {
	color: var(--color-ocean-blue);
}

.password-toggle__btn:focus-visible {
	outline: 2px solid var(--color-input-border-focus);
	outline-offset: 1px;
}

.password-toggle__btn svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}