/* =========================================================
   Ken Brown · Top Bar
   ========================================================= */

.kb-topbar {
    --kb-topbar-bg: #26233d;
    background-color: var(--kb-topbar-bg);
    color: #fff;
}

.kb-topbar__marquee {
    position: relative;
    overflow: hidden;
    line-height: 1;
}

.kb-topbar__inner {
    display: inline-flex;
    align-items: center;
    min-width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: kb-topbar-scroll var(--speed,22s) linear infinite;
}

.kb-topbar__text {
    display: inline-block;
    padding: .35rem 2rem .4rem;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .01em;
}

.kb-topbar__inner::after {
    content: attr(data-text);
    display: inline-block;
    padding: .35rem 2rem .4rem;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .01em;
}

.kb-topbar__marquee::before,
.kb-topbar__marquee::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 2;
    width: 28px;
    height: 100%;
    pointer-events: none;
}

.kb-topbar__marquee::before {
    left: 0;
    background: linear-gradient(to right,var(--kb-topbar-bg) 40%,rgba(38,35,61,0));
}

.kb-topbar__marquee::after {
    right: 0;
    background: linear-gradient(to left,var(--kb-topbar-bg) 40%,rgba(38,35,61,0));
}

@keyframes kb-topbar-scroll {
    from {
        transform: translateX(0);
    }

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

@media (max-width: 767.98px) {

    .kb-topbar__text,
    .kb-topbar__inner::after {
        padding-top: .4rem;
        padding-bottom: .45rem;
        font-size: .72rem;
    }
}