//------------------------------------
//    #DEFAULT SETTINGS
//------------------------------------
$modal-slideshow-prefix: 'modal-slideshow' !default;
$modal-slideshow-modal-animation: 'fade' !default;
$modal-slideshow-slide-animation: 'slide' !default;
$modal-slideshow-z-index: 9999 !default;

//------------------------------------
//    #MODAL SLIDESHOW
//------------------------------------
// We set a class on html tag when modal is opened
html.#{$modal-slideshow-prefix}--opened {
  overflow-y: hidden;
}

.#{$modal-slideshow-prefix} {
  display: block;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background: rgba(0, 0, 0, 0.8);

  z-index: $modal-slideshow-z-index;
  overflow: scroll;
}

.#{$modal-slideshow-prefix}__close {
  display: block;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  font-size: 0;

  cursor: default;
}

.#{$modal-slideshow-prefix}__close:after {
  content: " ";
  display: block;

  position: absolute;
  top: 30px;
  right: 30px;

  width: 50px;
  height: 50px;

  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEYSURBVGiB7ZjBDoIwDIbVA/HxeBRu+Fh40bfz98CaLM2sA1pWtN+RbH/7pSyEnU5BEARBEPwxADoAvWF+D6CzyqciHYA7Zm4G+UPKfgK4audTkVwC2jKZBExl0shLDArZXIKweYVTwVeh4OrJCBKjZu+fCqvINJNgDWySaS7BGlkl40aCNbRIxp0Ea6xKxq0EUSPjXoKQZA4jQQgNl9j8ITVFmIz/SXC+yJhIXCxCE+eFz31ReU7UfwFUqZQgfB52QWIUzoyvyUgSbI1fmRoJttafzBIJtsePzBoJtre9zBYJltFORkOCZe0voynBMveTwa9cB2G+oJu0JlHI55N5wPi2cdKWyPJJxk4iK3b8S+wgCIIgCJzzBnscOF5SUB7qAAAAAElFTkSuQmCC) no-repeat;
  background-size: 50px 50px;

  cursor: pointer;
}

.#{$modal-slideshow-prefix}__slide {
  display: block;

  position: absolute;
  top: 100px;
  left: 50%;

  width: 600px;

  margin: 0 0 24px -300px;

  background: #ffffff;
}

.#{$modal-slideshow-prefix}__media {
  display: block;
  position: relative;

  text-align: center;
  line-height: 0;
  background: #212121;

  img {
    max-width: 100%;
  }
}

.#{$modal-slideshow-prefix}__controls,
.#{$modal-slideshow-prefix}__controls * {
  display: block;

  position: absolute;
  top: 0;
  bottom: 0;

  width: 100%;
  height: 100%;
}

.#{$modal-slideshow-prefix}__controls {
  opacity: 0;

  -webkit-transition: opacity 300ms ease;
  -moz-transition: opacity 300ms ease;
  -o-transition: opacity 300ms ease;
  transition: opacity 300ms ease;

  &:hover {
    opacity: 1;
  }
}

.#{$modal-slideshow-prefix}__controls--prev {
  left: 0;

  width: 70px;

  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAImSURBVGiB7Zg/j9JgHIAfT/EMooPJxYnUICphaYhNII5OHYiJcQB3XYiDJgzEhEEHBhI/AJ+l38BB400XcwsXlaqkIlpiC945tBx3iMjR0lZ8n7Fv83t/z/vr+68gEAgEAsG/xRlg0++gp/wO+BeuA2lgA+gCrwDbj8Cn/QiyIBngGpPBiwNbQAf46TX4htcAC5LFqQSKolyo1+sZ9/lFoACc9dpBEBXJAikAWZbPa5r2XFXVu4lEYkfTtI8482ULeA/sB5DPUmSBIlCUZbnU7XbfHriMRqMfzWbz6bgduBFqpnM4lFAU5b5hGLsHU/R6vb14PH7HfU8JN93Z/LESY0zT/FQqlR4wqciVMBOexTISNwl+K5hLBiERDRaR+LwWEuVy+SFrJqEQMYkUayABcBso5nK58qzNbsacWKmEl0PjPoBhGEPLsszpxlgsdi6ZTCaOPvLY38pI4o62JEn3Op3Om+mq2Lb9rVqtPmZSlQLBXh0W5nCenEDmFs4tMXL8XzKWZfUqlcojhEywLCsTyQUgzcllCkR0aV5G5mqoGc/hmIyu69vTMv1+/51fV91VlnMX2AFot9tWPp9/puv69rhxOByajUbjxWAwGP85+brCXHzht8/Mtu3vtVrtCccnvKdBDeokmsY58iNJ0qaqqpdbrdae22YAL4GRlw6CPFKncH5MHMUXCQh2/f4CWMAlnM/oA/AaHyTCJJJ7hkAgEAgEgqjwC6CLYZvOnD80AAAAAElFTkSuQmCC) center center no-repeat;
  background-size: 50px 50px;

  font-size: 0;
}

.#{$modal-slideshow-prefix}__controls--next {
  right: 0;

  width: 70px;

  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIhSURBVGiB7ZjPaxNBFIC/zSLRFTFptdiCF8WrogfBa6ugsXrOIQdz8CiIf0ZB8V8IhMTFkx5y86BYkhDz6xgWcxAvAQke6hYqu+NhB7sJWYntNLst80EI7CzvvS/zdrI80Gg0Go1Gg6k4Xha4Kr93AE9x/EgMhbEuA9dDMXeBBvBLYY5IVO3ItATAKWAVGAG/FeWJJKUgxl8Jy7JSjuO8sG17Xa6dBu4AZxXkOVKWgYfApmVZjx3H+SiEEL7ve7ZtvwI25ecuCZe5iZQYDoefRQjf971KpfKSBckctrU8ANd1/dFo9D28YBhGKp/PPz8ubXYOeID81ev1+hsxxXFqsyXgPlomeUzL2FomIZwomQtMnmbzylgx1hzJhEyz2ZxH5nacBf+La8giTdN8NB6Pv07LeJ63l8vlnsj77h00kYqXxihWCEQwTdPodDpPs9nslfANQgi/Wq2+rtVqP+Sln0dYz4FYAXLInej3++9ntVW5XN5iv63WCV5jEsNF/l9ig4Q96BMSvV5PS8SFlkgK5wlJdLvdd3OeTmfiLHoWN5AFtlqtt3FKHPYPMQWQTqeNTCazHF4QQnilUmmrUCh8kpdcoE4w70ocS4SmKIPB4ENc7aRi0rhGME0xLMtKtdvtZ41G40uxWNyW6wvZCVUj01Xg1ox4uwQSrqI8kagame4QzHgvsS+z0GdC5RAbguN4DdgDvrGAma9Go9FoNJqTyB95y0+Ctcb8egAAAABJRU5ErkJggg==) center center no-repeat;
  background-size: 50px 50px;

  font-size: 0;
}

.#{$modal-slideshow-prefix}__title{
}

.#{$modal-slideshow-prefix}__content {
}

.#{$modal-slideshow-prefix}__controls--next,
.#{$modal-slideshow-prefix}__controls--prev {
  cursor: pointer;
}

//------------------------------------
//    #ANIMATIONS
//------------------------------------

// Modal animations
@if ($modal-slideshow-modal-animation == 'fade') {

  // MODAL ENTER
  .#{$modal-slideshow-prefix}__modal-enter {
    opacity: 0;
  }

  .#{$modal-slideshow-prefix}__modal-enter-active {
    opacity: 1;
    transition: opacity .3s ease;
  }

  // MODAL LEAVE
  .#{$modal-slideshow-prefix}__modal-leave {
    opacity: 1;
  }

  .#{$modal-slideshow-prefix}__modal-leave-active {
    opacity: 0;
    transition: opacity .3s ease;
  }

}

// Slide animations
@if ($modal-slideshow-slide-animation == 'slide') {

  // SLIDE ENTER
  .#{$modal-slideshow-prefix}__slide-enter-left,
  .#{$modal-slideshow-prefix}__slide-enter-right {
    opacity: 0;
  }

  .#{$modal-slideshow-prefix}__slide-enter-right {
    transform: translateX(-100px);
  }

  .#{$modal-slideshow-prefix}__slide-enter-left {
    transform: translateX(100px);
  }

  .#{$modal-slideshow-prefix}__slide-enter-left-active,
  .#{$modal-slideshow-prefix}__slide-enter-right-active {
    opacity: 1;
    transform: translateX(0);

    transition: all .3s ease;
  }

  // SLIDE LEAVE
  .#{$modal-slideshow-prefix}__slide-leave-left,
  .#{$modal-slideshow-prefix}__slide-leave-right {
    opacity: 1;
    transform: translateX(0);
  }

  .#{$modal-slideshow-prefix}__slide-leave-left-active,
  .#{$modal-slideshow-prefix}__slide-leave-right-active {
    opacity: 0;

    transition: all .3s ease;
  }

  .#{$modal-slideshow-prefix}__slide-leave-right-active {
    transform: translateX(100px);
  }

  .#{$modal-slideshow-prefix}__slide-leave-left-active {
    transform: translateX(-100px);
  }

} @else if ($modal-slideshow-slide-animation == 'zoom') {

  // SLIDE ENTER
  .#{$modal-slideshow-prefix}__slide-enter-left,
  .#{$modal-slideshow-prefix}__slide-enter-right {
    opacity: 0;
  }

  .#{$modal-slideshow-prefix}__slide-enter-right {
    transform: scale(2);
  }

  .#{$modal-slideshow-prefix}__slide-enter-left {
    transform: scale(.3);
  }

  .#{$modal-slideshow-prefix}__slide-enter-left-active,
  .#{$modal-slideshow-prefix}__slide-enter-right-active {
    opacity: 1;
    transform: scale(1);

    transition: all .3s ease;
  }

  // SLIDE LEAVE
  .#{$modal-slideshow-prefix}__slide-leave-left,
  .#{$modal-slideshow-prefix}__slide-leave-right {
    opacity: 1;
    transform: scale(1);
  }

  .#{$modal-slideshow-prefix}__slide-leave-left-active,
  .#{$modal-slideshow-prefix}__slide-leave-right-active {
    opacity: 0;

    transition: all .3s ease;
  }

  .#{$modal-slideshow-prefix}__slide-leave-right-active {
    transform: scale(.3);
  }

  .#{$modal-slideshow-prefix}__slide-leave-left-active {
    transform: scale(2);
  }

}

//------------------------------------
//    #RESPONSIVE
//------------------------------------
@media only screen and (max-width: 600px) {

  .#{$modal-slideshow-prefix}__slide {
    left: 0;
    width: 100%;
    margin: 0 0 24px;
  }

  .#{$modal-slideshow-prefix}__controls {
    opacity: 1;
  }

}