@use "../../themes/ionic/ionic.globals.scss" as globals;

// Slides
// --------------------------------------------------

.swiper {
  --bullet-background: #{globals.$ion-primitives-neutral-800};
  --bullet-background-active: #{globals.$ion-semantics-primary-base};
  --progress-bar-background: #{globals.$ion-bg-neutral-boldest-default-rgb};
  --progress-bar-background-active: #{globals.$ion-semantics-primary-600};
  --scroll-bar-background: #{globals.$ion-bg-neutral-boldest-default-rgb};
  --scroll-bar-background-active: #{globals.$ion-bg-neutral-boldest-press-rgb};
  /**
   * @prop --bullet-background: Background of the pagination bullets
   * @prop --bullet-background-active: Background of the active pagination bullet
   *
   * @prop --progress-bar-background: Background of the pagination progress-bar
   * @prop --progress-bar-background-active: Background of the active pagination progress-bar
   *
   * @prop --scroll-bar-background: Background of the pagination scroll-bar
   * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar
   */
  display: block;

  user-select: none;
}

// Pagination Bullets
// --------------------------------------------------

.swiper .swiper-pagination-bullet {
  background: var(--bullet-background);
}

.swiper .swiper-pagination-bullet-active {
  background: var(--bullet-background-active);
}

// Pagination Progress Bar
// --------------------------------------------------

.swiper .swiper-pagination-progressbar {
  background: var(--progress-bar-background);
}

.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--progress-bar-background-active);
}

// Scrollbar
// --------------------------------------------------

.swiper .swiper-scrollbar {
  background: var(--scroll-bar-background);
}

.swiper .swiper-scrollbar-drag {
  background: var(--scroll-bar-background-active);
}

// Slide
// --------------------------------------------------

.swiper .slide-zoom {
  display: block;

  width: 100%;

  text-align: center;
}

.swiper .swiper-slide {
  @include globals.typography(globals.$ion-heading-h6-bold);

  // Center slide text vertically
  display: flex;
  position: relative;

  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  text-align: center;
  box-sizing: border-box;
}

.swiper .swiper-slide img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}