/* =========================================================
   NETMORE LOGO MARQUEE
   FULL CSS
   - Seamless horizontal marquee
   - Image/logo repeater
   - Pause on hover
   - Optional grayscale
   - Responsive sizing
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.netmore-logo-marquee {
    --netmore-marquee-border-color:
        rgba(255,255,255,0.12);

    --netmore-marquee-hover-scale:
        1.05;

    --netmore-marquee-hover-opacity:
        1;

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    background: #111111;

    overflow: visible;
}


.netmore-logo-marquee *,
.netmore-logo-marquee *::before,
.netmore-logo-marquee *::after {
    box-sizing: border-box;
}


/* =========================================================
   OPTIONAL OVERFLOW
========================================================= */

.netmore-logo-marquee-hide-overflow {
    overflow: hidden;
}


/* =========================================================
   BORDER OPTIONS
========================================================= */

.netmore-logo-marquee-border-top {
    border-top:
        1px solid
        var(--netmore-marquee-border-color);
}


.netmore-logo-marquee-border-bottom {
    border-bottom:
        1px solid
        var(--netmore-marquee-border-color);
}


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

.netmore-logo-marquee-track-wrap {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    overflow: hidden;
}


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

.netmore-logo-marquee-track {
    position: relative;

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    width: max-content;

    min-width: max-content;

    gap: 80px;

    will-change: transform;

    transform:
        translate3d(0, 0, 0);
}


/* =========================================================
   GROUP
========================================================= */

.netmore-logo-marquee-group {
    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    flex-shrink: 0;

    gap: 80px;
}


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

.netmore-logo-marquee-item {
    position: relative;

    width: 160px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* =========================================================
   LINK / WRAPPER
========================================================= */

.netmore-logo-marquee-link,
.netmore-logo-marquee-image-wrap {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    outline: none;
}


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

.netmore-logo-marquee-image {
    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    max-height: 70px;

    object-fit: contain;

    object-position: center center;

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transform-origin:
        center center;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        filter 0.35s ease;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   GRAYSCALE
========================================================= */

.netmore-logo-marquee-grayscale
.netmore-logo-marquee-image {
    filter:
        grayscale(1);
}


/* =========================================================
   HOVER
========================================================= */

.netmore-logo-marquee-item:hover
.netmore-logo-marquee-image {
    transform:
        translate3d(0, 0, 0)
        scale(
            var(--netmore-marquee-hover-scale)
        );

    opacity:
        var(--netmore-marquee-hover-opacity);
}


/* =========================================================
   GRAYSCALE HOVER
   RETURN TO COLOR
========================================================= */

.netmore-logo-marquee-grayscale
.netmore-logo-marquee-item:hover
.netmore-logo-marquee-image {
    filter:
        grayscale(0);
}


/* =========================================================
   PAUSE ON HOVER
   JS CAN ALSO USE THIS CLASS
========================================================= */

.netmore-logo-marquee-pause-hover:hover
.netmore-logo-marquee-track {
    animation-play-state:
        paused;
}


/* =========================================================
   DIRECTION HELPERS
========================================================= */

.netmore-logo-marquee-direction-left
.netmore-logo-marquee-track {
    flex-direction:
        row;
}


.netmore-logo-marquee-direction-right
.netmore-logo-marquee-track {
    flex-direction:
        row;
}


/* =========================================================
   PREVENT THEME IMAGE STYLES
========================================================= */

.netmore-logo-marquee
img.netmore-logo-marquee-image {
    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}


/* =========================================================
   FOCUS
========================================================= */

.netmore-logo-marquee-link:focus-visible {
    outline:
        1px solid
        currentColor;

    outline-offset:
        8px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1700px) {

    .netmore-logo-marquee-track,
    .netmore-logo-marquee-group {
        gap: 90px;
    }


    .netmore-logo-marquee-item {
        width: 170px;
    }


    .netmore-logo-marquee-image {
        max-height: 74px;
    }
}


/* =========================================================
   NORMAL DESKTOP / LAPTOP
========================================================= */

@media
(
    min-width: 1200px
)
and
(
    max-width: 1699px
) {

    .netmore-logo-marquee-track,
    .netmore-logo-marquee-group {
        gap: 70px;
    }


    .netmore-logo-marquee-item {
        width: 145px;
    }


    .netmore-logo-marquee-image {
        max-height: 62px;
    }
}


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

@media
(
    min-width: 768px
)
and
(
    max-width: 1199px
) {

    .netmore-logo-marquee-track,
    .netmore-logo-marquee-group {
        gap: 52px;
    }


    .netmore-logo-marquee-item {
        width: 125px;
    }


    .netmore-logo-marquee-image {
        max-height: 54px;
    }
}


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

@media (max-width: 767px) {

    .netmore-logo-marquee-track,
    .netmore-logo-marquee-group {
        gap: 34px;
    }


    .netmore-logo-marquee-item {
        width: 100px;
    }


    .netmore-logo-marquee-image {
        max-height: 44px;
    }
}


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

@media (max-width: 480px) {

    .netmore-logo-marquee-track,
    .netmore-logo-marquee-group {
        gap: 28px;
    }


    .netmore-logo-marquee-item {
        width: 88px;
    }


    .netmore-logo-marquee-image {
        max-height: 38px;
    }
}


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

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

    .netmore-logo-marquee-track {
        transform:
            translate3d(0, 0, 0) !important;
    }


    .netmore-logo-marquee-image {
        transition:
            none !important;
    }
}