/* ==============================================
   Barres d'onglets sur mobile : defilement horizontal au doigt
   (classes listees aussi dans js/components/mobileTabs.js)
   Fondu a droite / a gauche seulement quand il reste des onglets caches
   ============================================== */

@media (max-width: 768px) {
    :is(.filter-tabs, .tabs, .selector-tabs, .detail-tabs, .shortlist-tabs, .requests-tabs, .player-detail-tabs, .notes-tabs, .form-tabs, .api-detail-tabs, .analysis-stack-tabs, .analysis-panel-tabs, .matches-tabs) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    :is(.filter-tabs, .tabs, .selector-tabs, .detail-tabs, .shortlist-tabs, .requests-tabs, .player-detail-tabs, .notes-tabs, .form-tabs, .api-detail-tabs, .analysis-stack-tabs, .analysis-panel-tabs, .matches-tabs)::-webkit-scrollbar {
        display: none;
    }

    :is(.filter-tabs, .tabs, .selector-tabs, .detail-tabs, .shortlist-tabs, .requests-tabs, .player-detail-tabs, .notes-tabs, .form-tabs, .api-detail-tabs, .analysis-stack-tabs, .analysis-panel-tabs, .matches-tabs) > * {
        flex: 0 0 auto !important;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    :is(.filter-tabs, .tabs, .selector-tabs, .detail-tabs, .shortlist-tabs, .requests-tabs, .player-detail-tabs, .notes-tabs, .form-tabs, .api-detail-tabs, .analysis-stack-tabs, .analysis-panel-tabs, .matches-tabs).tabs-more-right {
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }

    :is(.filter-tabs, .tabs, .selector-tabs, .detail-tabs, .shortlist-tabs, .requests-tabs, .player-detail-tabs, .notes-tabs, .form-tabs, .api-detail-tabs, .analysis-stack-tabs, .analysis-panel-tabs, .matches-tabs).tabs-more-left {
        -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
        mask-image: linear-gradient(to left, #000 85%, transparent);
    }

    :is(.filter-tabs, .tabs, .selector-tabs, .detail-tabs, .shortlist-tabs, .requests-tabs, .player-detail-tabs, .notes-tabs, .form-tabs, .api-detail-tabs, .analysis-stack-tabs, .analysis-panel-tabs, .matches-tabs).tabs-more-left.tabs-more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
}