/* =========================================================
   CUBE AROMA — ANNOUNCEMENT BAR
   ========================================================= */

.cube-announcement-bar {

    --cube-announcement-speed: 30s;

    position: relative;

    width: 100%;

    height: 38px;

    overflow: hidden;

    background: #4D4C50;

    color: #F8F1E8;

    font-family:
        "Cairo",
        Arial,
        sans-serif;

    z-index: 100;
}


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

.cube-announcement-link {

    display: block;

    width: 100%;
    height: 100%;

    color: inherit !important;

    text-decoration: none !important;
}


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

.cube-announcement-viewport {

    width: 100%;
    height: 100%;

    overflow: hidden;
}


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

.cube-announcement-track {

    display: flex;

    width: max-content;
    height: 100%;

    align-items: center;

    animation:
        cube-announcement-scroll
        var(--cube-announcement-speed)
        linear
        infinite;

    will-change: transform;
}


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

.cube-announcement-group {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    white-space: nowrap;
}


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

.cube-announcement-item {

    display: inline-flex;

    align-items: center;

    padding:
        0
        24px;

    color: #F8F1E8 !important;

    font-size: 11px;

    font-weight: 500;

    line-height: 38px;

    white-space: nowrap;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.cube-announcement-separator {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #F8F1E8 !important;

    font-size: 9px;

    opacity: 0.65;
}


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

.cube-announcement-bar:hover
.cube-announcement-track {

    animation-play-state: paused;
}


/* =========================================================
   MOVEMENT
   ========================================================= */

@keyframes cube-announcement-scroll {

    from {
        transform:
            translateX(0);
    }

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


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

@media (max-width: 767px) {

    .cube-announcement-bar {

        height: 34px;
    }


    .cube-announcement-item {

        padding:
            0
            18px;

        font-size: 10px;

        line-height: 34px;
    }

}


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

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

    .cube-announcement-track {
        animation: none;
    }

}