/* Author: Serkan Arslan | https://aserkan.com */
.sa-password-field {
    position: relative;
    --sa-password-icon: #4b5563;
    --sa-password-icon-active: #202936;
}

[data-bs-theme="dark"] .sa-password-field,
.sa-login-card .sa-password-field {
    --sa-password-icon: #dce7f5;
    --sa-password-icon-active: #fff;
}

.sa-password-field > .form-control {
    padding-inline-end: 50px !important;
}

/* Keep Bootstrap's validation icon clear of the password control. */
.sa-password-field > .form-control:is(.is-valid, .is-invalid),
.was-validated .sa-password-field > .form-control:is(:valid, :invalid) {
    padding-inline-end: 72px !important;
    background-position: right 48px center;
}

.sa-password-field > .form-control::-ms-reveal {
    display: none;
}

.sa-password-toggle {
    position: absolute;
    inset-inline-end: 2px;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: max(100%, 44px);
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sa-password-icon);
    cursor: pointer;
    transform: translateY(-50%);
}

.sa-password-toggle > i {
    display: block;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.sa-password-toggle:is(:hover, :focus-visible) {
    color: var(--sa-password-icon-active);
}

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