/* Custom styles */

@keyframes cms-action-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.92);
    }
    16% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    78% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -54%) scale(0.98);
    }
}

@keyframes cms-success-stroke {
    0% {
        stroke-dashoffset: var(--stroke-length);
    }
    38% {
        stroke-dashoffset: 0;
    }
    72% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: calc(var(--stroke-length) * -1);
    }
}

@keyframes cms-action-stroke {
    0% {
        stroke-dashoffset: var(--stroke-length);
    }
    38% {
        stroke-dashoffset: 0;
    }
    72% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: calc(var(--stroke-length) * -1);
    }
}

.cms-action-overlay {
    animation: cms-action-pop 1.45s ease forwards;
}

.cms-action-outline {
    color: #020617;
}

.cms-success-circle {
    --stroke-length: 151;
    stroke-dasharray: var(--stroke-length);
    stroke-dashoffset: var(--stroke-length);
    animation: cms-success-stroke 1.45s ease-in-out forwards;
}

.cms-success-check {
    --stroke-length: 32;
    stroke-dasharray: var(--stroke-length);
    stroke-dashoffset: var(--stroke-length);
    animation: cms-success-stroke 1.2s ease-in-out 0.2s forwards;
}

.cms-error-circle {
    --stroke-length: 151;
    stroke-dasharray: var(--stroke-length);
    stroke-dashoffset: var(--stroke-length);
    animation: cms-action-stroke 1.45s ease-in-out forwards;
}

.cms-error-line {
    --stroke-length: 22;
    stroke-dasharray: var(--stroke-length);
    stroke-dashoffset: var(--stroke-length);
    animation: cms-action-stroke 1.2s ease-in-out 0.2s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .cms-action-overlay,
    .cms-action-overlay path {
        animation: none;
    }
}