/*
 * The eye beside a password box. Both the wrapper and the button are built by
 * javascript/password_reveal.js, so these rules can only ever reach elements
 * that file created -- which is why they live here and NOT in styles.css,
 * which is loaded site-wide and styles by element and by .table.
 */
.password-field { position: relative; }

/* Room for the button, so a long password does not run underneath it. */
.password-field input { padding-right: 2.75rem; }

/* Every rule below is scoped under .password-field, which is always the
   button's parent, so it reads as 0,2,0. Unscoped at 0,1,0 it loses to any
   `.some-card button` rule a page happens to carry -- which is exactly what
   happened on the sibling heritage site, where the eye came out as a
   full-width green submit button on allauth's own screens. */
.password-field .password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin:0 because an inherited button margin shifts an absolutely
       positioned element away from top:0 -- it put the eye 4px low on the
       heritage site's allauth screens. */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    line-height: 1;
    cursor: pointer;
}

.password-field .password-toggle:hover { color: #212529; }

.password-field .password-toggle:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
    border-radius: 0.25rem;
}

/* One source of truth for the state: the attribute a screen reader reads. */
.password-field .password-toggle .pw-icon-off,
.password-field .password-toggle[aria-pressed="true"] .pw-icon-on { display: none; }
.password-field .password-toggle[aria-pressed="true"] .pw-icon-off { display: inline; }