/* -----------------------------------------------------------------------------
 * Project:       Kirby Castle
 * Owner:         Joshua H. Kirby
 * Copyright:     Copyright (c) 2026 Joshua H. Kirby. All rights reserved.
 * Last Modified: 2026-07-18
 * --------------------------------------------------------------------------- */

/* Shared password-visibility eye toggle -- extracted out of pages/outside.css
 * (where it originally lived, back when outside.html was the only page with
 * a password field) so register.html can reuse the exact same mechanism
 * rather than duplicating it. Pairs with scripts/password_toggle.js's
 * initPasswordToggle(). Expects a <button class="password-toggle"> holding
 * the three-part eye SVG (see outside.html/register.html's markup) placed
 * next to the password <input> it controls -- this file only styles the
 * button/icon itself, not the surrounding field layout, which is each
 * page's own concern (outside.css's .input-shell vs. register.css's
 * .password-field-row). */

.password-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--gold-light);
  opacity: 0.9;
}

.eye-icon {
  height: 1.18rem;
  width: auto;
  transition: filter 160ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * Visible by default (password starts masked, per <input type="password">
 * in the template) -- initPasswordToggle() flips this class in lockstep
 * with the input's type, whether triggered by clicking this button or by
 * a page's own keyboard shortcut calling the returned toggle function, so
 * the icon can never show the wrong state for either trigger.
 */
.eye-slash {
  opacity: 1;
  transition: opacity 120ms ease;
}

.password-toggle.is-password-visible .eye-slash {
  opacity: 0;
}

.password-toggle:hover .eye-icon,
.password-toggle:focus-visible .eye-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 60%, transparent));
}