/*
* A simple slider
*/
$maxSlide: 10;
@include keyframes(slider) {
  0%, 40% {
    transform: translate3d(0, 0, 0);
  }
  50%, 100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.slide {
  min-width: 100%;
  display: inline-block;
  position: relative;
  height: 100%;
  flex: 1;
  overflow:hidden;
}

.slider {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  transition: transform $globalLongEaseTime cubic-bezier(0.77, 0, 0.175, 1);
  display: flex;
}

.slide-navigation {

  display: flex;
  justify-content: center;
  list-style: none;
  margin: 2rem 0 0 0;
  padding: 0;
  label {
    font-size: $baseFontSize;
    color: lighten($grayColor, 30%);
    cursor: pointer;
    transition: color $globalMediumEaseTime ease;
    margin: 0 5px;
    > * {
      pointer-events: none;
    }
  }
}

// fix Safari/webkit bug with ~ selector, see:
// http://stackoverflow.com/questions/8320530/webkit-bug-with-hover-and-multiple-adjacent-sibling-selectors

@-webkit-keyframes bugfix {
  from { fill: 0; }
  to { fill: 0; }
}

.slide-container {
  overflow: hidden;
  -webkit-animation: bugfix infinite 1s;
  input {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
  }

  @for $i from 0 through $maxSlide {
    input {
      &:nth-of-type(#{$i+1}):checked ~ .slider {
        transform: translate3d(#{$i *100% *-1}, 0, 0);
      }

      &:nth-of-type(#{$i+1}):checked ~ .slide-navigation li:nth-of-type(#{$i+1}) label {
        color: lighten($grayColor, 15%);
      }
    }
  }
}

@media #{$mediaDesktop} {
  .slide {
    min-width: calc(50% - 10px);
    margin-right:10px;
    &:nth-child(2n) {
      margin:0 0 0 10px;
    }
  }
}