@import "compass/css3";


.sc-overlay-scroller-view {

  /* Track */
  .track {
    background: none;
    display: none;
  }

  /* Cap */
  .cap, .endcap {
    background: none;
    display: none;
  }

  /* Buttons */
  .button-top {
    background: none;
    display: none;
  }

  .button-bottom {
    background: none;
    display: none;
  }

  /* Active */
  .button-top:active {
    background: none;
    display: none;
  }

  .button-bottom:active {
    background: none;
    display: none;
  }

  /* Thumb */
  .thumb {
    @include transform(translateZ(0px));
    position: absolute;
    overflow: hidden;
  }

  .thumb-top {
    background-color: black;
    position: absolute;
  }

  .thumb-clip {
    position: absolute;
    overflow: hidden;
  }

  .thumb-inner {
    @include transform(translate3d(0px,0px,0px));
    position: absolute;
  }

  .thumb-center {
    background-color: black;
    position: absolute;
  }

  .thumb-bottom {
    background-color: black;
    position: absolute;
  }

  &.fade-out {
    // When the overlay scroller isn't visible, pass events through. This isn't
    // supported in IE < 11 (http://caniuse.com/#feat=pointer-events).
    pointer-events: none;
  }

  &.sc-vertical {

    /* Thumb */
    .thumb {
      width: 12px;
      height: 1044px;
    }

    .thumb-top {
      @include border-top-radius(4px);
      width: 7px;
      top: 0px;
      left: 3px;
      height: 10px;
    }

    .thumb-clip {
      height: 1034px;
      width: 7px;
      top: 10px;
      left: 3px;
    }

    .thumb-inner {
      left: 0px;
      top: 0px;
      width: 7px;
      height: 1034px;
    }

    .thumb-center {
      width: 7px;
      left: 0px;
      top: 0px;
      height: 1024px;
    }

    .thumb-bottom {
      @include border-bottom-radius(4px);
      width: 7px;
      top: 1024px;
      left: 0px;
      height: 10px;
    }
  }

  &.sc-horizontal {

    /* Thumb */
    .thumb {
      height: 12px;
      width: 1044px;
    }

    .thumb-top {
      @include border-left-radius(4px);
      width: 10px;
      top: 3px;
      left: 0px;
      height: 7px;
    }

    .thumb-clip {
      width: 1034px;
      height: 7px;
      left: 10px;
      top: 3px;
    }

    .thumb-inner {
      top: 0px;
      left: 0px;
      height: 7px;
      width: 1034px;
    }

    .thumb-center {
      height: 7px;
      top: 0px;
      left: 0px;
      width: 1024px;
    }

    .thumb-bottom {
      @include border-right-radius(4px);
      height: 7px;
      left: 1024px;
      top: 0px;
      width: 10px;
    }
  }

  /* Fading in & out */
  &.sc-vertical, &.sc-horizontal {

    &.fade-in {
      @include transition-duration(0.1s);
      @include transition-property(opacity);
      @include transition-timing-function(ease);
      opacity: 0.5;
    }

    &.fade-out {
      @include transition-duration(0.5s);
      @include transition-property(opacity);
      @include transition-timing-function(ease);
      opacity: 0;
    }
  }
}