// Circle sliders
//
// Slider with circle progress indicator. Requires a parent container with defined height (that's why `.aspectratio` is used).
//
// **(`.col-xs-6` used here only to make the element smaller in the styleguide so it doesn't stretch full width.)**
//
// Markup:
// <div class="col-xs-6">
//   <div class="aspectratio" data-ratio="1:1">
//     <div class="aspectratio__item">
//       <div class="slider {{{modifier_class}}}">
//         <div class="slider__images faded">
//           <img class="slider__image img-responsive" src="./../build/assets/images/about-apple.png">
//           <img class="slider__image img-responsive" src="./../build/assets/images/about-homo-volans.png">
//         </div>
//         <svg class="slider__circle">
//           <circle class="slider__circle-shape" stroke="#1428aa" fill="transparent" r="45%" cx="50%" cy="50%"></circle>
//         </svg>
//       </div>
//     </div>
//   </div>
// </div>
//
// .slider--offset-left - Class that offsets the slider circle to the left. Used for that offset of circles on the homepage.
// .slider--offset-right - Class that offsets the slider circle to the right. Used for that offset of circles on the homepage.
//
// Styleguide Components.circle-slider
.slider {
  height: 100%;
  position: relative;

  &__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);

    &-shape {
      transform-origin: 50% 50%;
      stroke-dashoffset: 1860.4512078053951 1860.4512078053951; // empty circle (no border), 0 is for full border around the circle
      stroke-dasharray: 1860.4512078053951 1860.4512078053951; // "magic numbers" - refer to: https://css-tricks.com/building-progress-ring-quickly/
      stroke-width: 10;

      @include breakpoint-min($small-breakpoint) {
        stroke-width: 15;
      }

      @include breakpoint-min($desktop-breakpoint) {
        stroke-width: 20;
      }
    }
  }

  &__images {
    height: 80%;
    width: 80%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    > img {
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
  }

  &--offset-left {
    @include breakpoint-max($small-breakpoint) {
      transform: translate(-65px, 10px);
    }

    @include breakpoint-min($desktop-breakpoint) {
      transform: translate(-100px, 0);
    }

    @include breakpoint-min(1400) {
      transform: translate(-150px, 0);
    }
  }

  &--offset-right {
    @include breakpoint-max($small-breakpoint) {
      transform: translate(65px, 10px);
    }

    @include breakpoint-min($desktop-breakpoint) {
      transform: translate(100px, 0);
    }

    @include breakpoint-min(1400) {
      transform: translate(150px);
    }
  }
}

.first-slider-animation-started {

  .slider {

    &__circle {

      &-shape {
        animation-name: circleFill;
        animation-duration: 6s;
        animation-iteration-count: infinite;
      }
    }
  }

  .slider__images {
    animation-name: pictureScalingDown, pictureScalingUp;
    animation-duration: 3s, 3s;
    animation-delay: 0s, 3s;
    animation-iteration-count: 1, infinite;
  }
}

@keyframes pictureScalingDown {
  0% {
    transform: translate(-50%,-50%) scale(1);
  }

  33.333% {
    transform: translate(-50%,-50%) scale(.8);
  }

  100% {
    transform: translate(-50%,-50%) scale(.8);
  }
}

@keyframes pictureScalingUp {
  0% {
    transform: translate(-50%,-50%) scale(.8);
  }

  25% {
    transform: translate(-50%,-50%) scale(1);
  }

  50% {
    transform: translate(-50%,-50%) scale(.8);
  }

  100% {
    transform: translate(-50%,-50%) scale(.8);
  }
}

// Total animation should run for 6 seconds
// @keyframes circleFill {
//   0% {
//     stroke-dashoffset: 1860.4512078053951;
//   }

//   16.667% {
//     stroke-dashoffset: 0;
//   }

//   50% {
//     stroke-dashoffset: 0;
//   }

//   66.667% {
//     stroke-dashoffset: -1860.4512078053951;
//   }

//   100% {
//     stroke-dashoffset: -1860.4512078053951;
//   }
// }

@keyframes circleFill {
  0% {
    stroke-dashoffset: 1860.4512078053951;
    // transform: rotate(0);
  }

  50% {
    stroke-dashoffset: 0;
    // transform: rotate(180deg);
  }

  100% {
    stroke-dashoffset: -1860.4512078053951;
    // transform: rotate(0);
  }
}