@layer components {
  .rs-carousel {
    --rs-carousel-gap: var(--rs-unit-x4);
    --rs-carousel-items: 1;
    --rs-carousel-bleed: 0;
    position: relative;
    isolation: isolate;
    inline-size: 100%;
  }

  .rs-carousel[data-items="2"] {
    --rs-carousel-items: 2;
  }

  .rs-carousel[data-items="3"] {
    --rs-carousel-items: 3;
  }

  .rs-carousel[data-gap="small"] {
    --rs-carousel-gap: var(--rs-unit-x2);
  }

  .rs-carousel[data-gap="large"] {
    --rs-carousel-gap: var(--rs-unit-x6);
  }

  .rs-carousel[data-bleed="4"] {
    --rs-carousel-bleed: 4;
  }

  .rs-carousel__scroll {
    display: flex;
    gap: var(--rs-carousel-gap);
    margin: 0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);
    padding: 0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed))
      var(--rs-unit-x2);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));
    scrollbar-width: none;
    list-style: none;
  }

  .rs-carousel[data-fade] .rs-carousel__scroll {
    --rs-scroll-fade-end: 1;
    mask-image:
      linear-gradient(to right, white, white),
      linear-gradient(
        to right,
        white,
        transparent calc(var(--rs-scroll-fade-start, 0) * var(--rs-scroll-fade-size)),
        transparent calc(100% - var(--rs-scroll-fade-end, 0) * var(--rs-scroll-fade-size)),
        white
      );
    mask-composite: exclude;
    mask-position: center, left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, 100% 100%;
  }

  @supports (animation-timeline: scroll()) {
    .rs-carousel[data-fade] .rs-carousel__scroll {
      animation-name: rs-scroll-fade-start, rs-scroll-fade-end;
      animation-timing-function: linear, linear;
      animation-timeline: scroll(self x);
      animation-range:
        0 var(--rs-scroll-fade-range),
        calc(100% - var(--rs-scroll-fade-range)) 100%;
      animation-fill-mode: both;
    }
  }

  .rs-carousel__scroll:focus-visible {
    outline: 0;
    box-shadow: var(--rs-shadow-focus);
  }

  .rs-carousel__scroll::-webkit-scrollbar {
    display: none;
  }

  .rs-carousel__item {
    flex: 0 0
      max(
        14rem,
        calc(
          (100% - var(--rs-carousel-gap) * (var(--rs-carousel-items) - 1)) /
            var(--rs-carousel-items)
        )
      );
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .rs-carousel__controls {
    position: absolute;
    z-index: var(--rs-z-index-relative);
    inset-block-start: 50%;
    inset-inline: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .rs-carousel__control {
    pointer-events: auto;
    box-shadow: var(--rs-shadow-raised);
  }

  .rs-carousel__pagination {
    display: flex;
    justify-content: center;
    gap: var(--rs-unit-x2);
    margin-block-start: var(--rs-unit-x3);
  }

  .rs-carousel__dot {
    display: block;
    inline-size: var(--rs-unit-x2);
    block-size: var(--rs-unit-x2);
    border-radius: var(--rs-radius-circular);
    background: var(--rs-color-border-neutral);
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      transform var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-carousel__dot[aria-current="true"] {
    background: var(--rs-color-background-primary);
    transform: scale(1.25);
  }
}