/*
 * Password strength indicator.
 *
 * A thin bar beneath the password input that fills with colour as the password grows stronger.
 * Four levels: weak (red), fair (warning), good (info), strong (success). The bar is empty by
 * default and only appears when JavaScript is active and the user is typing.
 */

.password-strength {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
    height: 4px;
}

.password-strength__segment {
    flex: 1;
    background: var(--colour-border);
    border-radius: 2px;
    transition: background-color var(--duration-fast) var(--easing);
}

/* Levels */

.password-strength[data-level="1"] .password-strength__segment:nth-child(-n+1) {
    background: var(--colour-error);
}

.password-strength[data-level="2"] .password-strength__segment:nth-child(-n+2) {
    background: var(--colour-warning);
}

.password-strength[data-level="3"] .password-strength__segment:nth-child(-n+3) {
    background: var(--colour-info);
}

.password-strength[data-level="4"] .password-strength__segment {
    background: var(--colour-success);
}

/* Label beneath the bar */

.password-strength__label {
    font-size: var(--text-xs);
    color: var(--colour-ink-quiet);
    margin-top: var(--space-1);
}