:root {
    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
    --color-light-status-negative: #ff4837;
    --color-light-status-positive: #0cc44d;
}
:root {
    --border-radius-circle: 50%;
}
:root {
    --gap-0: 0px;
    --gap-6: 6px;
}
:root {
    --pass-code-dot-width: 12px;
    --pass-code-dot-height: 12px;
    --pass-code-dot-container-width: 14px;
    --pass-code-dot-container-height: 14px;
    --pass-code-progress-container-min-height: 14px;
}
@keyframes dotFilled {
    50% {
        width: var(--pass-code-dot-container-width);
        height: var(--pass-code-dot-container-height);
        animation-timing-function: ease-out;
    }
}
@keyframes dotSuccessFilled {
    50% {
        width: var(--pass-code-dot-container-width);
        height: var(--pass-code-dot-container-height);
        animation-timing-function: ease-out;
    }
}
.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;
}
.dotWrapper .dot {
        margin: 0;
        margin: initial;
    }
.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;
}
.dot.filled {
        background: var(--color-light-neutral-translucent-1300);
    }
.dot.animatedFill {
        background: var(--color-light-neutral-translucent-1300);
        animation: dotFilled 200ms ease-in forwards;
    }
.dot.error {
        background: var(--color-light-status-negative);
    }
.dot.success {
        background: var(--color-light-status-positive);
        animation: dotSuccessFilled 200ms ease-in forwards;
    }
.dot.rawSuccess {
        background: var(--color-light-status-positive);
    }