/*
lib-swiper lib-swiper--pending
lib-swiper--type-single (one slide at a time) | lib-swiper--type-multiple (multiple slides)
lib-swiper--nav-padding (outside nav with padding) | lib-swiper--nav-inside (inside nav)
:.. lib-swiper__inner
    :.. lib-swiper__wrapper
        :.. lib-swiper__slide lib-swiper__slide--0
        :.. lib-swiper__slide lib-swiper__slide--1
        :.. ...
*/

.lib-swiper {
  --swiper-theme-color: var(--v-color__3);

  --lib-swiper__nav-size: 2.5rem;
  --lib-swiper__nav-size-wrapper-diff: 1.2rem;
  --lib-swiper__nav-color--hover: var(--v-color__1);

  --lib-swiper__multiple-spacing: var(--v-spacing__xs);
  --lib-swiper__multiple-count: 5;

  position: relative;
}

.lib-swiper__inner {
  position: relative;
  z-index: 10;
}

.lib-swiper__wrapper {
  box-sizing: border-box !important;
  display: flex;
  align-items: stretch;
}

.lib-swiper--nav-inside {
  --lib-swiper__spacing: 1px;
}

.lib-swiper--nav-padding {
  --lib-swiper__spacing: 0.5rem;

  padding-left: calc( var(--lib-swiper__nav-size) + ( var(--lib-swiper__spacing) * 1 ) );
  padding-right: calc( var(--lib-swiper__nav-size) + ( var(--lib-swiper__spacing) * 1 ) );
}

.lib-swiper .swiper-button-next,
.lib-swiper .swiper-button-prev {
  width: var(--lib-swiper__nav-size);
  height: var(--lib-swiper__nav-size);
  z-index: 100;
}

.lib-swiper--nav-inside .swiper-button-next,
.lib-swiper--nav-inside .swiper-button-prev {
  background-color: rgb(255 255 255 / 30%);
}

.lib-swiper .swiper-button-next:hover,
.lib-swiper .swiper-button-prev:hover {
  color: var(--lib-swiper__nav-color--hover);
}

.lib-swiper .swiper-button-next::after,
.lib-swiper .swiper-button-prev::after {
  font-size: calc( var(--lib-swiper__nav-size) - var(--lib-swiper__nav-size-wrapper-diff) );
}

.lib-swiper--nav-inside .swiper-button-next {
  right: var(--lib-swiper__spacing);
}

.lib-swiper--nav-padding .swiper-button-next {
  right: 0;
}

.lib-swiper--nav-inside .swiper-button-prev {
  left: var(--lib-swiper__spacing);
}

.lib-swiper--nav-padding .swiper-button-prev {
  left: 0;
}

.lib-swiper__slide {
  position: relative;
  overflow: hidden;
  box-sizing: border-box !important;
}

.lib-swiper--type-single.lib-swiper--pending .lib-swiper__slide {
  flex: 0 0 100%;
}

.lib-swiper--height-auto .lib-swiper__slide {
  height: auto !important;
}

.lib-swiper--type-single.lib-swiper--pending .lib-swiper__slide:not(.lib-swiper__slide--0) {
  display: none !important;
}

.lib-swiper--type-multiple .lib-swiper__inner {
  margin-left: calc( var(--lib-swiper__multiple-spacing) / 2 * -1 );
  margin-right: calc( var(--lib-swiper__multiple-spacing) / 2 * -1 );
}

.lib-swiper--type-multiple.lib-swiper--pending .lib-swiper__wrapper {
  display: flex;
  overflow: hidden;
}

.lib-swiper--type-multiple .lib-swiper__slide {
  padding-left: calc( var(--lib-swiper__multiple-spacing) / 2 );
  padding-right: calc( var(--lib-swiper__multiple-spacing) / 2 );
}

.lib-swiper--type-multiple.lib-swiper--pending .lib-swiper__slide {
  flex: 0 0 calc( 100% / var(--lib-swiper__multiple-count) );
}

@media (min-width: 1200px) {
  .lib-swiper {
    --lib-swiper__nav-size: 3.5rem;
  }

  .lib-swiper--nav-padding {
    --lib-swiper__spacing: var(--v-layout__container-padding);
  }

  .lib-swiper--nav-inside {
    --lib-swiper__spacing: 1.5rem;
  }
}

/* On higher resolutions let the arrows outside, adjust as needed */
@media (min-width: 1400px) {
  .lib-swiper--nav-padding {
    margin-left: calc( ( var(--lib-swiper__nav-size) + ( var(--lib-swiper__spacing) * 1 ) ) * -1 );
    margin-right: calc( ( var(--lib-swiper__nav-size) + ( var(--lib-swiper__spacing) * 1 ) ) * -1 );
  }
}