@layer components {

    .trending-bar {
        position: relative;
        z-index: 40;
        padding-block-end: 2px;
        border-block-end: var(--border-width-hairline) solid color-mix(in oklch, var(--color-border) 78%, transparent);
        background: color-mix(in oklch, var(--color-bg-surface) 90%, var(--color-bg));
        box-shadow: inset 0 var(--border-width-hairline) 0 color-mix(in oklch, var(--color-brand-primary) 22%, transparent);
    }

    .trending-bar__inner {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-14);
        height: 2.5rem;
        min-height: 2.5rem;
        overflow: hidden;
    }

    .trending-bar__inner::after {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        width: 2rem;
        background: linear-gradient(to right, transparent, color-mix(in oklch, var(--color-bg-surface) 90%, var(--color-bg)) 82%);
        pointer-events: none;
    }

    .trending-bar__label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        flex: 0 0 auto;
        height: 100%;
        min-height: 0;
        color: var(--color-text-strong);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: 1;
        transform: translateY(-1px);
    }

    .trending-bar__viewport {
        display: flex;
        align-items: center;
        align-self: stretch;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .trending-bar__viewport::-webkit-scrollbar {
        display: none;
    }

    .trending-bar__list {
        display: flex;
        align-items: center;
        align-self: stretch;
        flex: 0 0 auto;
        min-height: 100%;
        margin: 0;
        padding: 0 var(--space-32) 0 0;
        list-style: none;
    }

    .trending-bar__item {
        position: relative;
        display: flex;
        align-items: center;
        align-self: stretch;
        flex: 0 0 auto;
        width: max-content;
        min-width: 0;
        max-width: min(28rem, 72vw);
        overflow: hidden;
    }

    .trending-bar__item + .trending-bar__item {
        margin-inline-start: var(--space-14);
        padding-inline-start: var(--space-14);
    }

    .trending-bar__item + .trending-bar__item::before {
        content: '';
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 0;
        width: var(--border-width-hairline);
        height: 1.125rem;
        background: color-mix(in oklch, var(--color-border) 72%, transparent);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .trending-bar__link {
        display: inline-flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 100%;
        overflow: hidden;
        padding-block: 0;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        line-height: 1;
        text-decoration: none;
        transform: translateY(-0.015em);
        transition: color .18s ease;
    }

    .trending-bar__link:hover,
    .trending-bar__link:focus-visible {
        outline: none;
        color: var(--color-text-strong);
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .trending-bar__text {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :root[data-theme="dark"] .trending-bar {
        background: color-mix(in oklch, var(--color-bg-surface) 82%, var(--color-bg));
        border-block-end-color: color-mix(in oklch, var(--color-border) 58%, transparent);
        box-shadow: inset 0 var(--border-width-hairline) 0 color-mix(in oklch, var(--color-brand-primary) 18%, transparent);
    }

    :root[data-theme="dark"] .trending-bar__inner::after {
        background: linear-gradient(to right, transparent, color-mix(in oklch, var(--color-bg-surface) 82%, var(--color-bg)) 82%);
    }

    @media (max-width: 44rem) {
        .trending-bar__inner {
            gap: var(--space-10);
            height: 2.25rem;
            min-height: 2.25rem;
        }

        .trending-bar__label {
            font-size: var(--text-xs);
        }

        .trending-bar__viewport {
            scroll-padding-inline: var(--space-10);
            scroll-snap-type: x proximity;
        }

        .trending-bar__item {
            width: max-content;
            max-width: none;
            scroll-snap-align: start;
        }

        .trending-bar__list {
            padding-inline-end: var(--space-24);
        }

        .trending-bar__link {
            width: auto;
        }

        .trending-bar__text {
            max-width: none;
            overflow: visible;
            text-overflow: clip;
        }

        .trending-bar__item + .trending-bar__item {
            margin-inline-start: var(--space-10);
            padding-inline-start: var(--space-10);
        }

        .trending-bar__link {
            min-height: 100%;
            padding-block: 0;
            font-size: var(--text-xs);
        }
    }
}