/* Track */ $theme.sc-scroller-view.sc-horizontal {

.track {
  @include slice("track_and_arrows.png", $repeat: repeat-x, $width: 1, $left: 16);
        position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
}

.cap {
  @include slice("track_and_arrows.png", $width: 16);
      position: absolute;
      height: 14px;
      width: 16px;
      left: 0;
}

/* Buttons */
.button-left, .button-top {
  @include slice("track_and_arrows.png", $right: 15, $width: 26);
        position: absolute;
      width: 26px;
  height: 14px;
  right: 15px;
}

.button-right, .button-bottom {
  @include slice("track_and_arrows.png", $right: 0, $width: 15);
      position: absolute;
      width: 15px;
  height: 14px;
  right: 0;
}

/* Active */
.button-left:active, .button-top:active,
.button-top.active, .button-left.active {
        @include slice("track_and_arrows_active.png", $right: 15, $width: 26);
}

.button-right:active, .button-bottom:active,
.button-right.active, .button-bottom.active  {
      @include slice("track_and_arrows_active.png", $right: 0, $width: 15);
}

/* Thumb */
.thumb {
      position: absolute;
}

.thumb-center {
  @include slice("thumb.png", $repeat: repeat-x, $left: 10, $width: 1);
      position: absolute;
      height: 14px;
      left: 10px;
      right: 8px; /* hack to account for a different cap length than is hard-coded in;
      we need a render delegate here pretty badly. */
}

.thumb-left, .thumb-top {
  @include slice("thumb.png", $width: 10);
      position: absolute;
      height: 14px;
      left: 0;
      width: 10px;
}

.thumb-right, .thumb-bottom {
  @include slice("thumb.png", $width: 10, $right: 0);
      position: absolute;
      height: 14px;
      right: -2px; /* hack to account for a different cap length than is hard-coded in;
      we need a render delegate here pretty badly. */
      width: 10px;
}

}