@property --dashboard-pill-rail-left-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@property --dashboard-pill-rail-right-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@keyframes dashboard-pill-rail-scrollfade {
    0% {
        --dashboard-pill-rail-left-fade: 0;
        --dashboard-pill-rail-right-fade: 1rem;
    }

    10%,
    90% {
        --dashboard-pill-rail-left-fade: 1rem;
        --dashboard-pill-rail-right-fade: 1rem;
    }

    100% {
        --dashboard-pill-rail-left-fade: 1rem;
        --dashboard-pill-rail-right-fade: 0;
    }
}

@layer components {
    .dashboard-pill-rail {
            min-width: 0;
            overflow: hidden;
            width: 100%;
        }

    .dashboard-pill-rail__list {
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-wrap: nowrap;
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            touch-action: pan-x;
            width: 100%;
        }

    @supports (animation-timeline: scroll()) {
        .dashboard-pill-rail__list {
                    animation: dashboard-pill-rail-scrollfade linear forwards;
                    animation-timeline: --dashboard-pill-rail;
                    mask-image: linear-gradient(
                        to right,
                        #0000,
                        #000 var(--dashboard-pill-rail-left-fade) calc(100% - var(--dashboard-pill-rail-right-fade)),
                        #0000
                    );
                    scroll-timeline: --dashboard-pill-rail inline;
                }
    }

    .dashboard-pill-rail__list::-webkit-scrollbar {
            display: none;
        }

    .dashboard-pill-rail__list.segmented-control {
            display: flex;
        }

    .dashboard-pill-rail--bordered {
            border-bottom: 1px solid var(--dashboard-color-border);
        }

    .dashboard-pill-rail--section-tabs {
            padding: 0.875rem var(--dashboard-section-padding-x) 0.875rem var(--dashboard-pill-rail-padding-x);
        }

    @media (min-width: 48rem) {
        .dashboard-pill-rail--section-tabs {
                    padding-left: var(--dashboard-pill-rail-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }
}