/**
 * The scroll-snap track a slider is built on. What a component sets:
 *
 * --slider-slide      the width of one entry, and with it how much of the next one shows
 * --slider-gap        the distance between two entries
 * --slider-snap       which edge of an entry the track comes to rest on
 * --slider-edge       room before the first and after the last entry
 * --slider-step-size  the box the arrow glyph is drawn for
 * --slider-step-spent how far the arrow at either end fades
 */

.slider__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    /* An endless row puts copies of its entries at both ends and corrects the scroll position for
       them itself. Left on, the browser would correct the same insertion a second time. */
    overflow-anchor: none;

    /* Out of what the track rests against, or a snap point at the start of an entry scrolls the
       room before the first one away at once. */
    scroll-padding-inline: var(--slider-edge, 0);

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }

    /* Only where an entry carries no control of its own is the row itself what the keyboard reaches. */
    &[tabindex]:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* Without the arrows the scrollbar is the only sign left that the track scrolls, so it goes only
   where they are. */
.slider:has(.slider__controls:not([hidden])) .slider__viewport {
    scrollbar-width: none;

    /* Safari knows the property from 18.2 on. */
    @supports not (scrollbar-width: none) {
        &::-webkit-scrollbar {
            display: none;
        }
    }
}

.slider__track {
    display: flex;
    gap: var(--slider-gap, var(--sav-grid-gutter));
    margin: 0;
    padding-block: 0;
    padding-inline: var(--slider-edge, 0);
    list-style: none;
}

.slider__entry {
    flex: 0 0 var(--slider-slide, 100%);
    scroll-snap-align: var(--slider-snap, start);
}

/* The room a row keeps at its ends is for its first and last entry to reach the middle. An endless
   row has a copy standing there instead, and the room would be the gap beside it. The class is the
   script's, since a row is endless only once the copies are in. */
.slider--endless .slider__viewport {
    --slider-edge: 0px;
}

/* `display` beats the `hidden` attribute, and a component sets one. */
.slider__controls[hidden] {
    display: none;
}

.slider__step {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

    @media (prefers-reduced-motion: no-preference) {
        transition:
            color 0.2s,
            opacity 0.2s;
    }

    & .icon {
        inline-size: var(--slider-step-size, 2.1875rem);
        block-size: var(--slider-step-size, 2.1875rem);
    }

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* Flagged rather than disabled: `disabled` would drop the focus of whoever just pressed it. */
    &[aria-disabled='true'] {
        opacity: var(--slider-step-spent, 0.3);
        cursor: default;

        &:hover {
            color: var(--sav-color-dunkelblau);
        }
    }
}

/* The story brings the dials a component would set. */
.slider__story {
    --slider-gap: var(--sav-grid-gutter);
    --slider-slide: 100%;
}

.slider__story--cards {
    --slider-slide: 44%;
}

.slider__story--pictures {
    --slider-slide: 80%;
    --slider-snap: center;
}

/* One shape for every entry, so the story shows the row and not the fixtures. */
.slider__story-media {
    inline-size: 100%;
    border-radius: var(--sav-radius);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.slider__story-controls {
    display: flex;
    gap: 1.25rem;
    margin-block-start: 1rem;
}