$osd_scrollbar_outline_color: transparentize(black, .5);

scrollbar {
  $_slider_min_length: 40px;
  $_slider_width: 8px;
  $_scrollbar_transition: all 200ms linear;

  background-color: $view_bg_color;
  color: $view_fg_color;

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

  > range > trough {
    margin: 7px;
    transition: $_scrollbar_transition;
    border-radius: 10px;

    > slider {
      min-width: $_slider_width;
      min-height: $_slider_width;
      margin: -6px;
      border: 6px solid transparent;
      border-radius: 10px;
      background-clip: padding-box;
      transition: $_scrollbar_transition;

      @if $contrast == 'high' {
        background-color: gtkalpha(currentColor, .4);

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

        &:hover:active { background-color: currentColor; }
      } @else {
        background-color: gtkalpha(currentColor, .2);

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

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

      &:disabled { opacity: 0; }
    }
  }

  &.horizontal > range > trough {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  &.vertical > range > trough {
    margin-left: 6px;
    margin-right: 6px;
  }

  &.overlay-indicator {
    background: none;
    color: inherit;
    box-shadow: none;
    padding: 0;

    > range > trough {
      outline: 1px solid transparent;

      > slider {
        @if $contrast == 'high' {
          outline: 1px solid $scrollbar_outline_color;
        } @else {
          outline: 1px solid gtkalpha($scrollbar_outline_color, .4);
        }

        .osd & {
          @if $contrast == 'high' {
            outline: 1px solid $osd_scrollbar_outline_color;
          } @else {
            outline: 1px solid gtkalpha($osd_scrollbar_outline_color, .4);
          }
        }

        outline-offset: -6px;
      }
    }

    &:not(.hovering) > range > trough > slider {
      min-width: 3px;
      min-height: 3px;

      @if $contrast == 'high' {
        outline-color: gtkalpha($scrollbar_outline_color, .6);
      } @else {
        outline-color: gtkalpha($scrollbar_outline_color, .35);
      }

      .osd & {
        @if $contrast == 'high' {
          outline-color: gtkalpha($osd_scrollbar_outline_color, .6);
        } @else {
          outline-color: gtkalpha($osd_scrollbar_outline_color, .35);
        }
      }
    }

    &.hovering > range > trough {
      @if $contrast == 'high' {
        outline-color: gtkalpha($scrollbar_outline_color, .6);
        background-color: gtkalpha(currentColor, .25);
      } @else {
        outline-color: gtkalpha($scrollbar_outline_color, .35);
        background-color: gtkalpha(currentColor, .1);
      }

      .osd & {
        @if $contrast == 'high' {
          outline-color: gtkalpha($osd_scrollbar_outline_color, .6);
        } @else {
          outline-color: gtkalpha($osd_scrollbar_outline_color, .35);
        }
      }
    }

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

      &.hovering > range > trough > slider {
        min-height: $_slider_width;
      }

      &:not(.hovering) > range > trough {
        margin-top: 3px;
        margin-bottom: 3px;
      }
    }

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

      &.hovering > range > trough > slider {
        min-width: $_slider_width;
      }

      &:not(.hovering) > range > trough {
        margin-left: 3px;
        margin-right: 3px;
      }
    }
  }

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

  > range.fine-tune > trough > slider {
    &, &:hover, &:hover:active {
      background-color: if($contrast == 'high', $accent_color, gtkalpha($accent_color, .6));
    }
  }
}

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: linear-gradient(to bottom right, $border_color 1px, $view_bg_color 1px);

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