$_scrollbar_bg_color: transparentize(black, .9);

scrollbar {
  $_slider_min_length: 40px;
  $_slider_width: 8px;
  $_scrollbar_transition: all 300ms $ease-out-quad;
  $_fine-tune_slider_border: $_slider_width - 3; //#3672

  background-color: $_scrollbar_bg_color;
  transition: $_scrollbar_transition;

  // scrollbar border
  &.top    { box-shadow: inset 0 -1px $borders_color; padding-bottom: 1px; }
  &.bottom { box-shadow: inset 0  1px $borders_color; padding-top:    1px; }
  &.left   { box-shadow: inset -1px 0 $borders_color; padding-right:  1px; }
  &.right  { box-shadow: inset  1px 0 $borders_color; padding-left:   1px; }

  > range > trough > slider {
    min-width: $_slider_width;
    min-height: $_slider_width;
    margin: -1px;
    border: 4px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
    background-color: gtkalpha(currentColor, .6);
    transition: $_scrollbar_transition;

    &:hover { background-color: gtkalpha(currentColor, .8); }

    &:hover:active { background-color: $accent_bg_color; }

    &:disabled { background-color: transparent; }
  }

  > range.fine-tune {
    > trough > slider {
      transition: none;
      min-width: $_fine-tune_slider_border+1;
      min-height: $_fine-tune_slider_border+1;
    }

    &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; }
    &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; }
  }

  &.overlay-indicator {
    &:not(.dragging):not(.hovering) {
      box-shadow: none;
      opacity: 0.4;
      background-color: transparent;

      > range > trough > slider {
        margin: 0;
        min-width: 3px;
        min-height: 3px;
        background-color: $fg_color;
        border: 1px solid if($variant == 'light', white, black);
      }

      &.horizontal {
        > range > trough > slider {
          margin: 0 2px;
          min-width: $_slider_min_length;
        }
      }

      &.vertical {
        > range > trough > slider {
          margin: 2px 0;
          min-height: $_slider_min_length;
        }
      }
    }

    &.dragging,
    &.hovering { opacity: 0.8; }
  }

  &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
  &.vertical > range > trough > slider { min-height: $_slider_min_length; }
}

scrolledwindow {
  // This is used when content is touch-dragged past boundaries.
  // draws a box on top of the content, the size changes programmatically.
  > overshoot {
    &.top {
      @include overshoot(top);
    }

    &.bottom {
      @include overshoot(bottom);
    }

    &.left {
      @include overshoot(left);
    }

    &.right {
      @include overshoot(right);
    }
  }

  > junction { // the small square between two scrollbars
    // Only color the top-left (or top right in RTL) pixel, to visually connect
    // the borders of the two scrollbars.

    background: $borders_color,
                linear-gradient(to bottom, transparent 1px, $_scrollbar_bg_color 1px),
                linear-gradient(to right, transparent 1px, $_scrollbar_bg_color 1px);

    &:dir(rtl) {
      background: $borders_color,
                  linear-gradient(to bottom, transparent 1px, $_scrollbar_bg_color 1px),
                  linear-gradient(to left, transparent 1px, $_scrollbar_bg_color 1px);
    }
  }
}
