// stylelint-disable declaration-no-important
// stylelint-disable selector-max-class
// stylelint-disable selector-max-combinators
// stylelint-disable selector-max-compound-selectors

:root {
  --swiper-theme-color: #{$primary};
  --swiper-pagination-color: #{$primary};
  --swiper-pagination-bullet-inactive-color: #{$secondary};
  --swiper-pagination-bullet-size: 1rem;
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.swiper-container {
  position: relative;
  display: flex;
  width: 100%;

  &:last-child:first-child {
    height: 100%;
  }

  // .align-items-center > &:last-child:first-child {
  //   max-height: 100%;
  //   .swiper {
  //     max-height: 100%;
  //   }
  //   .swiper-slide {
  //     max-height: 100%;
  //     overflow-y: auto;
  //   }
  // }
}

.swiper-vertical {
  height: 100%;
  padding-bottom: 3rem;
}

.swiper-slide {
  display: flex;
  height: auto;
  transition: $transition-base;
}

.swiper-slide--visible-active:not(.swiper-slide-active) {
  opacity: 0;
}

.swiper-nav {
  --lx-swiper-nav-x: 0px; //stylelint-disable-line length-zero-no-unit
  --lx-swiper-nav-mx: calc(-1 * var(--#{$prefix}gutter-x) * .5);
  --lx-swiper-nav-px: 0px; //stylelint-disable-line length-zero-no-unit
  --lx-swiper-nav-spacing-t: 0;
  --lx-swiper-nav-spacing-b: 0;

  position: absolute;
  top: var(--lx-swiper-nav-spacing-t);
  bottom: var(--lx-swiper-nav-spacing-b);
  z-index: 2;
  display: flex;
  align-items: center;
  // opacity: 0;
  transition: $transition-base;

  // .swiper-initialized ~ &:not(.swiper-button-disabled) {
  //   opacity: 1;
  // }

  span {
    transition: $transition-base;
  }

  &.swiper-button-disabled span {
    opacity: 0;
  }

  // .section-swiper.expand ~ &,
  // .section-swiper.expandx ~ & {
  //   --lx-swiper-nav-x: calc(var(--#{$prefix}container-outer-w));
  // }

  .section-swiper ~ & {
    --lx-swiper-nav-x: calc(var(--#{$prefix}container-outer-w));
  }

}

.swiper-nav-prev {
  // left: calc(-1 * var(--#{$prefix}gutter-x) / 2);
  left: 0;
  justify-content: end;
  padding-left: var(--lx-swiper-nav-x);
  margin-left: calc(-1 * ((var(--lx-swiper-nav-x) * 1.5) - (var(--#{$prefix}gutter-x) / 2) ));

  span {
    // margin-left: calc(-1 * var(--#{$prefix}gutter-x) / 2);
    margin-left: 0;
  }

  .swiper-initialized ~ &:not(.swiper-button-disabled) {
    margin-left: calc(-1 * var(--lx-swiper-nav-x));
  }

  .swiper-vertical ~ & {
    top: -1rem;
    bottom: auto;
    left: 50%;
    padding-left: 0;
    transform: translateX(-50%);

    span {
      transform: rotate(90deg);
    }
  }
}

.swiper-nav-next {
  // right: calc(-1 * var(--#{$prefix}gutter-x) / 2);
  right: 0;
  justify-content: start;
  padding-right: var(--lx-swiper-nav-x);
  margin-right: calc(-1 * ((var(--lx-swiper-nav-x) * 1.5) - (var(--#{$prefix}gutter-x) / 2) ));

  span {
    // margin-right: calc(-1 * var(--#{$prefix}gutter-x) / 2);
    margin-right: 0;
  }

  .swiper-initialized ~ &:not(.swiper-button-disabled) {
    margin-right: calc(-1 * var(--lx-swiper-nav-x));
  }

  .swiper-vertical ~ & {
    top: auto;
    right: 0;
    bottom: -1rem;
    left: 50%;
    padding-right: 0;
    transform: translateX(-50%);

    span {
      transform: rotate(90deg);
    }
  }
}

.swiper-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  padding: .45rem .5rem .35rem;
  color: $white;
  background-color: var(--#{$prefix}secondary);

  @media (hover: hover) and (pointer: fine) {
    visibility: hidden;
  }
}

.swiper-pagination-wrapper {
  position: relative;
}

.swiper-pagination-bullet {
  position: relative;
  background-color: transparent;
  border-radius: 0;
  transition: $transition-base;

  &::after {
    position: relative;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: var(--luxize-ornament-border-width, #{$ornament-border-width});
    margin-top: calc(-1 * (var(--luxize-ornament-border-width, #{$ornament-border-width})));
    content: "";
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    transition: $transition-base;
  }
}

.swiper-pagination-bullet-active {
  width: calc(var(--swiper-pagination-bullet-size) * 2);

  &::after {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
  }
}

.swiper-pagination-bullet-hidden {
  width: 0 !important;
  margin: 0 !important;
}

.swiper.expand,
.swiper.expandy,
.swiper.expandy-top,
.swiper.expandy-bottom {
  padding-top: 0;
  padding-bottom: 0;
}

.swiper.expand,
.swiper.expandy,
.swiper.expandy-top {

  .swiper-slide {
    padding-top: var(--lx-expand-pt);
  }
}

.swiper.expand,
.swiper.expandy,
.swiper.expandy-bottom {

  .swiper-slide {
    padding-bottom: var(--lx-expand-pb);
  }
}

[data-swiper-id][data-swiper-slide-to] {
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  transition: $transition-base;

  &.active {
    border-color: $primary;
  }
}