/* ============================================================
   AVIYAN PROFESSIONAL NEWS TICKER
   FINAL POLISHED VERSION
============================================================ */

.av-news-ticker {

    --avnt-navy: #0b2c52;
    --avnt-navy-dark: #081f3b;

    --avnt-blue: #087fc4;

    --avnt-gold: #c69a1e;
    --avnt-gold-light: #e2bb48;

    --avnt-text: #0b1220;
    --avnt-muted: #667085;

    --avnt-border: #e2e8f0;
    --avnt-soft: #f8fafc;

    --avnt-distance: -1000px;
    --avnt-duration: 30s;

    position: relative;

    width: 100%;
    height: 68px;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background: #ffffff;

    border-top:
        2px solid
        var(--avnt-gold);

    border-bottom:
        1px solid
        var(--avnt-border);

    box-shadow:
        0 5px 18px
        rgba(6, 21, 49, .07);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    isolation: isolate;
}


/* ============================================================
   FIXED LEFT LABEL
============================================================ */

.av-news-ticker__label {

    position: relative;

    z-index: 5;

    min-width: 155px;

    flex: 0 0 auto;

    padding:
        0 18px;

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

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--avnt-navy) 0%,
            #0c3159 100%
        );

    font-size: 9.5px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ============================================================
   LABEL ARROW
============================================================ */

.av-news-ticker__label::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    right: -10px;

    width: 10px;

    background: #0c3159;

    clip-path:
        polygon(
            0 0,
            100% 50%,
            0 100%
        );
}


/* ============================================================
   LABEL ICON
============================================================ */

.av-news-ticker__label-icon {

    width: 28px;
    height: 28px;

    flex:
        0 0 28px;

    display: flex;

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

    color:
        var(--avnt-gold-light);

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 50%;

    font-size: 11px;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            195,
            0,
            .04
        );
}


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

.av-news-ticker__viewport {

    position: relative;

    min-width: 0;

    flex: 1;

    overflow: hidden;

    padding-left: 17px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
}


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

.av-news-ticker__track {

    width: max-content;

    min-width: 100%;

    height: 100%;

    display: flex;
    align-items: center;

    will-change: transform;
}


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

.av-news-ticker.is-running
.av-news-ticker__track {

    animation:
        avNewsTickerScroll
        var(--avnt-duration)
        linear
        infinite;
}


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

.av-news-ticker__group {

    flex:
        0 0 auto;

    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;
}


/* ============================================================
   GAP BETWEEN ORIGINAL AND CLONE
============================================================ */

.av-news-ticker__group-gap {

    width: 40px;

    flex:
        0 0 40px;
}


/* ============================================================
   NEWS CARD
============================================================ */

.av-news-ticker__card {

    position: relative;

    flex:
        0 0 auto;

    min-height: 54px;

    padding:
        5px 14px
        5px 6px;

    display:
        inline-flex;

    align-items:
        center;

    gap: 10px;

    color:
        var(--avnt-text)
        !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    border:
        1px solid
        var(--avnt-border);

    border-radius:
        10px;

    text-decoration:
        none !important;

    box-shadow:
        0 2px 5px
        rgba(
            15,
            23,
            42,
            .035
        );

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


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

.av-news-ticker__card:hover,
.av-news-ticker__card:focus {

    color:
        var(--avnt-text)
        !important;

    background:
        #f5f9fc;

    border-color:
        #a8bfd6;

    box-shadow:
        0 5px 14px
        rgba(
            15,
            23,
            42,
            .07
        );

    transform:
        translateY(-1px);

    text-decoration:
        none !important;

    outline: none;
}


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

.av-news-ticker__card:focus-visible {

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            127,
            196,
            .15
        );
}


/* ============================================================
   THUMBNAIL
============================================================ */

.av-news-ticker__thumb {

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    overflow: hidden;

    display: flex;

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

    background:
        #e7edf3;

    border-radius:
        7px;

    border:
        1px solid
        rgba(
            11,
            44,
            82,
            .06
        );
}


/* ============================================================
   THUMBNAIL IMAGE
============================================================ */

.av-news-ticker__thumb img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .25s ease;
}


.av-news-ticker__card:hover
.av-news-ticker__thumb img {

    transform:
        scale(1.04);
}


/* ============================================================
   THUMBNAIL PLACEHOLDER
============================================================ */

.av-news-ticker__thumb-placeholder {

    width: 100%;
    height: 100%;

    display: flex;

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

    color:
        var(--avnt-blue);

    background:
        linear-gradient(
            135deg,
            #edf5fb,
            #e2edf7
        );

    font-size:
        14px;
}


/* ============================================================
   TEXT INFO
============================================================ */

.av-news-ticker__info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 4px;
}


/* ============================================================
   CATEGORY LABEL
============================================================ */

.av-news-ticker__category {

    color:
        #a1760c;

    font-size:
        8.5px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .75px;

    text-transform:
        uppercase;
}


/* ============================================================
   HEADLINE
============================================================ */

.av-news-ticker__headline {

    max-width:
        320px;

    overflow:
        hidden;

    color:
        var(--avnt-text);

    font-size:
        12.5px;

    line-height:
        1.35;

    font-weight:
        600;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* ============================================================
   ARROW
============================================================ */

.av-news-ticker__arrow {

    width: 24px;
    height: 24px;

    flex:
        0 0 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #718096;

    background:
        #ffffff;

    border:
        1px solid
        #dde5ec;

    border-radius:
        50%;

    font-size:
        7px;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


/* ============================================================
   CARD ARROW HOVER
============================================================ */

.av-news-ticker__card:hover
.av-news-ticker__arrow {

    color:
        #ffffff;

    background:
        var(--avnt-blue);

    border-color:
        var(--avnt-blue);

    transform:
        translateX(1px);
}


/* ============================================================
   RIGHT CONTROL
============================================================ */

.av-news-ticker__control {

    position:
        relative;

    z-index:
        6;

    width:
        46px;

    flex:
        0 0 46px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #596779;

    background:
        #f8fafc;

    border:
        0;

    border-left:
        1px solid
        var(--avnt-border);

    cursor:
        pointer;

    font-size:
        10px;

    transition:
        color .18s ease,
        background .18s ease;
}


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

.av-news-ticker__control:hover {

    color:
        var(--avnt-gold-light);

    background:
        var(--avnt-navy);
}


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

.av-news-ticker__control:focus-visible {

    outline:
        2px solid
        var(--avnt-blue);

    outline-offset:
        -3px;
}


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

.av-news-ticker:hover
.av-news-ticker__track {

    animation-play-state:
        paused;
}


/* ============================================================
   KEYBOARD FOCUS PAUSE
============================================================ */

.av-news-ticker:focus-within
.av-news-ticker__track {

    animation-play-state:
        paused;
}


/* ============================================================
   MANUAL PAUSE
============================================================ */

.av-news-ticker.is-paused
.av-news-ticker__track {

    animation-play-state:
        paused !important;
}


/* ============================================================
   STATIC MODE
============================================================ */

.av-news-ticker.is-static
.av-news-ticker__track {

    animation:
        none !important;

    transform:
        none !important;
}


.av-news-ticker.is-static
.av-news-ticker__control {

    display:
        none;
}


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

@keyframes avNewsTickerScroll {

    from {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    to {

        transform:
            translate3d(
                var(--avnt-distance),
                0,
                0
            );

    }

}


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

@media (
    max-width: 1199px
) {

    .av-news-ticker__headline {

        max-width:
            270px;
    }

}


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

@media (
    max-width: 991px
) {

    .av-news-ticker {

        height:
            62px;
    }


    .av-news-ticker__label {

        min-width:
            135px;

        padding:
            0 15px;

        gap:
            7px;
    }


    .av-news-ticker__label-icon {

        width:
            25px;

        height:
            25px;

        flex-basis:
            25px;
    }


    .av-news-ticker__thumb {

        width:
            39px;

        height:
            39px;

        flex-basis:
            39px;
    }


    .av-news-ticker__card {

        min-height:
            49px;

        padding:
            4px 11px
            4px 5px;
    }


    .av-news-ticker__headline {

        max-width:
            235px;

        font-size:
            11.8px;
    }


    .av-news-ticker__control {

        width:
            43px;

        flex-basis:
            43px;
    }

}


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

@media (
    max-width: 600px
) {

    .av-news-ticker {

        height:
            56px;

        box-shadow:
            0 3px 10px
            rgba(
                6,
                21,
                49,
                .06
            );
    }


    /* Compact label */

    .av-news-ticker__label {

        min-width:
            auto;

        padding:
            0 11px;

        gap:
            6px;
    }


    .av-news-ticker__label-text {

        font-size:
            0;
    }


    .av-news-ticker__label-text::after {

        content:
            "Updates";

        font-size:
            8.5px;

        font-weight:
            800;

        letter-spacing:
            .5px;
    }


    .av-news-ticker__label-icon {

        width:
            23px;

        height:
            23px;

        flex-basis:
            23px;

        font-size:
            8.5px;
    }


    .av-news-ticker__label::after {

        right:
            -8px;

        width:
            8px;
    }


    /* Viewport */

    .av-news-ticker__viewport {

        padding-left:
            10px;

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent,
                #000 17px,
                #000 calc(100% - 17px),
                transparent
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent,
                #000 17px,
                #000 calc(100% - 17px),
                transparent
            );
    }


    .av-news-ticker__group {

        gap:
            8px;
    }


    .av-news-ticker__group-gap {

        width:
            25px;

        flex-basis:
            25px;
    }


    /* Card */

    .av-news-ticker__card {

        min-height:
            46px;

        padding:
            4px 10px
            4px 4px;

        gap:
            8px;

        border-radius:
            8px;
    }


    /* Thumbnail */

    .av-news-ticker__thumb {

        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;

        border-radius:
            6px;
    }


    /* Text */

    .av-news-ticker__info {

        gap:
            3px;
    }


    .av-news-ticker__headline {

        max-width:
            205px;

        font-size:
            11px;

        line-height:
            1.3;
    }


    .av-news-ticker__category {

        font-size:
            7.5px;
    }


    /* Hide card arrow on mobile */

    .av-news-ticker__arrow {

        display:
            none;
    }


    /* Pause */

    .av-news-ticker__control {

        width:
            38px;

        flex-basis:
            38px;

        font-size:
            9px;
    }

}


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

@media (
    max-width: 420px
) {

    .av-news-ticker__label {

        padding:
            0 9px;
    }


    .av-news-ticker__headline {

        max-width:
            175px;
    }


    .av-news-ticker__thumb {

        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;
    }

}


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

@media (
    max-width: 360px
) {

    .av-news-ticker__headline {

        max-width:
            145px;
    }


    .av-news-ticker__control {

        width:
            34px;

        flex-basis:
            34px;
    }

}


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

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

    .av-news-ticker__track {

        animation:
            none !important;

        transform:
            none !important;
    }


    .av-news-ticker__viewport {

        overflow-x:
            auto;

        -webkit-mask-image:
            none;

        mask-image:
            none;
    }


    .av-news-ticker__control {

        display:
            none;
    }


    .av-news-ticker__card,
    .av-news-ticker__thumb img,
    .av-news-ticker__arrow {

        transition:
            none !important;
    }

}