.code-err{
    color:red;
    transition:0.5s all linear;
    opacity:0;
    border:0;
}
#code-input.pin-err .code-err{
    opacity:1;
}

#code-input.pin-err .code-digit{
    transition:0.5s all linear;
    border-color:red;
}

.pin-err.code-err{
    opacity:1;
}

.code-input-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
    align-items:center;
    flex-direction: row;
}

.code-input-container input{
    width:2em;
    height:2em;
}

.code-digit {
    /* width: 40px;
    height: 40px; */
    text-align: center;
    font-size: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

.code-digit:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.code-digit:disabled {
    background-color: #f5f5f5;
}