/*
 * The reveal control injected by /js/password-reveal.js.
 *
 * Shared by the admin, the player site and the agent portal — three different
 * stylesheets — so it is deliberately self-contained and inherits its colour
 * from whatever surrounds it rather than naming any brand token.
 */

.pw-field {
    position: relative;
    display: block;
    /* Password boxes sit inside flex rows on some forms (the agent login pairs
       one with an icon), where the wrapper takes the input's place as the item. */
    flex: 1 1 auto;
    min-width: 0;
}

.pw-field > input {
    width: 100%;
    /* Room for the control, so a long password never runs underneath it. */
    padding-right: 40px;
}

.pw-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: .5;
    cursor: pointer;
}

.pw-reveal:hover { opacity: 1; }
.pw-reveal:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }

.pw-reveal svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}