/**************
 * Scrollbars *
 **************/

scrollbar {

  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;

  background-color: w_color(normal);
  border-width: 3px 0px;
  border-color: w_color(normal);
  margin: 0px;

  button {
  min-width: 14px;
  min-height: 14px;
  margin: 0px;
  padding: 0px 3px;
	border: none;
  border-radius: 0px;
  background-image: none;
  background-color: w_color(normal);
  color: b_color(text);
  box-shadow: none;
	&:hover {
    border: none;
    background-image: none;
    background-color: w_color(normal);
		color: b_color(hover);
		}
  &:active,
  &:active:hover {
    border: none;
    background-image: none;
    background-color: w_color(normal);
		color: b_color(active);
  }
	&:disabled {
    border: none;
    background-color: w_color(normal);
    background-image: none;
    color: insensitive(b_color(text));
    }
  &:backdrop {
    @extend %undecorated_button;
    color: backdrop(b_color(text));
    &:disabled {color: backdrop(insensitive(b_color(text)));}
    @extend %undecorated_button;
    }
	}

  // Overlay Scrollbars
  &.dragging,                                                             // if this isn't set, the scrollbars don't update their size correctly
  &.hovering { opacity: 0.9910; }                                          // probably a gtk bug
  &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; }     //


  &.overlay-indicator:not(.dragging):not(.hovering) {
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
   background: none;

    slider {
      min-width: 4px;
      margin: 2px;
      border: none;
      border-radius: 2px;
      background-color: $scrollbar_color;
      &:backdrop { background-color: backdrop($scrollbar_color); }
    }

    trough {
      min-width: 4px;
      min-height: 4px;
      border: none;
      background: none;
      box-shadow: none;
    }

    &.horizontal slider { min-height: 4px;}
  }

  // FIXME firefox and libreoffice
  trough {
    //margin: 0px;
    min-width: 16px;
    min-height: 16px;
    border: 0px solid transparent;
    border-radius: 8px;
    background-color: $trough_color;
    box-shadow: inset 0px 0px 0px 3px w_color(normal);

  }
  slider {
    //margin: 0px;
    min-width: 10px;
    min-height: 30px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip:padding-box;
    background-color: $scrollbar_color;
    &:hover { background-color: b_color(hover); }
    &:active { background-color: b_color(active);}
    &:disabled { background-color: insensitive($scrollbar_color); }
    &:backdrop { background-color: backdrop($scrollbar_color); }
    &:backdrop:disabled { background-color: backdrop(insensitive($scrollbar_color)); }
  }
  &.horizontal slider {
    min-width: 30px;
    min-height: 10px;
  }

  // button icons
  &.vertical {
    button {
      &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }

      &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
    }
  }

  &.horizontal {
    button {
      &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }

      &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
    }
  }
}
