/* =========================================================
   INTELLIDANE SCROLLBAR
========================================================= */

.intellidane-scrollbar {
    --intellidane-scrollbar-height: 120px;
    --intellidane-scrollbar-logo-height: 50px;
    --intellidane-scrollbar-logo-width: 150px;
    --intellidane-scrollbar-gap: 80px;
    --intellidane-scrollbar-speed: 35s;

    position: relative;
    width: 100%;
    height: var(--intellidane-scrollbar-height);

    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   VIEWPORT
========================================================= */

.intellidane-scrollbar__viewport {
    width: 100%;
    height: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
}


/* =========================================================
   TRACK
========================================================= */

.intellidane-scrollbar__track {
    display: flex;
    align-items: center;

    width: max-content;

    gap: var(--intellidane-scrollbar-gap);

    flex-shrink: 0;

    animation:
        intellidane-scrollbar-scroll
        var(--intellidane-scrollbar-speed)
        linear
        infinite;

    will-change: transform;
}


/* =========================================================
   ITEM
========================================================= */

.intellidane-scrollbar__item {
    flex: 0 0 auto;

    width: var(--intellidane-scrollbar-logo-width);
    height: var(--intellidane-scrollbar-logo-height);

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   LOGO
========================================================= */

.intellidane-scrollbar__item img {
    display: block;

    width: auto;
    height: var(--intellidane-scrollbar-logo-height);

    max-width: var(--intellidane-scrollbar-logo-width);

    object-fit: contain;

    opacity: 0.75;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.intellidane-scrollbar__item:hover img {
    opacity: 1;
    transform: scale(1.05);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes intellidane-scrollbar-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   SIDE FADE
========================================================= */

.intellidane-scrollbar__fade {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 120px;

    z-index: 2;

    pointer-events: none;
}


.intellidane-scrollbar__fade--left {
    left: 0;

    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0)
        );
}


.intellidane-scrollbar__fade--right {
    right: 0;

    background:
        linear-gradient(
            to left,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0)
        );
}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.intellidane-scrollbar:hover
.intellidane-scrollbar__track {

    animation-play-state: paused;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .intellidane-scrollbar {
        --intellidane-scrollbar-height: 100px;
        --intellidane-scrollbar-logo-height: 40px;
        --intellidane-scrollbar-logo-width: 120px;
        --intellidane-scrollbar-gap: 50px;
        --intellidane-scrollbar-speed: 30s;
    }

    .intellidane-scrollbar__fade {
        width: 70px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .intellidane-scrollbar {
        --intellidane-scrollbar-height: 85px;
        --intellidane-scrollbar-logo-height: 34px;
        --intellidane-scrollbar-logo-width: 100px;
        --intellidane-scrollbar-gap: 35px;
        --intellidane-scrollbar-speed: 25s;
    }

    .intellidane-scrollbar__fade {
        width: 50px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .intellidane-scrollbar__track {
        animation: none;
    }

}