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 { border-bottom: 1px solid $borders_color; }
  &.bottom { border-top: 1px solid $borders_color; }
  &.left { border-right: 1px solid $borders_color; }
  &.right { border-left: 1px solid $borders_color; }

  > 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: $scrollbar_slider_color;
    transition: $_scrollbar_transition;

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

    &:hover:active { background-color: $scrollbar_slider_active_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) {
      border-color: transparent;
      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);
    }
  }
}
