/* Progressive CSS kept off the Vite/Tailwind Lightning CSS pipeline.
   Lightning CSS does not parse ::scroll-button() or ::highlight() yet. */

@media (max-width: 767px) {
    @supports selector(::scroll-button(inline-end)) {
        .tag-filter--scroll {
            mask-image: none;
        }

        .tag-filter--scroll::scroll-button(inline-start),
        .tag-filter--scroll::scroll-button(inline-end) {
            flex-shrink: 0;
            inline-size: 2.25rem;
            block-size: 2.25rem;
            margin: 0;
            border: 1px solid var(--border);
            border-radius: 9999px;
            background: color-mix(in oklab, var(--bg) 88%, var(--panel));
            color: var(--accent);
            font-family: var(--font-mono);
            font-size: 0.75rem;
            line-height: 1;
            cursor: pointer;
        }

        .tag-filter--scroll::scroll-button(inline-start) {
            content: '←';
        }

        .tag-filter--scroll::scroll-button(inline-end) {
            content: '→';
        }

        .tag-filter--scroll::scroll-button(inline-start):hover,
        .tag-filter--scroll::scroll-button(inline-end):hover {
            border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
        }

        .tag-filter--scroll::scroll-button(inline-start):disabled,
        .tag-filter--scroll::scroll-button(inline-end):disabled {
            opacity: 0.35;
            cursor: default;
        }
    }
}

::highlight(search) {
    background-color: color-mix(in oklab, var(--accent) 42%, transparent);
    color: var(--text);
}