/**************
 * Scrollbars *
 **************/
scrollbar {
  $_slider_min_length: 24px;

  // disable steppers
  @at-root * {
    -GtkScrollbar-has-backward-stepper: false;
    -GtkScrollbar-has-forward-stepper: false;
  }

  transition: $longer_transition;
  background-color: rgba($bg_color, 0.6);
  background-clip: $extra_background_clip;

  // scrollbar border
  &.top { border-bottom: transparent; }
  &.bottom { border-top: transparent; }
  &.left { border-right: transparent; }
  &.right { border-left: transparent; }

  // slider
  slider {
    transition: $shorter_transition, margin 0, border-width 0;
    min-width: $scrollbar_size;
    min-height: $scrollbar_size;
    border: 1px solid $bg_color;
    border-radius: $circular_radius;
    background-clip: padding-box;
    background-color: $scrollbar_color;

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

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

    &:disabled { background-color: $disabled_secondary_fg_color; }
  }

  &.fine-tune {
    slider {
      transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
      min-width: $scrollbar_size / 2;
      min-height: $scrollbar_size / 2;
    }

    &.horizontal slider { margin: $mini_padding 0; }

    &.vertical slider { margin: 0 $mini_padding; }
  }

  &.overlay-indicator {
    &:not(.dragging):not(.hovering) {
      border-color: transparent;
      background-color: transparent;

      slider {
        min-width: $scrollbar_size / 2;
        min-height: $scrollbar_size / 2;
        margin: $mini_padding;
        border: $border_size solid rgba($base_color, $lower_opacity);
      }

      button {
        min-width: $scrollbar_size / 2;
        min-height: $scrollbar_size / 2;
        margin: $mini_padding;
        border: $border_size solid rgba($base_color, $lower_opacity);
        border-radius: $circular_radius;
        background-color: $hint_fg_color;
        background-clip: padding-box;
        -gtk-icon-source: none;

        &:disabled { background-color: $disabled_secondary_fg_color; }
      }

      &.horizontal {
        slider { min-width: $_slider_min_length; }

        button { min-width: $scrollbar_size; }
      }

      &.vertical {
        slider { min-height: $_slider_min_length; }

        button { min-height: $scrollbar_size; }
      }
    }

    &.dragging,
    &.hovering { background-color: rgba($base_color, $higher_opacity); }
  }

  &.horizontal slider { min-width: $_slider_min_length; }

  &.vertical slider { min-height: $_slider_min_length; }

  // button styling
  button {
    @extend %simple_flat_button;

    min-width: $scrollbar_size * 2;
    min-height: $scrollbar_size * 2;
    padding: 0;
    border-radius: 0;
  }

  // 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'); }
    }
  }
}

