:where(.no-js) .fs-block-slider__viewport {
  overflow-x: auto;
}

:where(.fs-block-slider) {
  --columns: 1;
  --viewport-padding: 0px; /* Must have unit to be used in calc() */
  --slide-gap: 0px; /* Must have unit to be used in calc() */
  --slide-transition-duration: var(--fs-blocks-duration);
  --slide-transition-ease: var(--fs-blocks-ease);

  /* Direction defaults (horizontal). Overridden responsively by get_inline_styles(). */
  --fs-slider-vp-overflow: clip;
  --fs-slider-flex-dir: row;
  --fs-slider-container-align: flex-start;
  --fs-slider-container-width: auto;
  --fs-slider-slide-width: auto;
  --fs-slider-slide-height: auto;
  --fs-slider-last-mr: var(--slide-gap);
  --fs-slider-last-mb: 0;
  --fs-slider-scroll-snap: x mandatory;
  --fs-slider-dots-w: 100%;
  --fs-slider-dots-gap: 15px;
  --fs-slider-dots-inset: auto 0px 15px;
  --fs-slider-dots-dir: row;
  --fs-slider-dots-align: normal;
  --fs-slider-dash-w: 40px;
  --fs-slider-dash-h: 4px;
}

.fs-block-slider {
  --fs-height: auto;
  --fs-direction: horizontal;
  --fs-slide-height: 30cqw;
  --fs-slide-width: calc((100% - (var(--slide-gap) * (var(--columns) - 1))) / var(--columns));

  position: relative;
  height: var(--fs-height);

  &.is-style-container,
  &.is-style-focus {
    --fs-slide-width: var(--wp--style--global--wide-size);

    .fs-block-slider__container {

      > * {
        transform: scale(var(--scale, 1));
        transform-origin: center;
        transition-property: transform, opacity;
        transition-duration: var(--slide-transition-duration);
        transition-timing-function: var(--slide-transition-ease);

        &.is-snapped {
          opacity: 1;
        }

        &:not(.is-snapped) {
          opacity: 0.5;
        }
      }
    }
  }

  &.is-style-focus {
    padding-block: var(--wp--preset--spacing--xl);

    .fs-block-slider__container {

      >*:not(.is-snapped) {
        --scale: 0.93;
      }
    }

    .fs-block-slider__dots {
      bottom: 8px;
    }
  }

  &:not(.is-initialized) {

    .fs-block-slider__viewport {
      overflow: auto;
      scrollbar-width: none;
      scroll-snap-type: var(--fs-slider-scroll-snap);
    }

    &.is-align-center .fs-block-slider__container {

      &::before,
      &::after {
        content: '';
        flex: 0 0 50cqi;
      }

      >* {
        scroll-snap-align: center;
      }
    }

    &.is-align-end .fs-block-slider__container {

      &::before {
        content: '';
        flex: 0 0 100cqi;
      }

      >* {
        scroll-snap-align: end;
      }
    }
  }
}

.fs-block-slider__viewport {
  position: relative;
  overflow-x: var(--fs-slider-vp-overflow);
  overflow-y: var(--fs-slider-vp-overflow, visible);
  height: var(--fs-height);
  border-radius: inherit;
  corner-shape: inherit;

  /* Adding negative margins for the date badge. */
  padding-inline: var(--viewport-padding);
  margin-inline: calc(-1 * var(--viewport-padding));

  > .fs-block-slider__container {
    flex-direction: var(--fs-slider-flex-dir);
    align-items: var(--fs-slider-container-align);
    width: var(--fs-slider-container-width);
  }

  &.is-draggable {
    cursor: grab;
    user-select: none;
  }

  &.is-dragging {
    cursor: grabbing;
  }
}

.fs-block-slider__container {
  display: flex;
  align-items: flex-start;
  container-type: inline-size;
  height: var(--fs-height);
  transition: height var(--fs-blocks-duration) var(--fs-blocks-ease);
  gap: var(--slide-gap);
  border-radius: inherit;
  corner-shape: inherit;

  > * {
    --fs-height: initial;

    position: relative;
    flex: 0 0 var(--fs-slider-slide-flex, 100%);
    width: var(--fs-slider-slide-width);
    height: var(--fs-slider-slide-height);
    margin-inline: 0;
    min-width: 0;
    max-height: 100%;

    &:where(:last-child) {
      /* Embla Carousel use the last element margin to measure the gaps. */
      margin-inline-end: var(--fs-slider-last-mr);
      margin-bottom: var(--fs-slider-last-mb);
    }

    &.alignwide {
      max-width: var(--wp--style--global--wide-size);
    }

    &.alignfull {
      max-width: 100%;
    }

    &.fs-block-banner {
      height: var(--fs-slide-height, 100%);
    }
  }

  > *:where(:not(.alignwide):not(.alignfull)) {
    flex: 0 0 var(--fs-slider-slide-flex, clamp(0px, var(--fs-slide-width, 100%), 100%));
  }
}

.fs-block-slider__button-icon {
  padding: 20%;
  fill: currentcolor;
  transition: transform, opacity;
  transition-duration: var(--fs-blocks-duration);
  transition-timing-function: var(--fs-blocks-ease);
}

.fs-block-slider__button {
  --size: 36px;
  --margin: 2%;
  --translate: 0%;

  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  padding: 0;
  opacity: 0.7;
  border: none;
  z-index: 10;
  background-color: transparent;
  color: var(--fs-blocks-color-white);
  pointer-events: auto;
  transition: transform, opacity, color, background-color, border-color;
  transition-duration: var(--fs-blocks-duration);
  transition-timing-function: var(--fs-blocks-ease);

  &:where(:disabled) {
    opacity: 0.4;
  }

  &:hover:not(:disabled) {
    opacity: 1;
  }

  &.is-outside {
    --margin: calc(calc(var(--size) * -1) - 10px);
    color: currentcolor;
  }

  &.is-style-circle {
    border-width: max(2px, calc(var(--size) * 0.055));
    border-style: solid;
    border-color: currentcolor;
    border-radius: 100%;
  }

  &.is-style-simple {

    &:hover:not(:disabled) {
      color: var(--fs-blocks-color-primary);
    }
  }

  &.is-style-reveal {
    --margin: calc(calc(var(--viewport-padding) * -1) - 1px);

    color: currentcolor;
    background: var(--fs-blocks-color-background);
    transform: none;

    &:hover {
      opacity: 1;
    }
  }
}

.fs-block-slider__dots {
  position: absolute;
  display: flex;
  inset: var(--fs-slider-dots-inset);
  color: var(--fs-blocks-color-white);
  width: var(--fs-slider-dots-w);
  flex-direction: var(--fs-slider-dots-dir);
  align-items: var(--fs-slider-dots-align);
  gap: var(--fs-slider-dots-gap);
  justify-content: center;
  pointer-events: none;

  &:where(.is-style-circle),
  &:where(.is-style-simple),
  &:where(.is-style-square) {

    .fs-block-slider__dot {
      width: 12px;
      height: 12px;
    }
  }

  &:where(.is-style-circle),
  &:where(.is-style-simple) {

    .fs-block-slider__dot {
      border-radius: 100%;
    }
  }

  &:where(.is-style-dashes) {

    .fs-block-slider__dot {
      border-color: currentcolor;
      width: var(--fs-slider-dash-w);
      height: var(--fs-slider-dash-h);
    }
  }

  &:where(.is-style-simple) {

    .fs-block-slider__dot {
      background-color: currentcolor;
    }
  }
}

.fs-block-slider__dot {
  display: block;
  opacity: 0.4;
  padding: 0;
  color: currentcolor;
  border: 3px solid currentcolor;
  background-color: transparent;
  transition: opacity var(--fs-blocks-duration) var(--fs-blocks-ease);
  pointer-events: auto;

  &:hover {
    opacity: 0.7;
  }

  &.is-selected {
    opacity: 1;
    background-color: currentcolor;
  }
}

:where(.fs-block-slider.has-arrows-hover) {

  .fs-block-slider__button {
    --translate: 20%;
    opacity: 0;
  }

  &:hover {

    .fs-block-slider__button {
      --translate: 0%;
      opacity: 0.7;

      &:disabled {
        opacity: 0.4;
      }
    }
  }
}

:where(.fs-block-slider.has-dots-hover) {

  .fs-block-slider__dots {
    opacity: 0;
    transition: opacity var(--fs-blocks-duration) var(--fs-blocks-ease);
  }

  &:hover {

    .fs-block-slider__dots {
      opacity: 1;
    }
  }
}

.fs-carousel {
  --fs-columns: 4;
  --fs-gap: var(--wp--preset--spacing--base);

  :where(.fs-block-slider) {
    --columns: var(--fs-columns);
    --slide-gap: var(--fs-gap);
  }

  :where(.fs-block-slider.has-dots-normal) {
    padding-bottom: 42px;
  }

  :where(.fs-block-slider__dots) {
    color: currentcolor;
  }
}

@keyframes fs-slide-loop-enter {

  from {
    opacity: 0;
  }
}