@use "./mixins";
@use "../../../styles/tools/convert";

@layer components {
  .carousel {
    @include mixins.base;

    &--scrollbar {
      @include mixins.scrollbar-variant;
    }

    &--bleed-right {
      @include mixins.bleed-right-variant;
    }

    .container > & {
      @include mixins.base-breakout-buttons;
    }

    &__viewport-wrapper {
      @include mixins.viewport-wrapper;
    }

    &__viewport {
      @include mixins.viewport;
    }

    &__track {
      @include mixins.track;
    }

    &__slide {
      @include mixins.slide-base;
    }

    &__prev,
    &__next {
      @include mixins.button-base;

      &.is-disabled {
        @include mixins.button-disabled;
      }
    }

    &__prev {
      @include mixins.button-prev;
    }

    &__next {
      @include mixins.button-next;
    }

    &__pagination {
      @include mixins.pagination;
    }

    &__pagination-item {
      @include mixins.pagination-item;
    }

    &__scrollbar {
      @include mixins.scrollbar-base;
    }

    &__scrollbar-horizontal {
      @include mixins.scrollbar-horizontal;
    }

    &__scrollbar-drag {
      @include mixins.scrollbar-drag;
    }
  }
}
