@use "../../01-core/external" as *;

@mixin ss-countdown {
    display: inline-flex;
    line-height: 1em;

    > * {
        position: relative;
        display: inline-block;
        height: 1em;
        overflow-y: hidden;
        font-variant-numeric: tabular-nums;
    }
    > *::before {
        content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A";
        white-space: pre;
        text-align: center;
        // Each row must be exactly 1em tall or the translate lands between
        // digits (page default line-height made every value render as "00").
        line-height: 1em;
        display: block;
        transition: transform 1s cubic-bezier(1, 0, 0, 1);
        transform: translateY(calc(var(--ss-countdown-value, 0) * -1em));
    }
}