@layer components {
  .carousel-button {
    @apply px-25 md:px-15 flex items-center cursor-pointer pointer-events-auto relative overflow-hidden;

    @screen md {
      &:before {
        @apply content-empty absolute top-0 bottom-0;
        @apply from-body/40 to-body/0;
        @apply transition ease-swing duration-300 will-change-[transform,opacity];
        @apply opacity-0;
      }
      &:hover:before {
        @apply opacity-100;
      }

      &:first-child:before {
        @apply -left-1 right-0;
        @apply bg-gradient-to-r -translate-x-30 hover:!translate-x-0;
      }

      &:last-child:before {
        @apply left-0 -right-1;
        @apply bg-gradient-to-l translate-x-30 hover:!translate-x-0;
      }
    }
  }

  .carousel.is-dragging {
    @apply touch-none;
  }

  .carousel__track {
    @apply flex relative p-0;
  }

  .carousel__viewport {
    @apply overflow-hidden;
  }

  .carousel__sr-only {
    @apply sr-only;
  }

  .carousel__slide {
    @apply snap-always flex-shrink-0 m-0 relative flex justify-center items-start;
    @apply px-15 md:px-0;

    /* Fix iOS scrolling #22 */
    transform: translateZ(0);
  }

  /* Fake a gap between slides. */
  .carousel__slide--prev {
    @apply md:-translate-x-15;
  }
  .carousel__slide--next {
    @apply md:translate-x-15;
  }

  @media print {
    .carousel__track {
      @apply flex-wrap !transform-none;
    }

    .carousel__slide {
      @apply !w-[50%] !h-auto !items-start;
    }

    .carousel__container__nav__bar {
      @apply hidden;
    }

    .carousel__image-slide {
      @apply !h-auto p-20;
    }
  }
}