@import url(http://fonts.googleapis.com/css?family=Carter+One);
$font-family: "Carter One";

* {
 @include box-sizing(border-box);
}
body {
  @include linear-gradient(0deg, #edd 50%, transparent 50%);
  background-color: #fff;
  background-size: 10px 10px;
  font-size: rem(16);
  overflow: hidden;
}

.slider {
  max-width: 360px;
  margin: 20px auto;
  position: relative;
  height: 360px;

  
  &-item {
    @include transition(transform 0.5s $ease-out-back, opacity 0.2s);
    @include calc(padding, "5% + 15px");
    @include position(absolute,0 0 0 0);
    border-top: 8px solid rgba(0,0,0,0.2);
    text-align: center;
    border-radius: 50%;
    box-shadow: 2px 2px 5px #333;
    
    &:nth-child(1) {
      background-color: #944;
    }
    // left-items
    &:nth-child(2) {
      @include transform-origin(left top);
      @include transform(rotate(90deg));
      background-color: #446;
      opacity: 0;
    }
    // right-items
    &:nth-child(3) {
      @include transform-origin(right top);
      @include transform(rotate(-90deg));
      background-color: #464;
      opacity: 0;
    }
    
    &.active {
      @include transform(rotate(0));
      opacity: 1;
    }
    
    &--caption {
      font-size: rem(28);
      font-family: $font-family;
      line-height: 1.2;
      color: #111;
      margin-bottom: 20px;
    }
    
    &--thumb {
      max-width: 225px;
      height: 150px;
      background-color: rgba(0,0,0,0.3);
      margin: 20px auto;
    }
    
    &--txt {
      display: inline-block;
      background-color: #333;
      line-height: 1;
    }
  }
  
  &-prev,&-next {
    $size: 48px;
    @include size($size);
    @include position(absolute,50% null null null);
    margin-top: -24px;
    display: block;
    cursor: pointer;
    
    &:before {
      content: '';
      @include position(absolute,16px);
      @include transition(transform 0.2s ease);
      color: rgba(0,0,0,0.3);
    }
    
    &.active {
      @include animation(animation_slider-prev 0.8s ease);
      @include keyframes(animation_slider-prev) {
        0%,75% { opacity: 0; }
        100% { opacity: 1; }
      }
    }
  }
  
  &-prev {
    @include transform(rotate(-45deg));
    left: 0px;
    
    &:before {
      @include border-width(5px 0 0 5px);
      @include border-style(solid null null solid);
    }
    
    &.active {
      @include transform(rotate(135deg));
    }
  }
  
  &-next {
    @include transform(rotate(45deg));
    right: 0px;
    
    &:before {
      @include border-width(5px 5px null null);
      @include border-style(solid solid null null);
    }
    
    &.active {
      @include transform(rotate(-135deg));
    }
  }
}