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

  > range > trough {
    margin: 9px;
    transition: $_scrollbar_transition;
    border-radius: 99px;

    > slider {
      min-width: $_slider_width;
      min-height: $_slider_width;
      margin: -8px;
      border: 8px solid transparent;
      border-radius: 99px;
      background-clip: padding-box;
      transition: $_scrollbar_transition;
      background-color: color-mix(in srgb, currentColor 20%, transparent);

      &:hover { background-color: color-mix(in srgb, currentColor 40%, transparent); }

      &:active { background-color: color-mix(in srgb, currentColor 60%, transparent); }

      @media (prefers-contrast: more) {
        background-color: color-mix(in srgb, currentColor 40%, transparent);

        &:hover { background-color: color-mix(in srgb, currentColor 60%, transparent); }

        &:active { background-color: currentColor; }
      }

      &:disabled { opacity: 0; }
    }
  }

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

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

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

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

      > slider {
        outline: 1px solid color-mix(in srgb, var(--scrollbar-outline-color) 60%, transparent);
        outline-offset: -8px;

        @media (prefers-contrast: more) {
          outline: 1px solid var(--scrollbar-outline-color);
        }
      }
    }

    &:not(.hovering) > range > trough > slider {
      min-width: 3px;
      min-height: 3px;
      outline-color: color-mix(in srgb, var(--scrollbar-outline-color) 35%, transparent);

      @media (prefers-contrast: more) {
        outline-color: color-mix(in srgb, var(--scrollbar-outline-color) 60%, transparent);
      }
    }

    &.hovering > range > trough {
      background-color: color-mix(in srgb, currentColor 10%, transparent);

      @media (prefers-contrast: more) {
        background-color: color-mix(in srgb, currentColor 25%, transparent);
      }
    }

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

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

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

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

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

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

  &.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: color-mix(in srgb, var(--accent-color) 60%, transparent);

      @media (prefers-contrast: more) {
        background-color: var(--accent-color);
      }
    }
  }
}

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