@import '@alfalab/core-components-vars/src/index.css';
@import '../../vars.css';
@import './animations.module.css';

.component {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pass-code-progress-container-min-height);
}

.dotWrapper {
    width: var(--pass-code-dot-container-width);
    height: var(--pass-code-dot-container-height);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--gap-0) 5px;

    & .dot {
        margin: unset;
    }
}

.dot {
    margin: var(--gap-0) var(--gap-6);
    width: var(--pass-code-dot-width);
    height: var(--pass-code-dot-height);
    background: var(--color-light-neutral-translucent-300);
    border-radius: var(--border-radius-circle);
    flex-shrink: 0;

    /* for unknown password length */
    &.filled {
        background: var(--color-light-neutral-translucent-1300);
    }

    /* for a known passcode length */
    &.animatedFill {
        background: var(--color-light-neutral-translucent-1300);
        animation: dotFilled 200ms ease-in forwards;
    }

    &.error {
        background: var(--color-light-status-negative);
    }

    &.success {
        background: var(--color-light-status-positive);
        animation: dotSuccessFilled 200ms ease-in forwards;
    }

    /* without animation */
    &.rawSuccess {
        background: var(--color-light-status-positive);
    }
}