/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */

// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.

/* <button> css reset */
.pswp__button {
  -webkit-appearance: none;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  display: block;
  float: right;
  height: 20px;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  transition: opacity $transition-duration--fast;
  width: 20px;
  z-index: 1;

  &:active {
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

.pswp__button--close {
  height: 25px;
  margin: $spacing--s 20px 0 0;
  position: relative;
  width: 25px;
  z-index: 1;

  .icon {
    color: returnColorCSSVar('white');
    height: 25px;
    top: 0;
    width: 25px;
    z-index: -1;
  }

  &:hover {
    opacity: 0.5;
  }
}

.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
  .icon {
    color: returnColorCSSVar('white');
    position: relative;
    z-index: -1;

    svg {
      fill: currentColor;
      width: 25px;
    }
  }

  &:hover {
    opacity: 0.5;
  }
}

.pswp--touch {
  .pswp__button--arrow--left,
  .pswp__button--arrow--right {
    bottom: -18px;
    top: auto;
  }
}

/*
  Arrow buttons hit area
  (icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  height: 100px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  width: 70px;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pswp__counter {
  @include font-style('body--m');
  color: returnColorCSSVar('white');
  position: absolute;
  left: 20px;
  top: $spacing--s;
}

.pswp__caption {
  bottom: 0;
  left: 0;
  min-height: 44px;
  position: absolute;
  width: 100%;

  small {
    color: #bbb;
    font-size: 11px;
  }
}

.pswp__caption__center {
  color: #ccc;
  font-size: 13px;
  margin: 0 auto;
  max-width: 420px;
  line-height: 20px;
  padding: $spacing--xs;
  text-align: left;
}

.pswp__caption--empty {
  display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden;
}

/*
 Loading indicator (preloader)
 */

.pswp__preloader {
  direction: ltr;
  height: 44px;
  left: 50%;
  margin-left: -22px;
  position: absolute;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  top: 0;
  width: 44px;
  will-change: opacity;
}

.pswp__preloader__icn {
  height: 20px;
  margin: 12px;
  width: 20px;
}

.pswp__preloader--active {
  opacity: 1;
}

.pswp--css_animation {
  .pswp__preloader--active {
    opacity: 1;

    .pswp__preloader__icn {
      animation: clockwise 500ms linear infinite;
    }

    .pswp__preloader__donut {
      animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
    }
  }

  .pswp__preloader__icn {
    background: none;
    height: 14px;
    left: 15px;
    margin: 0;
    opacity: 1;
    position: absolute;
    top: 15px;
    width: 14px;
  }

  .pswp__preloader__cut {
    /*
      The idea of animating inner circle is based on Polymer ("material") loading indicator
       by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
    */
    height: 14px;
    position: relative;
    overflow: hidden;
    width: 7px;
  }

  .pswp__preloader__donut {
    background: none;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    border-left-color: transparent;
    box-sizing: border-box;
    height: 14px;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 14px;
  }
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    float: right;
    left: auto;
    margin: 0;
    position: relative;
    top: auto;
  }
}

@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes donut-rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(0);
  }
}

/*
  Additional styles
 */

/* root element of UI */
.pswp__ui {
  opacity: 1;
  visibility: visible;
  z-index: $pswp__root-z-index + 50;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  height: 50px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  transition: opacity $pswp__controls-transition-duration
    cubic-bezier(0.4, 0, 0.22, 1);
  will-change: opacity;
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse {
  .pswp__button--arrow--left,
  .pswp__button--arrow--right {
    visibility: visible;
  }
}

.pswp__ui--idle {
  .pswp__top-bar {
    opacity: 1;
  }

  .pswp__button--arrow--left,
  .pswp__button--arrow--right {
    opacity: 1;
  }
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide {
  .pswp__button--arrow--left,
  .pswp__button--arrow--right,
  .pswp__counter {
    display: none;
  }
}

.pswp__element--disabled {
  display: none !important;
}

@if $pswp__include-minimal-style == true {
  .pswp--minimal--dark {
    .pswp__top-bar {
      background: none;
    }
  }
}