@mixin scrollbar() {
  scrollbar {
    background-color: transparent;
    border: 0 none transparent;
    margin: 0;
    padding: 0;

    @each $w,$a in ('horizontal','horz'),
                      ('vertical','vert') {

      &.#{$w} { background: url("assets/trough-scrollbar-#{$a}.png"); }

      // slider
      &.#{$w} slider {
        border: 5px solid transparent;
        border-image: url("assets/scrollbar-slider-#{$a}.png");
        border-image-slice: 5 5 5 5;
        border-image-repeat: stretch;
        background: url("assets/handle-#{$a}.png") no-repeat center center,
                    url("assets/slider-bg-#{$a}.png");

        &:hover {
          border-image: url("assets/scrollbar-slider-#{$a}-hover.png");
          border-image-slice: 5 5 5 5;
          border-image-repeat: stretch;
          background: url("assets/handle-#{$a}-hover.png") no-repeat center center,
                      url("assets/slider-bg-#{$a}-hover.png");
        }

        &:hover:active {
          border-image: url("assets/scrollbar-slider-#{$a}-active.png");
          border-image-slice: 5 5 5 5;
          border-image-repeat: stretch;
          background: url("assets/handle-#{$a}-active.png") no-repeat center center,
                      url("assets/slider-bg-#{$a}-active.png");
        }
      }
    }

    &.horizontal slider {
      min-width: 8px;
      min-height: 7px;
    }

    &.vertical slider {
      min-width: 7px;
      min-height: 8px;
    }

    &.fine-tune {
      slider {
        margin: 1px;
        min-width: 5px;
        min-height: 5px;
      }
    }

    // button styling
    button {
      &:active, &:hover, &:disabled, & {
        padding: 0;
        min-width: 17px;
        min-height: 17px;
        border: none;
        border-radius: 0;
        box-shadow: none;

        -gtk-icon-source: none;
      }
    }

    @each $scroll_orient,$step_end,$step_orient in ('horizontal','up','left'),
                                                   ('horizontal','down','right'),
                                                   ('vertical','up','top'),
                                                   ('vertical','down','bottom') {
	  &.#{$scroll_orient} button.#{$step_end} {
	    background: url("assets/#{$step_orient}-stepper.png");

        &:hover { background: url("assets/#{$step_orient}-stepper-hover.png"); }

        &:hover:active { background: url("assets/#{$step_orient}-stepper-active.png"); }
	    }
    }
  }
}
