/* Scrollbars */

StScrollView {
  &.vfade { -st-vfade-offset: 32px; }
  &.hfade { -st-hfade-offset: 32px; }
}

StScrollBar {
  padding: 0;

  StScrollView & {
    min-width: 16px;
    min-height: 16px;
  }

  StBin#trough {
    margin: 4px;
    border-radius: (8px / 2);
    background-color: $stroke-disabled;
  }

  StButton#vhandle,
  StButton#hhandle {
    transition-duration: $duration;
    margin: 4px;
    // would be nice to margin or at least to transparent
    // border: 4px solid transparent;
    border-radius: (8px / 2);
    background-color: $text-disabled;

    &:hover {
      background-color: $text2;
    }

    &:active {
      background-color: $text;
    }
  }
}

%scrollbar-on-dark {
  StBin#trough {
    background-color: on(dark, stroke-disabled);
  }

  StButton#vhandle,
  StButton#hhandle {
    background-color: on(dark, text-disabled);

    &:hover {
      background-color: on(dark, text2);
    }

    &:active {
      background-color: on(dark);
    }
  }
}