/**
 * The eye on password fields.
 *
 * Its own file rather than an addition to accounts.css, which this plugin can
 * only replace whole: appending one small component would mean retyping every
 * unrelated rule in it and risking a slip in one of them.
 *
 * The wrapper, the button and its icon are all created by
 * assets/js/password-reveal.js, so nothing here matches anything until that
 * script has run. That is deliberate — see the head of that file.
 *
 * @package CustomTours
 */

/*
 * Created around the input by the script, which also moves the input's bottom
 * margin onto this element. Without that move the wrapper is taller than the
 * field and the centred button sits low by half a margin.
 */
.ct-pw {
	position: relative;
	display: block;
}

/*
 * Room for the eye. A field whose text slides under the control is the failure
 * mode of every one of these ever built, and a password is the one field where
 * the end of what you typed is the part you are looking at.
 */
.ct-pw > input {
	padding-right: 46px;
}

.ct-pw__btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);

	/*
	 * 38px square. Comfortably past the 24px minimum for a touch target while
	 * still fitting inside the field, which is why the icon itself is only 18.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;

	/* The icon is drawn with stroke: currentColor, so this colours it. */
	color: #9AA1AC;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}

.ct-pw__btn:hover {
	background: #F5F7FA;
	color: #1A1A1A;
}

/* Pressed means the password is on screen, which is worth showing at a glance. */
.ct-pw__btn[aria-pressed="true"] {
	color: #1689CF;
}

.ct-pw__btn svg {
	display: block;
}

/*
 * It is taken out of the tab order by the script, so this only shows for a
 * pointer or a screen reader moving through the page. Still worth having: an
 * invisible focus state on a real button is a bug either way.
 */
.ct-pw__btn:focus-visible {
	outline: 2px solid #1689CF;
	outline-offset: 1px;
}