@use '../core/functions';

@mixin scrollbar-rules {
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);

  &::-webkit-scrollbar {
    // Total width
    width: var(--sbb-scrollbar-width);
    height: var(--sbb-scrollbar-width);
    background-color: var(--sbb-scrollbar-track-color, transparent);
  }

  &::-webkit-scrollbar-corner {
    background-color: var(--sbb-scrollbar-track-color, transparent);
  }

  /* Scrollbar itself */
  &::-webkit-scrollbar-thumb {
    background-color: var(--sbb-scrollbar-color, currentcolor);
    border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid
      transparent;
    border-radius: var(--sbb-border-radius-4x);
    background-clip: padding-box;

    &:hover {
      background-color: var(--sbb-scrollbar-color-hover, currentcolor);
      border-width: calc(
        0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover))
      );
    }
  }

  /* Hide button (top and bottom of the scrollbar) */
  &::-webkit-scrollbar-button,
  &::-webkit-scrollbar-corner {
    display: none;
  }

  //  Styles for Firefox.
  //  We have to use the `not` selector as Chrome supports both, the -webkit-* and the following properties.
  //  As long as possible we use the -webkit-* approach as we have more styling possibilities there.
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-width: var(--sbb-scrollbar-width-firefox);
    scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
      var(--sbb-scrollbar-track-color, transparent);
  }
}

@mixin scrollbar-variables--size-thin {
  --sbb-scrollbar-thumb-width: #{functions.px-to-rem-build(2)};
  --sbb-scrollbar-thumb-width-hover: #{functions.px-to-rem-build(4)};
  --sbb-scrollbar-width-firefox: thin;
}

@mixin scrollbar-variables--size-thick {
  --sbb-scrollbar-thumb-width: #{functions.px-to-rem-build(8)};
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
}

@mixin scrollbar-variables--color-positive {
  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
}

@mixin scrollbar-variables--color-positive-track-visible {
  --sbb-scrollbar-track-color: var(--sbb-color-cloud);
}

@mixin scrollbar-variables--color-negative {
  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
}

@mixin scrollbar-variables--color-negative-track-visible {
  --sbb-scrollbar-track-color: var(--sbb-color-iron);
}

@mixin scrollbar-variables--track-invisible {
  --sbb-scrollbar-track-color: transparent;
}

@mixin scrollbar-variables($size: thin, $negative: false, $track-visible: false) {
  @if $size == thin {
    @include scrollbar-variables--size-thin;
  } @else {
    @include scrollbar-variables--size-thick;
  }

  @if $negative {
    @include scrollbar-variables--color-negative;
  } @else {
    @include scrollbar-variables--color-positive;
  }

  @if $track-visible and $negative {
    @include scrollbar-variables--color-negative-track-visible;
  } @else if $track-visible {
    @include scrollbar-variables--color-positive-track-visible;
  } @else {
    @include scrollbar-variables--track-invisible;
  }
}

@mixin scrollbar($size: thin, $negative: false, $track-visible: false) {
  @include scrollbar-variables($size, $negative, $track-visible);
  @include scrollbar-rules;
}