/* Last Updated: 01.07.2025 at 21:20 (CEST) */
/* =======================================================
   Rotating Countdown Utility
   Provides reusable styles for circular countdown timers
   ======================================================= */

:root {
    --spin-duration: 1s;
}

.rotating-countdown {
    position: relative;
    width: 50px;
    aspect-ratio: 1;
    display: inline-block;
}

.timer-spinner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    background:
        radial-gradient(farthest-side, var(--timer-color) 95%, #0000) 50% 0/12px 12px no-repeat,
        radial-gradient(farthest-side, #0000 calc(100% - 5px), var(--timer-color) calc(100% - 4px)) content-box;
    animation: timer-spin var(--spin-duration) linear infinite;
}

.rotating-countdown .timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--timer-color);
}

@keyframes timer-spin {
    to { transform: rotate(1turn); }
}