$osd_scrollbar_outline_color: transparentize(black, .5);

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

  > 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;
      background-color: gtkalpha(currentColor, .2);

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

      &: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 {
        outline: 1px solid gtkalpha($scrollbar_outline_color, .6);

        .osd & {
          outline: 1px solid gtkalpha($osd_scrollbar_outline_color, .6);
        }

        outline-offset: -6px;
      }
    }

    &:not(.hovering) > range > trough > slider {
      min-width: 3px;
      min-height: 3px;
      outline-color: gtkalpha($scrollbar_outline_color, .35);

      .osd & {
        outline-color: gtkalpha($osd_scrollbar_outline_color, .35);
      }
    }

    &.hovering > range > trough {
      background-color: gtkalpha(currentColor, .1);
    }

    &.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, &:active {
      background-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);
    }
  }

  &.undershoot-top {
    @include undershoot(top);
  }

  &.undershoot-bottom {
    @include undershoot(bottom);
  }

  &.undershoot-start {
    &:dir(ltr) { @include undershoot(left); }
    &:dir(rtl) { @include undershoot(right); }
  }

  &.undershoot-end {
    &:dir(ltr) { @include undershoot(right); }
    &:dir(rtl) { @include undershoot(left); }
  }
}

toolbarview.undershoot-top scrolledwindow {
  @include undershoot(top);
}

toolbarview.undershoot-bottom scrolledwindow {
  @include undershoot(bottom);
}

.about {
  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top, $style: frame);
  }
  
  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom, $style: frame);
  }
}
