/**
 * @file
 * Provided basic layout for the Splide based on custom settings.
 */

/**
 * Complex layout needs custom refinement for mobile, hence it is reasonable
 * to apply for Desktop up. Adjust mobile version accordingly.
 */
@media (min-width: 64em) {

  /* Fixed FireFox draggable issue, avoid asNavFor thumbnails. */
  .splide--main .splide__slide img {
    pointer-events: none;
  }

  .slide__caption {
    left: 0;
    padding: 20px;
    top: 10%;
  }

  .slide--caption--center .slide__caption,
  .slide--caption--center-top .slide__caption,
  .slide--caption--left .slide__caption,
  .slide--caption--right .slide__caption {
    width: 42%;
  }

  .slide--caption--center .slide__caption {
    margin-top: -16%;
    position: absolute;
    top: 50%;
  }

  .slide--caption--center .slide__caption,
  .slide--caption--center-top .slide__caption {
    left: 50%;
    padding: 0;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
  }

  .slide--caption--center .slide__caption {
    transform: translate(-50%, -50%);
  }

  .slide--caption--left .slide__caption {
    position: absolute;
  }

  .slide--caption--right .slide__caption {
    left: auto;
    position: absolute;
    right: 0;
  }

  .slide--caption--top .slide__caption,
  .slide--caption--bottom .slide__caption {
    position: absolute;
    width: 100%;
  }

  .slide--caption--top .slide__caption {
    top: 0;
  }

  .slide--caption--bottom .slide__caption {
    bottom: 0;
    top: auto;
  }

  .slide--caption--stage-left .slide__caption,
  .slide--caption--stage-right .slide__caption,
  .slide--caption--stage-zebra .slide__caption {
    left: 50%;
    padding: 0;
    position: absolute;
    transform: translateX(-50%);
    width: 82%;
  }

  .splide--nav .slide__caption,
  .slide--caption--below .slide__caption {
    padding: 20px 0;
    position: relative;
    top: auto;
    width: 100%;
  }

  .splide--nav .slide__caption {
    padding: 5px 6px;
  }

  .is-carousel .slide--caption--center .slide__caption,
  .is-carousel .slide--caption--center-top .slide__caption {
    left: 0;
    margin-left: auto;
    width: 100%;
  }

  /** Thumbnail position */
  .is-wrapper-nav--left .splide--nav {
    float: left;
    left: 0;
    width: 20%;
  }

  .is-wrapper-nav--left .splide--main {
    margin-left: 20%;
  }

  .is-wrapper-nav--right .splide--nav {
    float: right;
    right: 0;
    width: 20%;
  }

  .is-wrapper-nav--right .splide--main {
    margin-right: 20%;
  }

  .is-wrapper-nav--overlay .splide--main {
    margin-left: auto;
    margin-right: auto;
  }

  .is-wrapper-nav--overlay .splide--nav {
    height: 100%;
    max-height: 90%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 9;
  }

  .is-wrapper-nav--over-top .splide--nav {
    height: auto;
    max-height: none;
    width: 100%;
  }

  div[class*="is-wrapper-nav"] .splide__slider::after {
    clear: none;
  }
}