:host {
  --swirl-carousel-spacing: var(--s-space-16);
  --swirl-carousel-fade-color: var(--s-background-default);

  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}

  :host(:hover) .carousel__previous-slide-button,
    :host(:hover) .carousel__next-slide-button {
      pointer-events: auto;
    }

  :host * {
    box-sizing: border-box;
  }

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel:before,
  .carousel:after {
    position: absolute;
    z-index: 1;
    top: 0;
    width: var(--s-space-32);
    height: 100%;
    content: "";
    transition: opacity 0.2s;
    pointer-events: none;
    opacity: 0;
  }

.carousel:before {
    left: 0;
    background: linear-gradient(
      90deg,
      var(--swirl-carousel-fade-color) 0%,
      transparent 100%
    );
  }

.carousel:after {
    right: 0;
    background: linear-gradient(
      270deg,
      var(--swirl-carousel-fade-color) 0%,
      transparent 100%
    );
  }

.carousel--fade:before,
  .carousel--fade:after {
    opacity: 1;
  }

.carousel--is-at-start:before,
.carousel--is-at-end:after {
  opacity: 0;
}

.carousel__slides {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel__slides::-webkit-scrollbar {
    display: none;
  }

.carousel__slides ::slotted(*:not(:first-of-type)) {
    margin-left: var(--swirl-carousel-spacing);
  }

.carousel__slides ::slotted(*) {
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

.carousel__previous-slide-button,
.carousel__next-slide-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%) scale(0.72);
  pointer-events: none;
}

.carousel__previous-slide-button {
  left: var(--s-space-4);
}

.carousel__next-slide-button {
  right: var(--s-space-4);
}