/*

COUNTDOWN

INFO: This are styles for a special `countdown`component
*/



.countdown {

    /* Local variables */
    --counter-bg: contrast-color(var(--body-bg));
    --counter-bg-opacity: 1;
    --digit-bg-opacity: 0.2;
    --digit-color: var(--brand-color);

    --digit-font-size: 16vw;

    @media (min-width: 768px) {
        --digit-font-size: min(12vw, 120px);
    }

    @media (min-width: 1200px) {
        --digit-font-size: min(10vw, 160px);
    }

    background-color: rgb(from var(--counter-bg) r g b / var(--counter-bg-opacity));
    display: flex;
    flex-direction: row;
    justify-content: center;
    line-height: 1;
}

.countdown__segment {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

.countdown__digits {
    color: var(--digit-color);
    font-family: 'Counter', monospace, sans-serif;
    font-size: var(--digit-font-size);
    position: relative;
    text-shadow: var(--digit-color) 0px 0px 20px;
    z-index: 0;

    &::after {
        content: '88';
        left: 0;
        opacity: var(--digit-bg-opacity);
        position: absolute;
        top: 0;
        z-index: -1;
    }
}

.countdown__label {
    color: contrast-color(var(--counter-bg));
}

.countdown__separator {
    color: var(--digit-color);
    font-family: 'Counter', monospace, sans-serif;
    font-size: var(--digit-font-size);
    position: relative;
    text-shadow: var(--digit-color) 0px 0px 20px;
    visibility: hidden; /* Toggle for animation */

    [data-counter$="1"] &,
    [data-counter$="3"] &,
    [data-counter$="5"] &,
    [data-counter$="7"] &,
    [data-counter$="9"] & {
        visibility: visible;
    }

    &::after {
        content: ':';
        left: 0;
        opacity: var(--digit-bg-opacity);
        position: absolute;
        top: 0;
        visibility: visible;
        z-index: -1;
    }
}


/* Load font file for Digits */

@font-face{
    font-family: 'Counter';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/Counter/Counter.eot?ehyx47');
    src: url('../Fonts/Counter/Counter.eot?ehyx47#iefix') format('embedded-opentype'),
         url('../Fonts/Counter/Counter.ttf?ehyx47') format('truetype'),
         url('../Fonts/Counter/Counter.woff?ehyx47') format('woff'),
         url('../Fonts/Counter/Counter.svg?ehyx47#counter') format('svg');
}