@use "./mixins";

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

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

    &__viewport {
      @include mixins.viewport;
    }

    &__track {
      @include mixins.track;
    }

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

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

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

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

    &__tabs {
      @include mixins.tabs-base;
    }

    &__tab {
      @include mixins.tab-base;
    }

    &__navigation {
      @include mixins.navigation-base;
    }

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

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

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

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