// import all css on anuglar.json
// https://swiperjs.com/angular
@use 'mixins/amixin' as *;

.swiper-slide {
  overflow: hidden;
}

.swiper-container {
  --swiper-navigation-color: var(--mat-sys-primary);
  --swiper-theme-color: var(--mat-sys-primary);
  .swiper-pagination-bullet-active {
    background-color: var(--mat-sys-primary);
  }
  .swiper-button-next,
  .swiper-button-prev {
    color: var(--mat-sys-on-primary);
    background-color: var(--mat-sys-inverse-primary);
    border-radius: 50%;
    padding: 6px;
  }
  &.full-screen {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    ::ng-deep {
      > .swiper-wrapper {
        > .swiper-slide {
          > * {
            @include middle-center();
            width: 100%;
          }
        }
      }
      > .swiper-button-prev,
      > .swiper-button-next {
        left: 50%;
        top: auto;
        right: auto;
        bottom: 20px;
        transform: translateX(-50%) rotate(270deg);
      }
      > .swiper-button-next {
        display: none;
      }
    }
  }
}
