/**
*
* Timer Carousel Components
* Slide positioning, interactive timer progress bars, and state indicators
*
**/
#timer-carousel {
    .swiper-slide {
        position: relative;

        /* Create the timer-bar on active slide */
        &.swiper-slide-active {
            &::before {
                content: "";
                position: absolute;
                background: linear-gradient(135deg, #ef7715 60%, #ffd132);
                height: 3px !important;
                width: 0;
                top: 0;
                left: 0;
                border-radius: 2px 2px 2px 0;
                animation: indicateChange 5.5s linear forwards;
            }
        }

        /* Hide the timer-bars of the inactive slides */
        &:not(.swiper-slide-active) {
            &::before {
                display: none;
            }
        }
    }
}

/**
*
* Carousel Side Navigation Links
* Active layouts, spacing offsets, and directional indicators for list anchors
*
**/
@media (min-width: 1024px) {
    #branches-list li.is-active a span {
        position: relative;
        margin-left: 28px;
        font-weight: 600 !important;
    
        &::before {
            content: "";
            position: absolute;
            width: 18px;
            height: 1px;    
            left: -28px;
            top: calc(50% - 1px);
            background: var(--orange);
        }
    }
}

/**
*
* Core Animations
* Keyframe mechanics for progress bars and timeline indicators
*
**/
@keyframes indicateChange {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}