/**
 * slider-navigation-sides
 */

.slider-navigation-sides {
  cursor: none;
  position: absolute;
  z-index: @index-top;
  top: 0;
  height: 100%;
  color: @black;
  // animation
  .slider-navigation-sides-btn > * {
    display: block;
    transition: opacity @time-tiny @ease-out, transform @time-tiny @ease-in;
  }
  &:active {
    .slider-navigation-sides-btn > * {
      opacity: .75;
      transform: scale(0.8);
      transition: opacity @time-tiny @ease-in, transform @time-tiny @ease-in;
    }
  }
  // touch
  @media (hover: none) {
    width: 5rem;
  }
  // not touch
  @media (hover: hover) {
    width: 10rem;
    opacity: 0;
    transition: opacity @time-tiny @ease-out;
    &.in {
      opacity: 1;
      transition: opacity @time-tiny @ease-in;
    }
    &.out {
      opacity: 0;
      transition: opacity @time-tiny @ease-out;
    }
  }
}

.slider-navigation-sides-prev {
  left: 0;
}

.slider-navigation-sides-next {
  right: 0;
}

.slider-navigation-sides-btn {
  padding: 0;
  line-height: 0;
  font-size: 3rem;
  // touch
  @media (hover: none) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -1rem !important;
    margin-left: -1rem !important;
    .transform-none() !important;
  }
  // not touch
  @media (hover: hover) {
    .mouse-follow();
  }
}

// slider disable

.slider.xt-disable {
  .slider-navigation-sides {
    display: none;
  }
}