/* Scrollbars */

@use "../../../../theme";
@use "../../../../theme-color";

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: theme-color.disabled-stroke(theme-color.$on-surface);
  }

  StButton#vhandle,
  StButton#hhandle {
    transition-duration: theme.$state-duration;
    margin: 4px;
    // would be nice to margin or at least to transparent
    // border: 4px solid transparent;
    border-radius: (8px / 2);
    background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);

    &:hover {
      background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
    }

    &:active {
      background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
    }
  }
}

@mixin color($color) {
  StBin#trough {
    background-color: theme-color.disabled-stroke($color);
  }

  StButton#vhandle,
  StButton#hhandle {
    background-color: theme-color.scrollbar-thumb($color);

    &:hover {
      background-color: theme-color.scrollbar-thumb($color, "hover");
    }

    &:active {
      background-color: theme-color.scrollbar-thumb($color, "pressed");
    }
  }
}
