/* Styling for the reveal button account-password.js injects into the
   standalone account pages. Loaded after account.css, whose .account-field
   input rules this builds on. */

.password-field {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Keep a long password from running underneath the button. */
.account-field .password-field input {
    padding-right: 2.75rem;
}

/* Chromium-based Edge renders its own reveal-password eye inside the input's
   own box once a password field is focused and non-empty, landing exactly
   where our button already sits — the two then show side by side. Suppress
   Edge's native one so only ours renders. Firefox and Chrome have no
   equivalent built-in icon, so this is a no-op there. */
.account-field .password-field input::-ms-reveal,
.account-field .password-field input::-ms-clear {
    display: none;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: #5b6673;
    cursor: pointer;
}

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

.password-toggle:focus-visible {
    outline: 2px solid #4f7f95;
    outline-offset: -2px;
}

.password-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
}