/* See ./l-slider.md for design notes and rationale. */
.l-slider {
  --l-slider-per-view: var(--l-slider-per-view-sm, 1);
  --l-slider-gap: var(--l-slider-gap-sm, var(--ll-space-6));
  --l-slider-peek-start: var(--l-slider-peek-start-sm, 0px);
  --l-slider-peek-end: var(--l-slider-peek-end-sm, 0px);
  --l-slider-pad-inline: var(--l-slider-pad-inline-sm, 0px);
  --l-slider-active-grow: var(--l-slider-active-grow-sm, 1);
  --l-slider-active-scale: var(--l-slider-active-scale-sm, 1);
  --l-slider-overflow-block: var(--l-slider-overflow-block-sm, var(--ll-space-2));
  --l-slider-arrow-offset: var(--l-slider-arrow-offset-sm, 0px);
  --l-slider-cols-total: var(--l-slider-cols-total-sm, var(--ll-grid-columns));
  --l-slider-span-active: var(--l-slider-span-active-sm, 1);
  --l-slider-span-inactive:
    var(--l-slider-span-inactive-sm,
      var(--l-slider-span-active-sm, 1));
  --l-slider-slide-aspect-active: var(--l-slider-slide-aspect-active-sm, auto);
  --l-slider-slide-aspect-inactive:
    var(--l-slider-slide-aspect-inactive-sm,
      var(--l-slider-slide-aspect-active-sm, auto));
  --l-slider-slide-basis: calc(
    (100% - var(--l-slider-peek-start) - var(--l-slider-peek-end)
          - var(--l-slider-gap) * (var(--l-slider-per-view) - 1))
    / var(--l-slider-per-view)
  );
  --l-slider-snap-align: start;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
}

@media (width >= 1024px) {
  .l-slider {
    gap: var(--ll-space-6);
  }
}

.l-slider__viewport {
  display: flex;
  flex-direction: row;
  gap: var(--l-slider-gap);
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline:
    calc(var(--l-slider-pad-inline) + var(--l-slider-peek-start))
    calc(var(--l-slider-pad-inline) + var(--l-slider-peek-end));
  scrollbar-width: none;

  /* Headroom for active-scale > 1 so scaled cards aren't clipped vertically. */
  padding-block: var(--l-slider-overflow-block);
  padding-inline: var(--l-slider-pad-inline);
}

.l-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* Suspend snap during pointer drag so drag-driven scrollLeft writes
   aren't yanked to the nearest snap point mid-gesture. */
.l-slider.is-dragging .l-slider__viewport {
  cursor: grabbing;
  scroll-snap-type: none;
}

.l-slider__slide {
  flex: 0 0 var(--l-slider-slide-basis);
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: var(--l-slider-snap-align);
  scroll-snap-stop: always;
  aspect-ratio: var(--l-slider-slide-aspect-inactive);
  transform-origin: center center;
}

.l-slider__slide.is-active {
  flex-basis: calc(var(--l-slider-slide-basis) * var(--l-slider-active-grow));
  aspect-ratio: var(--l-slider-slide-aspect-active);
  transform: scale(var(--l-slider-active-scale));
  position: relative;
  z-index: 1;
}

.l-slider[data-slider-sizing='span'] {
  --l-slider-col-track: calc(
    (100% - var(--l-slider-peek-start) - var(--l-slider-peek-end)
          - var(--l-slider-gap) * (var(--l-slider-cols-total) - 1))
    / var(--l-slider-cols-total)
  );
  --l-slider-slide-basis: calc(
    var(--l-slider-span-inactive) * var(--l-slider-col-track)
    + var(--l-slider-gap) * (var(--l-slider-span-inactive) - 1)
  );
}

.l-slider[data-slider-sizing='span'] .l-slider__slide.is-active {
  flex-basis: calc(
    var(--l-slider-span-active) * var(--l-slider-col-track)
    + var(--l-slider-gap) * (var(--l-slider-span-active) - 1)
  );
}

.l-slider__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "ctrl-start ctrl-center ctrl-end";
  align-items: center;
  gap: var(--ll-space-4);
}

.l-slider__dots {
  grid-area: ctrl-center;
  justify-self: center;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-slider__dot {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
  transition: width 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.l-slider__dot.is-active {
  width: 40px;
}

.l-slider__dot:focus-visible {
  outline: 2px solid var(--ll-color-border-focus, var(--ll-color-brand-secondary));
  outline-offset: 3px;
}

.l-slider__dot-fill {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--ll-radius-pill);
  background: var(--ll-color-border-default);
  position: relative;
  overflow: hidden;
  transition: width 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.l-slider__dot.is-active .l-slider__dot-fill {
  width: 24px;
}

.l-slider__dot-fill::before {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  width: 0;
  background: var(--ll-color-brand-secondary);
  pointer-events: none;
}

.l-slider__dot.is-active .l-slider__dot-fill::before {
  width: 100%;
}

.l-slider[data-slider-autoplay-running='true'] .l-slider__dot.is-active .l-slider__dot-fill::before {
  animation: l-slider-dot-fill var(--l-slider-autoplay-ms, 5000ms) linear forwards;
}

@keyframes l-slider-dot-fill {
  from { width: 100%; }
  to { width: 0; }
}

.l-slider__arrows {
  grid-area: ctrl-end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--ll-space-5);
}

.l-slider__arrow {
  appearance: none;
  background: transparent;
  color: var(--ll-color-text-primary);
  border: 1px solid var(--ll-color-border-on-brand);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

.l-slider__arrow:hover {
  background: var(--ll-color-bg-secondary);
}

.l-slider__arrow:focus-visible {
  outline: 2px solid var(--ll-color-border-focus, var(--ll-color-brand-secondary));
  outline-offset: 2px;
}

.l-slider__arrow:disabled,
.l-slider__arrow[aria-disabled='true'] {
  color: var(--ll-color-text-disabled);
  border-color: var(--ll-color-text-disabled);
  background: transparent;
  cursor: not-allowed;
}

.l-slider__arrow:disabled:hover,
.l-slider__arrow[aria-disabled='true']:hover {
  background: transparent;
}

.l-slider__arrow-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  mask: var(--l-slider-arrow-icon-url) center / contain no-repeat;
  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--l-slider-arrow-icon-url) center / contain no-repeat;
}

.l-slider__arrow-icon > img {
  display: none;
}

/* --- SM baseline categorical rules ------------------------------- */
.l-slider[data-slider-snap-sm='start'] { --l-slider-snap-align: start; }
.l-slider[data-slider-snap-sm='center'] { --l-slider-snap-align: center; }
.l-slider[data-slider-snap-sm='end'] { --l-slider-snap-align: end; }

.l-slider[data-slider-dots-sm='bar-start'] > .l-slider__controls > .l-slider__dots {
  grid-area: ctrl-start;
  justify-self: start;
}

.l-slider[data-slider-dots-sm='bar-center'] > .l-slider__controls > .l-slider__dots {
  grid-area: ctrl-center;
  justify-self: center;
}

.l-slider[data-slider-dots-sm='bar-end'] > .l-slider__controls > .l-slider__dots {
  grid-area: ctrl-end;
  justify-self: end;
}

.l-slider[data-slider-dots-sm='hidden'] > .l-slider__controls > .l-slider__dots {
  display: none;
}

.l-slider[data-slider-arrows-sm='bar-start'] > .l-slider__controls > .l-slider__arrows {
  grid-area: ctrl-start;
  justify-self: start;
  position: static;
}

.l-slider[data-slider-arrows-sm='bar-center'] > .l-slider__controls > .l-slider__arrows {
  grid-area: ctrl-center;
  justify-self: center;
  position: static;
}

.l-slider[data-slider-arrows-sm='bar-end'] > .l-slider__controls > .l-slider__arrows {
  grid-area: ctrl-end;
  justify-self: end;
  position: static;
}

.l-slider[data-slider-arrows-sm='hidden'] > .l-slider__controls > .l-slider__arrows {
  display: none;
}

.l-slider[data-slider-arrows-sm='overlay'] > .l-slider__controls > .l-slider__arrows {
  display: contents;
}

.l-slider[data-slider-arrows-sm='overlay'] .l-slider__arrow {
  position: absolute;
  top: calc(50% - 48px);
  z-index: 2;
  background: var(--ll-color-bg-default);
}

.l-slider[data-slider-arrows-sm='overlay'] .l-slider__arrow[data-action='prev'] {
  inset-inline-start: var(--l-slider-arrow-offset);
}

.l-slider[data-slider-arrows-sm='overlay'] .l-slider__arrow[data-action='next'] {
  inset-inline-end: var(--l-slider-arrow-offset);
}

/* --- MD ---------------------------------------------------------- */
@media (width >= 768px) {
  .l-slider {
    --l-slider-per-view: var(--l-slider-per-view-md, var(--l-slider-per-view-sm, 1));
    --l-slider-gap: var(--l-slider-gap-md, var(--l-slider-gap-sm, var(--ll-space-6)));
    --l-slider-peek-start: var(--l-slider-peek-start-md, var(--l-slider-peek-start-sm, 0px));
    --l-slider-peek-end: var(--l-slider-peek-end-md, var(--l-slider-peek-end-sm, 0px));
    --l-slider-pad-inline: var(--l-slider-pad-inline-md, var(--l-slider-pad-inline-sm, 0px));
    --l-slider-active-grow: var(--l-slider-active-grow-md, var(--l-slider-active-grow-sm, 1));
    --l-slider-active-scale: var(--l-slider-active-scale-md, var(--l-slider-active-scale-sm, 1));
    --l-slider-overflow-block: var(--l-slider-overflow-block-md, var(--l-slider-overflow-block-sm, var(--ll-space-2)));
    --l-slider-arrow-offset: var(--l-slider-arrow-offset-md, var(--l-slider-arrow-offset-sm, 0px));
    --l-slider-cols-total:
      var(--l-slider-cols-total-md,
        var(--l-slider-cols-total-sm, var(--ll-grid-columns)));
    --l-slider-span-active:
      var(--l-slider-span-active-md,
        var(--l-slider-span-active-sm, 1));
    --l-slider-span-inactive:
      var(--l-slider-span-inactive-md,
        var(--l-slider-span-inactive-sm,
          var(--l-slider-span-active-md,
            var(--l-slider-span-active-sm, 1))));
    --l-slider-slide-aspect-active:
      var(--l-slider-slide-aspect-active-md,
        var(--l-slider-slide-aspect-active-sm, auto));
    --l-slider-slide-aspect-inactive:
      var(--l-slider-slide-aspect-inactive-md,
        var(--l-slider-slide-aspect-inactive-sm,
          var(--l-slider-slide-aspect-active-md,
            var(--l-slider-slide-aspect-active-sm, auto))));
  }
  .l-slider[data-slider-snap-md='start'] { --l-slider-snap-align: start; }
  .l-slider[data-slider-snap-md='center'] { --l-slider-snap-align: center; }
  .l-slider[data-slider-snap-md='end'] { --l-slider-snap-align: end; }

  .l-slider[data-slider-dots-md='bar-start'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-start;
    justify-self: start;
  }

  .l-slider[data-slider-dots-md='bar-center'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-center;
    justify-self: center;
  }

  .l-slider[data-slider-dots-md='bar-end'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-end;
    justify-self: end;
  }

  .l-slider[data-slider-dots-md='hidden'] > .l-slider__controls > .l-slider__dots {
    display: none;
  }

  .l-slider[data-slider-arrows-md='bar-start'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-start;
    justify-self: start;
    position: static;
  }

  .l-slider[data-slider-arrows-md='bar-center'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-center;
    justify-self: center;
    position: static;
  }

  .l-slider[data-slider-arrows-md='bar-end'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-end;
    justify-self: end;
    position: static;
  }

  .l-slider[data-slider-arrows-md='hidden'] > .l-slider__controls > .l-slider__arrows {
    display: none;
  }

  .l-slider[data-slider-arrows-md='overlay'] > .l-slider__controls > .l-slider__arrows {
    display: contents;
  }

  .l-slider[data-slider-arrows-md='overlay'] .l-slider__arrow {
    position: absolute;
    top: calc(50% - 48px);
    z-index: 2;
    background: var(--ll-color-bg-default);
  }

  .l-slider[data-slider-arrows-md='overlay'] .l-slider__arrow[data-action='prev'] {
    inset-inline-start: var(--l-slider-arrow-offset);
  }

  .l-slider[data-slider-arrows-md='overlay'] .l-slider__arrow[data-action='next'] {
    inset-inline-end: var(--l-slider-arrow-offset);
  }
}

/* --- LG ---------------------------------------------------------- */
@media (width >= 1024px) {
  .l-slider {
    --l-slider-per-view:
      var(--l-slider-per-view-lg,
        var(--l-slider-per-view-md,
          var(--l-slider-per-view-sm, 1)));
    --l-slider-gap:
      var(--l-slider-gap-lg,
        var(--l-slider-gap-md,
          var(--l-slider-gap-sm, var(--ll-space-6))));
    --l-slider-peek-start:
      var(--l-slider-peek-start-lg,
        var(--l-slider-peek-start-md,
          var(--l-slider-peek-start-sm, 0px)));
    --l-slider-peek-end:
      var(--l-slider-peek-end-lg,
        var(--l-slider-peek-end-md,
          var(--l-slider-peek-end-sm, 0px)));
    --l-slider-pad-inline:
      var(--l-slider-pad-inline-lg,
        var(--l-slider-pad-inline-md,
          var(--l-slider-pad-inline-sm, 0px)));
    --l-slider-active-grow:
      var(--l-slider-active-grow-lg,
        var(--l-slider-active-grow-md,
          var(--l-slider-active-grow-sm, 1)));
    --l-slider-active-scale:
      var(--l-slider-active-scale-lg,
        var(--l-slider-active-scale-md,
          var(--l-slider-active-scale-sm, 1)));
    --l-slider-overflow-block:
      var(--l-slider-overflow-block-lg,
        var(--l-slider-overflow-block-md,
          var(--l-slider-overflow-block-sm, var(--ll-space-2))));
    --l-slider-arrow-offset:
      var(--l-slider-arrow-offset-lg,
        var(--l-slider-arrow-offset-md,
          var(--l-slider-arrow-offset-sm, 0px)));
    --l-slider-cols-total:
      var(--l-slider-cols-total-lg,
        var(--l-slider-cols-total-md,
          var(--l-slider-cols-total-sm, var(--ll-grid-columns))));
    --l-slider-span-active:
      var(--l-slider-span-active-lg,
        var(--l-slider-span-active-md,
          var(--l-slider-span-active-sm, 1)));
    --l-slider-span-inactive:
      var(--l-slider-span-inactive-lg,
        var(--l-slider-span-inactive-md,
          var(--l-slider-span-inactive-sm,
            var(--l-slider-span-active-lg,
              var(--l-slider-span-active-md,
                var(--l-slider-span-active-sm, 1))))));
    --l-slider-slide-aspect-active:
      var(--l-slider-slide-aspect-active-lg,
        var(--l-slider-slide-aspect-active-md,
          var(--l-slider-slide-aspect-active-sm, auto)));
    --l-slider-slide-aspect-inactive:
      var(--l-slider-slide-aspect-inactive-lg,
        var(--l-slider-slide-aspect-inactive-md,
          var(--l-slider-slide-aspect-inactive-sm,
            var(--l-slider-slide-aspect-active-lg,
              var(--l-slider-slide-aspect-active-md,
                var(--l-slider-slide-aspect-active-sm, auto))))));
  }
  .l-slider[data-slider-snap-lg='start'] { --l-slider-snap-align: start; }
  .l-slider[data-slider-snap-lg='center'] { --l-slider-snap-align: center; }
  .l-slider[data-slider-snap-lg='end'] { --l-slider-snap-align: end; }

  .l-slider[data-slider-dots-lg='bar-start'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-start;
    justify-self: start;
  }

  .l-slider[data-slider-dots-lg='bar-center'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-center;
    justify-self: center;
  }

  .l-slider[data-slider-dots-lg='bar-end'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-end;
    justify-self: end;
  }

  .l-slider[data-slider-dots-lg='hidden'] > .l-slider__controls > .l-slider__dots {
    display: none;
  }

  .l-slider[data-slider-arrows-lg='bar-start'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-start;
    justify-self: start;
    position: static;
  }

  .l-slider[data-slider-arrows-lg='bar-center'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-center;
    justify-self: center;
    position: static;
  }

  .l-slider[data-slider-arrows-lg='bar-end'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-end;
    justify-self: end;
    position: static;
  }

  .l-slider[data-slider-arrows-lg='hidden'] > .l-slider__controls > .l-slider__arrows {
    display: none;
  }

  .l-slider[data-slider-arrows-lg='overlay'] > .l-slider__controls > .l-slider__arrows {
    display: contents;
  }

  .l-slider[data-slider-arrows-lg='overlay'] .l-slider__arrow {
    position: absolute;
    top: calc(50% - 48px);
    z-index: 2;
    background: var(--ll-color-bg-default);
  }

  .l-slider[data-slider-arrows-lg='overlay'] .l-slider__arrow[data-action='prev'] {
    inset-inline-start: var(--l-slider-arrow-offset);
  }

  .l-slider[data-slider-arrows-lg='overlay'] .l-slider__arrow[data-action='next'] {
    inset-inline-end: var(--l-slider-arrow-offset);
  }
}

/* --- XL ---------------------------------------------------------- */
@media (width >= 1440px) {
  .l-slider {
    --l-slider-per-view:
      var(--l-slider-per-view-xl,
        var(--l-slider-per-view-lg,
          var(--l-slider-per-view-md,
            var(--l-slider-per-view-sm, 1))));
    --l-slider-gap:
      var(--l-slider-gap-xl,
        var(--l-slider-gap-lg,
          var(--l-slider-gap-md,
            var(--l-slider-gap-sm, var(--ll-space-6)))));
    --l-slider-peek-start:
      var(--l-slider-peek-start-xl,
        var(--l-slider-peek-start-lg,
          var(--l-slider-peek-start-md,
            var(--l-slider-peek-start-sm, 0px))));
    --l-slider-peek-end:
      var(--l-slider-peek-end-xl,
        var(--l-slider-peek-end-lg,
          var(--l-slider-peek-end-md,
            var(--l-slider-peek-end-sm, 0px))));
    --l-slider-pad-inline:
      var(--l-slider-pad-inline-xl,
        var(--l-slider-pad-inline-lg,
          var(--l-slider-pad-inline-md,
            var(--l-slider-pad-inline-sm, 0px))));
    --l-slider-active-grow:
      var(--l-slider-active-grow-xl,
        var(--l-slider-active-grow-lg,
          var(--l-slider-active-grow-md,
            var(--l-slider-active-grow-sm, 1))));
    --l-slider-active-scale:
      var(--l-slider-active-scale-xl,
        var(--l-slider-active-scale-lg,
          var(--l-slider-active-scale-md,
            var(--l-slider-active-scale-sm, 1))));
    --l-slider-overflow-block:
      var(--l-slider-overflow-block-xl,
        var(--l-slider-overflow-block-lg,
          var(--l-slider-overflow-block-md,
            var(--l-slider-overflow-block-sm, var(--ll-space-2)))));
    --l-slider-arrow-offset:
      var(--l-slider-arrow-offset-xl,
        var(--l-slider-arrow-offset-lg,
          var(--l-slider-arrow-offset-md,
            var(--l-slider-arrow-offset-sm, 0px))));
    --l-slider-cols-total:
      var(--l-slider-cols-total-xl,
        var(--l-slider-cols-total-lg,
          var(--l-slider-cols-total-md,
            var(--l-slider-cols-total-sm, var(--ll-grid-columns)))));
    --l-slider-span-active:
      var(--l-slider-span-active-xl,
        var(--l-slider-span-active-lg,
          var(--l-slider-span-active-md,
            var(--l-slider-span-active-sm, 1))));
    --l-slider-span-inactive:
      var(--l-slider-span-inactive-xl,
        var(--l-slider-span-inactive-lg,
          var(--l-slider-span-inactive-md,
            var(--l-slider-span-inactive-sm,
              var(--l-slider-span-active-xl,
                var(--l-slider-span-active-lg,
                  var(--l-slider-span-active-md,
                    var(--l-slider-span-active-sm, 1))))))));
    --l-slider-slide-aspect-active:
      var(--l-slider-slide-aspect-active-xl,
        var(--l-slider-slide-aspect-active-lg,
          var(--l-slider-slide-aspect-active-md,
            var(--l-slider-slide-aspect-active-sm, auto))));
    --l-slider-slide-aspect-inactive:
      var(--l-slider-slide-aspect-inactive-xl,
        var(--l-slider-slide-aspect-inactive-lg,
          var(--l-slider-slide-aspect-inactive-md,
            var(--l-slider-slide-aspect-inactive-sm,
              var(--l-slider-slide-aspect-active-xl,
                var(--l-slider-slide-aspect-active-lg,
                  var(--l-slider-slide-aspect-active-md,
                    var(--l-slider-slide-aspect-active-sm, auto))))))));
  }
  .l-slider[data-slider-snap-xl='start'] { --l-slider-snap-align: start; }
  .l-slider[data-slider-snap-xl='center'] { --l-slider-snap-align: center; }
  .l-slider[data-slider-snap-xl='end'] { --l-slider-snap-align: end; }

  .l-slider[data-slider-dots-xl='bar-start'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-start;
    justify-self: start;
  }

  .l-slider[data-slider-dots-xl='bar-center'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-center;
    justify-self: center;
  }

  .l-slider[data-slider-dots-xl='bar-end'] > .l-slider__controls > .l-slider__dots {
    grid-area: ctrl-end;
    justify-self: end;
  }

  .l-slider[data-slider-dots-xl='hidden'] > .l-slider__controls > .l-slider__dots {
    display: none;
  }

  .l-slider[data-slider-arrows-xl='bar-start'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-start;
    justify-self: start;
    position: static;
  }

  .l-slider[data-slider-arrows-xl='bar-center'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-center;
    justify-self: center;
    position: static;
  }

  .l-slider[data-slider-arrows-xl='bar-end'] > .l-slider__controls > .l-slider__arrows {
    grid-area: ctrl-end;
    justify-self: end;
    position: static;
  }

  .l-slider[data-slider-arrows-xl='hidden'] > .l-slider__controls > .l-slider__arrows {
    display: none;
  }

  .l-slider[data-slider-arrows-xl='overlay'] > .l-slider__controls > .l-slider__arrows {
    display: contents;
  }

  .l-slider[data-slider-arrows-xl='overlay'] .l-slider__arrow {
    position: absolute;
    top: calc(50% - 48px);
    z-index: 2;
    background: var(--ll-color-bg-default);
  }

  .l-slider[data-slider-arrows-xl='overlay'] .l-slider__arrow[data-action='prev'] {
    inset-inline-start: var(--l-slider-arrow-offset);
  }

  .l-slider[data-slider-arrows-xl='overlay'] .l-slider__arrow[data-action='next'] {
    inset-inline-end: var(--l-slider-arrow-offset);
  }
}

/* --- prefers-reduced-motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .l-slider__dot { transition: none; }
  .l-slider__dot.is-active .l-slider__dot-fill::before { animation: none; }
}