/*
 * The gun row's scroll.
 *
 * css/deepspace.css builds the strip: the fixed row, the chips, the carets and
 * the colours. This is the scroll on top of it, split out for one reason: the
 * row scrolled badly, and every cause was a scroll property rather than a
 * look. It loads after deepspace.css so these rules win on equal specificity,
 * and js/guns-strip.js is the matching module.
 *
 * Three things were wrong on screen.
 *
 * 1. scroll-behavior: smooth was set on the track itself, so EVERY assignment
 *    to scrollLeft started an animation, including the ones that only put the
 *    row back where it already was after a rebuild. A read taken on the next
 *    frame then answered where the row started rather than where it was going,
 *    which is what made a caret press move the row 120 pixels and stop. The
 *    property is auto here; the one move that should glide is asked for
 *    explicitly with scrollTo in the module.
 *
 * 2. A chip was cut in half at both ends of the row, mid-word, with nothing
 *    saying why. The module now steps by whole chips and rests on a chip
 *    boundary, and the mask below fades the last few pixels at each end so
 *    what is still cut reads as more of the row rather than as a broken chip.
 *
 * 3. The carets sat at the very edge of the frame with the fade under them.
 *    They keep their own slot outside the mask, so the chevron is never the
 *    thing being faded out.
 */

.pp-guns .pp-gun-track {
    /* Every scrollLeft assignment lands at once. See note 1 above. */
    scroll-behavior: auto;
    /* Chip edges, not pixel edges: the module snaps, and this is the fade that
       makes the far end of the row read as continuing. */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 1) 22px, rgba(0, 0, 0, 1) calc(100% - 22px),
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 1) 22px, rgba(0, 0, 0, 1) calc(100% - 22px),
        rgba(0, 0, 0, 0) 100%);
    /* A wheel or a drag over the row is horizontal, whatever the axis it
       arrived on, and it never becomes a page scroll. */
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

/* No fade at an end that has nothing behind it, so a row that fits is drawn
   whole. The module writes these two classes from the same test the carets
   use, so the fade and the chevron always agree. */
.pp-guns .pp-gun-track.pp-track-start {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) calc(100% - 22px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) calc(100% - 22px), rgba(0, 0, 0, 0) 100%);
}

.pp-guns .pp-gun-track.pp-track-end {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 1) 22px, rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 1) 22px, rgba(0, 0, 0, 1) 100%);
}

.pp-guns .pp-gun-track.pp-track-start.pp-track-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/*
 * A caret that has nothing behind it is dimmed rather than hidden. Hidden, the
 * row had two blank 26 pixel gaps at its ends and the player had no way to
 * know they were controls at all until one appeared; dimmed, the pair is
 * always the same two buttons and only their state changes.
 */
.pp-guns .pp-gun-caret {
    visibility: visible;
    opacity: 0.24;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.pp-guns .pp-gun-caret.pp-caret-on {
    opacity: 1;
    pointer-events: auto;
}