/**
 * @file
 * With thumbnail navigation.
 */

.splidebox .splide--nav {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 2px 0;
  padding: 0;
}

.splidebox .splide--main {
  transition: height .3s;
}

.splidebox .splide--nav .slide {
  min-width: var(--sbox-tn);
  max-width: var(--sbox-tn);
  height: var(--sbox-tn);
}

/* @todo recheck, temp fix for moving slides when less.
This fixed moving slides, but made arrows out of sync for is-active class.
.splidebox .splide--nav.is-less .splide__list {
  justify-content: center;
  transform: none !important;
}

.splidebox .splide--nav.is-less img,
.splidebox .splide--nav.is-less .slide__thumbnail {
  pointer-events: none;
}
*/

.splidebox .splide--nav .slide__thumbnail,
.splidebox .splide--nav img {
  width: 100%;
  height: 100%;
}

.splidebox .splide--nav img {
  object-fit: cover;
}

.splidebox .splide--nav .slide__thumbnail {
  position: relative;
  overflow: hidden;
}

.splidebox .splide--nav .slide__thumbnail::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  pointer-events: none;
  inset: 0;
}

.splidebox .splide--nav .is-active .slide__thumbnail::after {
  display: none;
}

.is-sbox-thumbed .splidebox__caption.is-caption {
  top: 0;
  right: 100px;
  bottom: auto;
  left: auto;
  overflow: hidden;
  width: var(--sbox-nav);
  height: var(--sbox-nav);
  padding-right: var(--sbox-space);
  padding-left: var(--sbox-space);
  cursor: pointer;
  transform: none;
  text-align: right;
  pointer-events: auto;
}

.is-sbox-thumbed .splidebox__caption::before {
  display: block;
  content: "?";
  text-align: right;
  pointer-events: none;
  font-weight: 600;
  line-height: var(--sbox-caption-btn-lh);
}

.is-sbox-thumbed .splidebox__caption--content {
  display: none;
  padding-top: var(--sbox-space);
  cursor: text;
}

.is-sbox-thumbed .is-sbox-visible .splidebox__caption--content {
  display: block;
}

.is-sbox-thumbed .splidebox__caption.is-sbox-visible::before {
  content: "x";
}

.is-sbox-thumbed .splidebox__caption.is-sbox-visible {
  visibility: visible;
  width: auto;
  max-width: 210px;
  height: auto;
}

/*
.is-sbox-thumbed--visible:not(.is-sbox-zoomed) .is-zoomable-slide .splidebox__item,
.is-sbox-thumbed--visible:not(.is-sbox-zoomed) .splidebox__img.is-zoomable {
  max-height: 100%;
}
*/

/* 1408px = 88em on 16px base font size. */
@media only screen and (min-width: 1408px) {
  /*
  .is-sbox-thumbed--visible .splide-wrapper .splide--main {
    height: calc((var(--vh) * 100) - 100px);
    max-height: calc((var(--vh) * 100) - 100px);
  }


  .is-sbox-thumbed .splidebox__caption::before {
    width: auto;
    height: 48px;
    line-height: 60px;
  }

  .splidebox .splide--nav {
    height: 100px;
  }

  .splidebox .splide--nav .splide__slider {
    height: 97px;
  }

  .splidebox .splide--nav .slide {
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
  }
  */
  .is-sbox-thumbed .splidebox__caption.is-caption {
    right: 132px;
    min-height: 48px;
  }
}