/**
 * @file
 * Provides the fundamental Splidebox layout rules.
 */

/* stylelint-disable selector-max-id, declaration-no-important */
:root {
  --sbox-tn: 64px;
  --sbox-space: 15px;
  --sbox-space-with-tn: 100px;
  --sbox-space-without-tn: 64px;
  --sbox-nav: 42px;
  --sbox-btn: 36px;
  --sbox-btn-tn-space: 15px;
  --sbox-btn-padding: 8px;
  --sbox-counter: 16px;
  --sbox-counter-lh: 1.2;
  --sbox-caption: 16px;
  --sbox-caption-title: 1.75rem;
  --sbox-caption-btn-lh: 28px;
  --sbox-ajax-content: 98%;
}

.splidebox,
.splidebox *,
.splidebox *::before,
.splidebox *::after {
  box-sizing: border-box;
}

.splidebox,
.splidebox__overlay,
.splidebox__inner,
.splidebox__content {
  position: absolute;
}

.splidebox {
  z-index: -1;
  visibility: hidden;
  transition: opacity 1ms ease;
  /* bad for fixed positioning
  transform: translateZ(0); */
  opacity: 0;
}

.is-sbox-mounted {
  position: fixed;
  z-index: 99999;
  visibility: visible;
  opacity: 1;
}

/*
bad for zoomin-out
.is-sbox-html,
.is-sbox-html body {
  position: relative;
}
.is-sbox-html,
.is-sbox-html body, */

.is-sbox-html {
  position: relative;
  overflow-x: hidden;
}

.is-sbox-mounted,
.is-sbox-mounted .is-inset {
  overflow: hidden;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  height: calc(var(--vh) * 100);
  inset: 0;
}

.splidebox__overlay,
.splidebox__inner,
.splidebox__content {
  width: inherit;
  height: inherit;
}

.splidebox .slide .media-wrapper {
  max-width: 100%;
  margin: auto;
}

.splidebox__inner {
  text-align: center;
}

.splidebox__overlay,
.splidebox__inner {
  transition: opacity 0.5s ease;
}

.is-sbox-active .splidebox__overlay,
.is-sbox-active .splidebox__inner {
  visibility: visible;
  opacity: 1;
}

.is-sbox-mounting .splidebox__overlay,
.is-sbox-umounting .splidebox__overlay,
.is-sbox-mounting .splidebox__inner {
  visibility: hidden;
  opacity: 0;
}

.splidebox__content {
  transform: translateZ(0);
}

.is-sbox-mounted .is-vw {
  width: 100%;
  width: 100vw;
}

.is-sbox-mounted .is-vh,
.is-sbox-mounted .slide__content,
.is-sbox-mounted .splidebox__item {
  height: 100%;
  height: 100vh;
  height: calc(var(--vh) * 100);
}

.is-sbox-thumbed--visible .splidebox__item,
.is-sbox-thumbed--visible .splide--main {
  height: calc((var(--vh) * 100) - var(--sbox-tn));
}

.splidebox .splide--nav {
  width: 100%;
  width: 100vw;
  height: var(--sbox-tn);
}

.splidebox .splide-wrapper,
.splidebox .splide:not(.splide--nav),
.splidebox .splide__slider,
.splidebox .splide__track,
.splidebox .splide__list,
.splidebox .splide__slide {
  height: inherit;
}

.splidebox .splide {
  position: relative;
  visibility: visible;
}

/* Above loading indicator. */
.splidebox .splide__slider {
  z-index: 23;
}

/* Above .splide__slider. */
.splidebox .splide .splide__arrows {
  position: absolute;
  z-index: 25;
  top: 50%;
  width: 100vw;
  transform: translateY(-50%);
}

.splidebox .splide--nav {
  z-index: 26;
}

.splidebox .slide {
  overflow: hidden;
  text-align: center;
}

.splidebox .splidebox__item {
  position: relative;
  backface-visibility: visible;
  overflow: visible;
  transition: transform 0.4s ease;
  transform: translateZ(0);
  transform-origin: center top;
  will-change: auto;
}

.splidebox .slide .is-centered {
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0 auto;
}

.splidebox .slide .is-flex {
  position: relative;
  display: flex;
  /* @todo recheck for multiple items. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.splidebox .is-slider .splidebox__item.is-flex {
  /* @todo recheck for multiple items. */
  flex-direction: column;
}

.is-sbox-dragging article,
.is-sbox-dragging p {
  cursor: grabbing;
  user-select: none;
}

/* To make zoom work, otherwise cropped. */
.splidebox .slide .slide__media {
  overflow: visible;
}

.splidebox.is-sbox-mounted .splide video {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.splidebox.is-sbox-fullscreen .splidebox__fullscreen {
  visibility: hidden;
  text-indent: -999px;
}

.splidebox__clone {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transition: all 0.4s ease;
  transform: translateZ(0);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.is-sbox-mounting .splidebox__clone {
  z-index: 999;
  display: block;
  opacity: 1;
}

.splidebox .splidebox__img {
  width: auto;
  height: auto;
  margin: 0 auto;
}

/* Required to close smoothly. */
.splidebox.is-sbox-unsplide .splidebox__img,
.splidebox:not(.is-sbox-zoomout) .slide.is-active .splidebox__img,
.splidebox .slide.is-active video {
  transition:
    opacity 0.3s,
    width 0.3s ease,
    height 0.3s ease;
}

.splidebox .slide.is-active .splidebox__item {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.22, 1);
}

/* Closing. */
.is-sbox-umounting .splidebox__caption,
.is-sbox-umounting .splidebox__nav,
.is-sbox-umounting .splidebox__ajax,
.is-sbox-umounting .splide__arrows,
.is-sbox-umounting .splide__pagination,
.is-sbox-umounting .media .media__icon,
.is-sbox-umounting iframe {
  display: none;
}

/* When closing the image. */
.splidebox.is-sbox-umounting .splide .slide.is-active .splidebox__trans {
  position: absolute;
  z-index: 3;
  display: block;
  visibility: visible;
  transition: all 0.4s ease;
  transform: translateZ(0);
  opacity: 0.8;
}

/* Mobile. */
.touchevents .splidebox .splidebox__item {
  transform-origin: left top;
}

/* 1408px = 88em on 16px base font size. */
@media only screen and (min-width: 1408px) {
  :root {
    --sbox-tn: 100px;
    --sbox-space: 15px;
    --sbox-space-with-tn: 160px;
    --sbox-space-without-tn: 64px;
    --sbox-nav: 48px;
    --sbox-btn: 42px;
    --sbox-btn-tn-space: 30px;
    --sbox-btn-padding: 8px;
    --sbox-counter: 22px;
    --sbox-counter-lh: 1.4;
    --sbox-caption: 24px;
    --sbox-caption-title: 1.85rem;
    --sbox-caption-btn-lh: 42px;
    --sbox-ajax-content: 86%;
  }
}