@import "tailwindcss/theme";
@import "../variables/theme.css";

.carousel {
  @apply pointer-events-none opacity-0;
}

.carousel--init {
  @apply pointer-events-auto opacity-100;
}

.carousel-container {
  @apply overflow-hidden;

  height: var(--carousel-height, fit-content);
}

.carousel-scrollContainer {
  @apply snap-x snap-mandatory overflow-x-auto overflow-y-hidden;
}

.carousel-list {
  @apply flex items-start justify-start;

  gap: var(--container-margin);

  @variant md {
    gap: var(--container-margin-md);
  }

  @variant lg {
    gap: var(--container-margin-lg);
  }

  > * {
    @apply h-full w-full flex-none snap-start;
  }
}

.carousel-controlContainer {
  @apply hidden items-center justify-center;

  gap: var(--spacing-24);
  margin-top: var(--spacing-32);

  &:has(> *:not(:disabled)) {
    @apply flex;
  }
}