/**
 * @file
 * Provides common CSS rules for 3d and extra transition effects.
 */

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

.slick,
.slick-wrapper {
  margin-left: auto;
  margin-right: auto;
}

.slick__arrow {
  text-align: center;
}

/** Pause animation, when interrupted, or hovered. */
.slick--autoplay .slick-track:hover,
.slick--autoplay .slick-track:hover .slide {
  animation-play-state: paused;
}

/** Stop animation, when media player is playing. */
.is-paused .slick-track,
.is-paused .slick-track .slide {
  animation: 0;
  opacity: 1;
  visibility: visible;
}

.slick .slide {
  z-index: 0;
}

.slick .is-before--2,
.slick .is-after--2 {
  z-index: 1;
}

.slick .is-before--1,
.slick .is-after--1 {
  z-index: 2;
}

.slick .is-before,
.slick .is-after {
  z-index: 3;
}

.slick--thumbnail,
.slick .slide.slick-current {
  z-index: 4;
}

.slide__thumbnail {
  position: relative;
}

.slick .slide__media > canvas,
.slick .slide__content > canvas {
  display: block;
  height: 60px;
  left: 0;
  position: absolute;
  top: 100%;
  transition: opacity 0.6s ease-in-out 0s;
  width: 100%;
}

.slick .is-far .slide__media > canvas,
.slick .is-far .slide__content > canvas {
  opacity: 0;
}

.slick--reflection .slide__media {
  overflow: visible;
}

/** @todo: Drop and move to Slick. */
.slide--caption--center {
  text-align: center;
}

.slick .slide--caption--center-bottom .slide__caption {
  bottom: 0;
  height: auto;
  min-height: 80px;
  padding: 15px;
  position: absolute;
  text-align: center;
  top: auto;
  width: 100%;
}

.slick .slide--caption--center-bottom .slide__description {
  margin: 0 auto;
  max-width: 72%;
}

.slick.slick--has-arrow-down > .slick__arrow {
  margin: 0;
  transform: translateX(-50%);
}

@media all and (min-width: 64em) {
  /** @todo: Drop and move to Slick. */
  .slick-wrapper.slick-wrapper--tn-over-bottom .slick--thumbnail {
    bottom: 0;
    height: auto;
    max-height: none;
    top: auto;
    width: 100%;
  }
  /*
  @todo: clone into relevant skins.
  Let Blazy multi-serving images grins.

  .slick .slide--caption--center .slide__caption,
  .slick .slide--caption--center-bottom .slide__caption,
  .slick .slide--caption--center .slide__constrained > .slide__caption,
  .slick .slide--caption--center-top .slide__constrained > .slide__caption {
    left: 50%;
    margin: auto;
    min-height: 80px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .slick .slide--caption--center-top .slide__caption {
    top: 36%;
    transform: translateX(-50%);
  }

  .slick .slide.slide--caption--center-bottom .slide__caption {
    bottom: 0;
    top: auto;
    transform: translate(-50%, 0);
  }
  */

  .slide--caption--center .slide__link {
    bottom: auto;
    left: auto;
    position: relative;
    transform: none;
  }

  .slick--vertical .slide {
    float: none;
  }
}

/** Intentionally reversed to avoid conflict with existing skins. */
@media all and (max-width: 63.999em) {
  /*
  .slick .slide--caption--bottom .slide__title {
    margin-bottom: 0;
  }

  .slide--caption--center .slide__link,
  .slick .slide--caption--center .slide__caption,
  .slick .slide--caption--center-bottom .slide__caption,
  .slick .slide--caption--center-top .slide__caption {
    left: 50%;
    position: absolute;
  }

  .slide--caption--center .slide__link {
    bottom: 30px;
    padding: 0 15px;
    transform: translateX(-50%);
    width: 100%;
  }

  .slick .slide--caption--center .slide__caption,
  .slick .slide--caption--center-bottom .slide__caption,
  .slick .slide--caption--center-top .slide__caption {
    min-height: 80px;
    padding: 30px 15px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .slick .slide.slide--caption--center-bottom .slide__caption {
    bottom: 0;
    top: auto;
    transform: translate(-50%, 0);
  }
  */


}