/*
 * Sikai — Show/hide for password and PIN fields.
 *
 * A global component in its own file, like flash.css, and for the same
 * reason: it appears on all four surfaces -- staff (.sk-field__input),
 * platform (.sk-input), parents (.p-input) and the legacy sign-up/reset
 * screens -- and each of those uses a different field class. One set of
 * surface-neutral .pw-* classes wrapping whatever input is already there
 * beats four near-copies of the same rule under four prefixes.
 *
 * It styles the WRAPPER and the BUTTON only, and never the input: the field
 * keeps whatever class its own surface gives it, so a staff password still
 * looks like every other staff field and a parent's PIN still looks like
 * every other parent field. The only thing this adds to the input is room on
 * the right for the button to sit in, which is done with padding-right on the
 * wrapper's child rather than by restyling it.
 *
 * See password_reveal_controller.js for the behaviour.
 */

.pw-reveal {
  position: relative;
  display: block;
}

/* The input keeps its own surface's styling; all it gains here is space for
   the button. 4.5rem clears "Hide"/"Show" at every font-size these surfaces
   set, without measuring each one. */
.pw-reveal > input {
  width: 100%;
  padding-right: 4.5rem;
}

/* Vertically centred against the input rather than pinned to a fixed top:
   the four surfaces pad their fields differently (13px on .sk-field__input,
   12px on .sk-input) and this has to sit right in all of them. */
.pw-reveal__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.pw-reveal__toggle:hover {
  color: var(--sk-ink);
  background: rgba(23, 24, 26, .06);
}

.pw-reveal__toggle:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
}

/* The children's sign-in is the one surface this must not inherit grey from:
   student.css sets its own ink, and --sk-text-2 on the pale auth card is
   fine, but the pressed/hover states above reach for staff tokens. Scoped
   rather than left to cascade so a child's screen is never accidentally
   restyled by a staff token changing. */
.sikai-student .pw-reveal__toggle {
  color: var(--sk-text-2);
}