/* Horizontal scroll rails
   -----------------------
   The game nav and the account tabs are wider than a phone. They were already
   `overflow-x: auto`, so they technically scrolled — but nothing on screen said
   so, the active tab could sit entirely off the right edge, and scroll snapping
   sprang short flicks back to where they started. On a phone that reads as "the
   bar is broken", which is exactly what it was reported as.

   This file is loaded last so it wins over the `scroll-snap-type` those bars
   declare in mobile.css / mobile_account.css at equal specificity.

   `.is-rail` is added by scroll_rails.js. Without JavaScript the bars keep the
   plain overflow scrolling they have always had — the fade would otherwise be
   painted with no way to know whether there is anything past it. */

.is-rail {
    /* How far the edge fade reaches. Wide enough to clip a letter or two of the
       next label, which is the part that actually says "keep going". */
    --rail-fade: 30px;

    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;

    /* A flick must not spring back to the item it started on. Snapping is for
       carousels of full-width panels, not for a row of five-word labels. */
    scroll-snap-type: none;

    /* Keeps a horizontal drag inside the rail instead of handing it to the
       browser's back-swipe once the rail reaches its end. */
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;

    /* The fade is the affordance; a scrollbar on top of it is noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.is-rail::-webkit-scrollbar { display: none; }

/* Rail items are sized by their own content, never squeezed to fit. A shrunk
   label is how a rail ends up not overflowing — and so not scrolling — while
   still being unreadable. */
.is-rail > * {
    flex: 0 0 auto;
    scroll-snap-align: none;
    white-space: nowrap;
}

/* Only ever masked on the side that has something hidden behind it, so a rail
   whose contents fit (every desktop width, usually) is left completely alone. */
.is-rail[data-rail="start"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--rail-fade));
            mask-image: linear-gradient(to right, transparent 0, #000 var(--rail-fade));
}

.is-rail[data-rail="end"] {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--rail-fade));
            mask-image: linear-gradient(to left, transparent 0, #000 var(--rail-fade));
}

.is-rail[data-rail="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--rail-fade),
                                        #000 calc(100% - var(--rail-fade)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--rail-fade),
                                        #000 calc(100% - var(--rail-fade)), transparent 100%);
}

/* Grab-to-scroll, mouse only. Touch already has a finger. */
@media (pointer: fine) {
    .is-rail[data-rail]:not([data-rail="none"]) { cursor: grab; }
    .is-rail.is-dragging { cursor: grabbing; }
    /* Text selection while dragging turns the whole rail blue. */
    .is-rail.is-dragging,
    .is-rail.is-dragging > * { user-select: none; }
}

@media (prefers-reduced-motion: reduce) {
    .is-rail { scroll-behavior: auto !important; }
}