.otp-cell {
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.otp-cell-error {
    border-color: rgb(var(--pk-danger-rgb));
}

.otp-cell-success {
    animation: otp-cell-verified 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.otp-cell-success:nth-child(2) {
    animation-delay: 110ms;
}

.otp-cell-success:nth-child(3) {
    animation-delay: 220ms;
}

.otp-cell-success:nth-child(4) {
    animation-delay: 330ms;
}

.otp-cell-success:nth-child(5) {
    animation-delay: 440ms;
}

.otp-cell-success:nth-child(6) {
    animation-delay: 550ms;
}

.otp-cell-success:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--pk-success-rgb) / 22%);
}

@keyframes otp-cell-verified {
    0% {
        transform: scale(0.94);
        border-color: rgb(var(--pk-line-strong-rgb));
        background-color: rgb(var(--pk-surface-rgb));
        box-shadow: 0 0 0 0 rgb(var(--pk-success-rgb) / 0%);
    }

    70% {
        transform: scale(1.06);
        border-color: rgb(var(--pk-success-rgb));
        background-color: rgb(var(--pk-success-bg-rgb));
        box-shadow: 0 0 0 4px rgb(var(--pk-success-rgb) / 18%);
    }

    100% {
        transform: scale(1);
        border-color: rgb(var(--pk-success-rgb));
        background-color: rgb(var(--pk-success-bg-rgb));
        box-shadow: 0 0 0 2px rgb(var(--pk-success-rgb) / 12%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .otp-cell {
        transition: none;
    }

    .otp-cell-success {
        animation: none;
        border-color: rgb(var(--pk-success-rgb));
        background-color: rgb(var(--pk-success-bg-rgb));
        box-shadow: 0 0 0 2px rgb(var(--pk-success-rgb) / 12%);
    }
}