/* The show/hide control on every password field (js/password-reveal.js builds it). Structure and
   size live here once; each brand tints it by declaring the --pw-reveal-* properties on its own
   :root (site.css for the practice sites and the portal, riverstarr.css for the operator's), the
   same arrangement as the --cookie-* strip in cookie-banner.css.

   The button sits INSIDE the control rather than beside it, so the field keeps its width and the
   two planes' field shapes both survive: the operator's .rs-field already carries a leading icon
   at the left, and this only ever claims the right. */

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

/* Room for the button, so a long password never runs underneath it. Set on the input rather than
   the wrapper because .form-control draws the border this padding sits inside. */
.pw-reveal .form-control {
    padding-right: 2.75rem;
}

.pw-reveal__toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pw-reveal-ink);
    cursor: pointer;
    /* The control is decoration around someone else's field: it must not add height to the row. */
    line-height: 0;
}

.pw-reveal__toggle:hover,
.pw-reveal__toggle:focus-visible {
    color: var(--pw-reveal-ink-active);
    background: var(--pw-reveal-hover-bg);
}

/* Focus has to be visible on a control that carries no border of its own — without this the ring
   is the browser's default, which disappears against a tinted field on the operator's site. */
.pw-reveal__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--pw-reveal-focus-ring);
}

.pw-reveal__toggle svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Chrome and Edge draw their own reveal control in the field. Two eyes side by side is the bug
   this hides; ours stays because it is the one that behaves the same in every browser. */
.pw-reveal .form-control::-ms-reveal,
.pw-reveal .form-control::-ms-clear {
    display: none;
}