.input-wrapper--password {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: visible;
    z-index: 1;
}

.input-wrapper--password .form-input.password-input {
    flex: 1 1 auto;
    min-height: inherit;
}

.form-group:has(.input-wrapper--password) {
    overflow: visible;
    position: relative;
    z-index: 1;
}

.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    bottom: auto;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--slate-400, #94a3b8);
    cursor: pointer;
    overflow: visible;
    z-index: 3;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: var(--primary-blue-light, #60a5fa);
    background: transparent;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--primary-blue-light, #60a5fa);
    outline-offset: 2px;
}

.password-toggle__icons {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    overflow: visible;
}

.password-toggle__icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    display: block;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    filter: brightness(0) saturate(100%) invert(72%) sepia(12%) saturate(456%) hue-rotate(176deg) brightness(95%) contrast(88%);
}

.password-toggle:hover .password-toggle__icon,
.password-toggle.is-revealed .password-toggle__icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(52%) saturate(1200%) hue-rotate(187deg) brightness(102%) contrast(96%);
}

.password-toggle__icon--show {
    opacity: 1;
}

.password-toggle__icon--hide {
    opacity: 0;
}

.password-toggle.is-revealed .password-toggle__icon--show {
    opacity: 0;
}

.password-toggle.is-revealed .password-toggle__icon--hide {
    opacity: 1;
}

.password-toggle.is-revealed {
    color: var(--primary-blue-light, #60a5fa);
}
