/*
 * Password input component.
 *
 * A text input with a visibility toggle button. The toggle is positioned inside the input wrapper
 * and does not affect the input's layout. The button is keyboard-accessible and carries an
 * aria-label set by the template.
 */

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

.password-input__field {
    padding-right: 3.5rem;
    width: 100%;
}

.password-input__toggle {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    line-height: 1;
}

.password-input__toggle:hover {
    color: var(--colour-ink);
}

.password-input__toggle:focus-visible {
    outline: var(--focus-width) solid var(--colour-focus);
    outline-offset: var(--focus-offset);
}

.password-input__toggle-text {
    pointer-events: none;
}