.button:has(.christmas) {
    background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(22, 91, 51) 100%);
}

.button .icon.christmas {
    mask-image: url(../images/ac_icon.svg);
    background-color: white !important;
}

@media (hover: hover) and (pointer: fine) {
    .button:has(.christmas):hover::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        pointer-events: none;
    }
}

.button:has(.christmas):active::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    pointer-events: none;
}

.vehicle-marker.complex {
    .christmas {
        position: absolute;
        top: -20px;
        right: -7px;
        width: 24px;
        height: 20px;
        transform: rotate(20deg);
        transform-origin: bottom left;
        background: url(../images/christmas_hat.svg) no-repeat 50% 50%;
        background-size: contain;
    }

    .snow {
        position: absolute;
        top: -50px;
        left: -12px;
        right: -12px;
        height: 50px;
        pointer-events: none;
        overflow: visible;
        z-index: 10;

        .flake {
            position: absolute;
            background: #dbeeff;
            border-radius: 50%;
            opacity: 0;
            animation: snowFall 1.2s linear infinite;
            box-shadow: 0 0 3px #dbeeffe6;
        }

        .f1 {
            width: 5px;
            height: 5px;
            left: 20%;
            animation-delay: 0s;
            animation-duration: 1s;
        }

        .f2 {
            width: 4px;
            height: 4px;
            left: 50%;
            animation-delay: 0.3s;
            animation-duration: 1.1s;
        }

        .f3 {
            width: 6px;
            height: 6px;
            left: 80%;
            animation-delay: 0.6s;
            animation-duration: 1.3s;
        }

        .f4 {
            width: 4px;
            height: 4px;
            left: 35%;
            animation-delay: 0.1s;
            animation-duration: 0.9s;
        }
    }
}

@keyframes snowFall {
    0% {
        transform: translateY(0) translate(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px) translate(3px);
        opacity: 0;
    }
}

.special-vehicles-modal {
    .christmas-lights {
        flex-shrink: 0;
        position: relative;
        height: 25px;
        margin-bottom: 8px;
    }

    .christmas-lights:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 24px;
        background: url(../images/christmas_lights.svg);
        background-repeat: repeat-x;
        animation: christmasLights 0.8s ease-in-out infinite alternate;
    }
}

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -20px;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(var(--snowflake-color-rgb), 0.8) 0%,
        rgba(var(--snowflake-color-rgb), 0.7) 30%,
        rgba(var(--snowflake-color-rgb), 0.6) 60%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(var(--snowflake-color-rgb), 0.4);
    animation:
        snowfall linear infinite,
        snowSway ease-in-out infinite;
}

@keyframes snowfall {
    0% {
        transform: translateY(-20px) rotate(0deg);
    }
    100% {
        transform: translateY(calc(100vh + 20px)) rotate(720deg);
    }
}

@keyframes snowSway {
    0%,
    100% {
        margin-left: 0;
    }
    25% {
        margin-left: 20px;
    }
    75% {
        margin-left: -20px;
    }
}

.departure-snow {
    position: relative;
}

.departure-snow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(3px 3px at 15px 8px, rgba(var(--snowflake-color-rgb2), 0.9), transparent),
        radial-gradient(4px 4px at 45px 25px, rgba(var(--snowflake-color-rgb2), 0.8), transparent),
        radial-gradient(3px 3px at 75px 12px, rgba(var(--snowflake-color-rgb2), 0.7), transparent),
        radial-gradient(3px 3px at 105px 30px, rgba(var(--snowflake-color-rgb2), 0.9), transparent),
        radial-gradient(2px 2px at 135px 18px, rgba(var(--snowflake-color-rgb2), 0.6), transparent),
        radial-gradient(4px 4px at 165px 35px, rgba(var(--snowflake-color-rgb2), 0.8), transparent);
    background-size: 180px 45px;
    animation: departureSnow 2s linear infinite;
    /* opacity: 0.6; */
    pointer-events: none;
    z-index: 0;
}

@keyframes departureSnow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 45px;
    }
}

@keyframes christmasLights {
    0% {
        filter: brightness(1) drop-shadow(0 2px 4px rgba(255, 0, 0, .3));
    }

    100% {
        filter: brightness(1.4) drop-shadow(0 2px 8px rgba(255, 0, 0, .5));
    }
}

:root {
    --snowflake-color-rgb: 150, 150, 150;
    --snowflake-color-rgb2: 100, 100, 100;
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --snowflake-color-rgb: 255, 255 ,255;
}