/*
 * Show/hide password toggle.
 *
 * Markup (rendered by common\assets\PasswordToggleAsset::template()):
 *
 *   <div class="pwt pwt--inline">                      login screens
 *   <div class="pwt pwt--block no-padding col-...">    in-app forms
 *       <input class="pwt__input" type="password">
 *       <button type="button" class="pwt__btn" aria-pressed="false" aria-label="Show password">
 *           <svg class="pwt__icon pwt__icon--show">...</svg>
 *           <svg class="pwt__icon pwt__icon--hide">...</svg>
 *       </button>
 *   </div>
 *
 * Button rules are written as `.pwt .pwt__btn` (0,0,2,0) so they beat the
 * login screens' `.login-box button` (0,0,1,1) submit-button styling in
 * css/login/style.css, regardless of stylesheet order. Order matters here:
 * on in-app pages this bundle registers from the VIEW (rendered first) while
 * AppAsset registers from the LAYOUT, so Bootstrap/AdminLTE CSS lands AFTER
 * ours in <head>. Specificity, not order, is what makes these win.
 */

.pwt {
    position: relative;
}

/* --- login screens: no Bootstrap, no box-sizing reset ------------------- */
/* The wrapper shrink-wraps the input so `right: 0` is the input's own edge,
   and it is centred by `.login-box { text-align: center }` - a dependency of
   this variant; don't remove that rule from css/login/style.css. The 20px
   bottom margin from `.login-box input` moves onto the wrapper so the button
   can stretch over the input alone. */
.pwt--inline {
    display: inline-block;
    margin-bottom: 20px;
}

.pwt--inline > .pwt__input {
    display: block;      /* also removes the inline-block baseline gap */
    margin-bottom: 0;
    padding-right: 2rem;
}

/* Keep the username field the same width as the password field. The login
   inputs are content-box (no Bootstrap reset on this page), so the button's
   padding-right would otherwise make the password input ~24px wider than the
   username input directly above it. */
.login-page .login-box input {
    padding-right: 2rem;
}

/* --- in-app forms: the wrapper carries the Bootstrap grid classes ------- */
/* Moving the grid classes off the input and onto the wrapper is what makes
   the overlay work: the wrapper IS the grid column, so it has the same width,
   float and flow position, Bootstrap 3's `.col-*` already sets
   `position: relative`, and the in-flow block input gives it real height.
   It also sidesteps AdminLTE's `.no-padding { padding: 0 !important }`,
   which would otherwise beat any padding-right set on the input. */
.pwt--block > .pwt__input {
    display: block;
    width: 100%;
    padding: 0 2rem 0 0;
}

/* Edge draws its own reveal/clear glyphs inside password inputs. */
.pwt__input::-ms-reveal,
.pwt__input::-ms-clear {
    display: none;
}

/* --- the button -------------------------------------------------------- */
.pwt .pwt__btn {
    display: none;              /* revealed by JS once the field has a value */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    min-width: 0;               /* .login-box button: min-width: 150px */
    margin: 0;
    padding: 0;                 /* .login-box button: padding: 10px */
    border: 0;
    border-radius: 0;
    background: none;           /* .login-box button: background-color: #3366ff */
    color: #888;                /* .login-box button: color: white */
    font: inherit;
    line-height: 1;
    letter-spacing: normal;     /* not reset by the `font` shorthand */
    text-transform: none;       /* not reset by the `font` shorthand */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pwt .pwt__btn.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwt .pwt__btn:hover {
    color: #333;
    opacity: 1;                 /* .login-box button:hover fades to 0.7 */
}

.pwt .pwt__btn:focus-visible {
    outline: 2px solid #665851; /* .login-box button sets outline: none */
    outline-offset: -2px;
}

/* --- icon swap, driven entirely by aria-pressed ------------------------ */
.pwt .pwt__icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

.pwt .pwt__icon--hide,
.pwt .pwt__btn[aria-pressed="true"] .pwt__icon--show {
    display: none;
}

.pwt .pwt__btn[aria-pressed="true"] .pwt__icon--hide {
    display: block;
}

/* --- autofill detection ------------------------------------------------ */
/* Chrome, Edge and Safari hide an autofilled password's value from scripts
   until the user interacts with the page, so the button cannot be revealed by
   reading input.value. Attaching an animation to :-webkit-autofill makes the
   browser fire `animationstart` at autofill time instead. Firefox does not
   support :-webkit-autofill but does expose the value, so the pageshow/focus
   syncs in the JS cover it. */
@keyframes pwtAutofill {
    from { background-color: inherit; }
    to   { background-color: inherit; }
}

.pwt__input:-webkit-autofill {
    animation-name: pwtAutofill;
    animation-duration: 1ms;
}