@import "../../../sass/webpack_deps";

.slideshow {
  height: 100%;

  @media (max-width: $max-480) {
    overflow: hidden;
  }

  &__images {
    height: 100%;
    position: relative;
  }

  &__slide {
    background: center no-repeat $titlegray;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity $animation-speed-ui, transform $animation-speed-ui;
    z-index: z("slideshow-slide");
  }

  &--fade &__slide {
    opacity: 1;
    transition-duration: ($animation-speed-ui * 2);
    transition-timing-function: ease-in-out;

    &--num_-1 {
      opacity: 1;
      z-index: z("default");
    }

    &--num_1 {
      opacity: 0;
      z-index: z("slideshow-slide") + 2;
    }

    &--next {
      opacity: 0;
      z-index: z("below");
    }
  }

  &--slide {
    @include container-padded();

    @media (min-width: $min-1290) {
      margin-left: auto;
      margin-right: auto;
      max-width: 90%;
    }
  }

  &--slide &__slide--num_-2 {
    transform: translateX(calc(-200% - #{$gutter * 2}));
  }

  &--slide &__slide--num_-1 {
    transform: translateX(calc(-100% - #{$gutter * 1}));
  }

  &--slide &__slide--num_1 {
    transform: translateX(calc(100% + #{$gutter * 1}));
  }

  &--slide &__slide--num_2 {
    transform: translateX(calc(200% + #{$gutter * 2}));
  }

  &--slide &__slide--num_-2,
  &--slide &__slide--num_-1,
  &--slide &__slide--num_1,
  &--slide &__slide--num_2 {
    cursor: pointer;
    opacity: .75;

    &:hover,
    &:active,
    &:focus {
      opacity: 1;
    }
  }

  &__progress {
    bottom: 10px;
    position: absolute;
    text-align: center;
    top: auto;
    width: 100%;
    z-index: z("slideshow-slide") + 1; // Put above the slides
  }

  &__progress__dot {
    background-color: rgba($color-white, .6);
    border-radius: 50%;
    display: inline-block;
    height: 1rem;
    margin: 0 .4rem;
    width: 1rem;

    &--active {
      background-color: $color-white;
    }
  }
}