/* The eye on every password field (password-eye.js). Green-600 on light surfaces
   (4.88 on white), the brand green on dark ones; each page's own dark mode:
   html.auth-dark (sign-in), body.dark-mode (super admin), html.dark (store),
   html.ap-dark (the shop app). The script marks the field and its parent with
   attributes, not classes: Vue rewrites an element's class on every state change. */

[data-eye-host] {
    position: relative;
}

input[data-eye="on"] {
    padding-inline-end: 2.75rem !important;
}

.pw-eye {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #16823f;
    cursor: pointer;
    transform: translateY(-50%);
}

.pw-eye[hidden] {
    display: none;
}

/* Bootstrap's valid and invalid marks sit beside the eye, not under it */
input[data-eye="on"].is-invalid,
input[data-eye="on"].is-valid,
.was-validated input[data-eye="on"]:invalid,
.was-validated input[data-eye="on"]:valid {
    padding-inline-end: calc(2.75rem + 1.5em) !important;
    background-position: right 2.75rem center !important;
}

[dir="rtl"] input[data-eye="on"].is-invalid,
[dir="rtl"] input[data-eye="on"].is-valid,
[dir="rtl"] .was-validated input[data-eye="on"]:invalid,
[dir="rtl"] .was-validated input[data-eye="on"]:valid {
    background-position: left 2.75rem center !important;
}

.pw-eye svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pw-eye:hover {
    background: rgba(22, 130, 63, 0.08);
}

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

html.auth-dark .pw-eye,
body.dark-mode .pw-eye,
html.dark .pw-eye,
html.ap-dark .pw-eye {
    color: #61ce70;
}

html.auth-dark .pw-eye:hover,
body.dark-mode .pw-eye:hover,
html.dark .pw-eye:hover,
html.ap-dark .pw-eye:hover {
    background: rgba(97, 206, 112, 0.12);
}