// The scrollbar arrow glyphs are drawn as stacked gradient stripes sized in
// multiples of --window-scrollbar-arrow-size (scrollbar size / 4, from theme).
$sb-arrow: var(--window-scrollbar-arrow-size);
$sb-arrow-half: calc(var(--window-scrollbar-arrow-size) / 2);
$sb-arrow-1-5x: calc(var(--window-scrollbar-arrow-size) * 1.5);
$sb-arrow-2x: calc(var(--window-scrollbar-arrow-size) * 2);

@mixin scrollbars() {
  // Firefox / standards fallback: WebKit gets the fully-styled platinum
  // scrollbar below; Firefox (and any engine without ::-webkit-scrollbar)
  // at least picks up the theme-accent thumb and inset track colors.
  // Guarded: a non-auto scrollbar-color/width makes Chrome 121+ and
  // Safari 26.2+ ignore all ::-webkit-scrollbar styling, so these
  // properties must never reach engines that support the pseudos.
  @supports not selector(::-webkit-scrollbar) {
    & {
      scrollbar-width: auto;
      scrollbar-color: var(--color-theme-03) var(--color-system-04);
    }
  }

  &::-webkit-scrollbar {
    width: var(--window-scrollbar-size);
    height: var(--window-scrollbar-size);
  }

  &::-webkit-scrollbar-button:start:vertical,
  &::-webkit-scrollbar-button:start:horizontal {
    display: block;
    top: var(--window-scrollbar-size);
    background-color: var(--color-system-02);
    width: var(--window-scrollbar-size);
    height: var(--window-scrollbar-size);
  }

  &::-webkit-scrollbar-button:start:vertical {
    border-left: var(--window-border-size) solid var(--color-black);
    border-right: var(--window-border-size) solid var(--color-black);
    border-bottom: var(--window-border-size) solid var(--color-black);
  }

  &::-webkit-scrollbar-button:start:vertical:decrement {
    background: linear-gradient(transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow-2x} #{$sb-arrow} no-repeat,
    linear-gradient(transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow-1-5x} #{$sb-arrow} no-repeat,
    linear-gradient(transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow-half} #{$sb-arrow} no-repeat,
    var(--color-system-02);
    width: var(--window-scrollbar-size);
    height: var(--window-scrollbar-size);
  }

  &::-webkit-scrollbar-button:start:vertical:decrement:active {
    background: linear-gradient(transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow-2x} #{$sb-arrow} no-repeat,
    linear-gradient(transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow-1-5x} #{$sb-arrow} no-repeat,
    linear-gradient(transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow-half} #{$sb-arrow} no-repeat,
    var(--color-system-06);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-07),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-system-07);
  }

  &::-webkit-scrollbar-button:start:vertical:increment {
    background: linear-gradient(0deg, transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow-2x} #{$sb-arrow} no-repeat,
    linear-gradient(0deg, transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow-1-5x} #{$sb-arrow} no-repeat,
    linear-gradient(0deg, transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(0deg, var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow-half} #{$sb-arrow} no-repeat,
    var(--color-system-02);
    border-bottom: none;
    width: var(--window-scrollbar-size);
    height: var(--window-scrollbar-size);
  }

  &::-webkit-scrollbar-button:start:vertical:increment:active {
    background: linear-gradient(0deg, transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow-2x} #{$sb-arrow} no-repeat,
    linear-gradient(0deg, transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow-1-5x} #{$sb-arrow} no-repeat,
    linear-gradient(0deg, transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow-half} #{$sb-arrow} no-repeat,
    var(--color-system-06);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-06),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-system-07);
  }

  &::-webkit-scrollbar-button:start:horizontal {
    border-top: var(--window-border-size) solid var(--color-black);
    border-bottom: var(--window-border-size) solid var(--color-black);
    border-right: var(--window-border-size) solid var(--color-black);
  }

  &::-webkit-scrollbar-button:start:horizontal:decrement {
    background: linear-gradient(90deg, transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-2x} no-repeat,
    linear-gradient(90deg, transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-1-5x} no-repeat,
    linear-gradient(90deg, transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(90deg, var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-half} no-repeat,
    var(--color-system-02);
    width: var(--window-scrollbar-size);
    height: var(--window-scrollbar-size);
  }

  &::-webkit-scrollbar-button:start:horizontal:decrement:active {
    background: linear-gradient(90deg, transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-2x} no-repeat,
    linear-gradient(90deg, transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-1-5x} no-repeat,
    linear-gradient(90deg, transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow-half} #{$sb-arrow} no-repeat,
    var(--color-system-06);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-06),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-system-07);
  }

  &::-webkit-scrollbar-button:start:horizontal:increment {
    background: linear-gradient(270deg, transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-2x} no-repeat,
    linear-gradient(270deg, transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-1-5x} no-repeat,
    linear-gradient(270deg, transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(270deg, var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-half} no-repeat,
    var(--color-system-02);
    border-right: none;
    width: var(--window-scrollbar-size);
    height: var(--window-scrollbar-size);
  }

  &::-webkit-scrollbar-button:start:horizontal:increment:active {
    background: linear-gradient(270deg, transparent 75%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-2x} no-repeat,
    linear-gradient(270deg, transparent 50%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow-1-5x} no-repeat,
    linear-gradient(270deg, transparent 25%, var(--color-black) 0) 50%/#{$sb-arrow} #{$sb-arrow} no-repeat,
    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/#{$sb-arrow-half} #{$sb-arrow} no-repeat,
    var(--color-system-06);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-06),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-system-07);
  }

  &::-webkit-scrollbar-track {
    background-color: var(--color-system-04);
    border: var(--window-border-size) solid var(--color-black);
  }

  &::-webkit-scrollbar-track:vertical {
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-06),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * 2) 0 var(--color-system-03),
    inset calc(var(--window-border-size) * 2) 0 0 rgba(0, 0, 0, 0.25),
    inset calc(var(--window-border-size) * -2) 0 0 rgba(255, 255, 255, 0.25);
  }

  &::-webkit-scrollbar-track:horizontal {
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-06),
    inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * -1) 0 var(--color-system-03),
    inset calc(var(--window-border-size) * 2) 0 0 rgba(0, 0, 0, 0.25),
    inset calc(var(--window-border-size) * -2) 0 0 rgba(255, 255, 255, 0.25);
  }

  &::-webkit-scrollbar-corner {
    border-top: var(--window-border-size) solid var(--color-black);
    border-left: var(--window-border-size) solid var(--color-black);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-white);
    background: var(--color-system-03);
  }

  &::-webkit-scrollbar {
    margin-bottom: 100px;
  }
}

@mixin scrollbars-inactive() {
  // Firefox / standards fallback for the inactive (blurred window) state:
  // flatten the thumb into the track using neutral system greys.
  // Guarded for the same reason as in scrollbars() above.
  @supports not selector(::-webkit-scrollbar) {
    & {
      scrollbar-color: var(--color-system-04) var(--color-system-02);
    }
  }

  &::-webkit-scrollbar-button:start:vertical,
  &::-webkit-scrollbar-button:start:horizontal {
    background-color: var(--color-system-02);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-white),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 rgba(255, 255, 255, 0.5);
  }

  &::-webkit-scrollbar-button:start:vertical {
    background: var(--color-system-02) !important;
    border: none !important;
  }

  &::-webkit-scrollbar-button:start:vertical:decrement {
    background: var(--color-system-02) !important;
    border: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  &::-webkit-scrollbar-button:start:vertical:increment {
    background: var(--color-system-02) !important;
    border: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  &::-webkit-scrollbar-button:start:horizontal {
    border: none !important;
    box-shadow: none !important;
  }

  &::-webkit-scrollbar-button:start:horizontal:decrement {
    background: var(--color-system-02) !important;
    border: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  &::-webkit-scrollbar-button:start:horizontal:increment {
    background: var(--color-system-02) !important;
    border: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  &::-webkit-scrollbar-track {
    background: var(--color-system-02) !important;
    border: var(--window-border-size) solid var(--color-system-06) !important;
  }

  &::-webkit-scrollbar-track:vertical {
    box-shadow: none !important;
  }

  &::-webkit-scrollbar-track:horizontal {
    box-shadow: none !important;
  }

  &::-webkit-scrollbar-corner {
    border: none !important;
    box-shadow: none !important;
  }

  &::-webkit-scrollbar-thumb {
    display: none !important;
  }
}

@mixin scrollbars-themed() {
  &::-webkit-scrollbar-thumb {
    min-width: var(--window-control-size);
    min-height: var(--window-control-size);
    border: var(--window-border-size) solid var(--color-theme-07);
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-02),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-theme-04) !important;
  }

  &::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(
                    transparent 12.5%,
                    var(--color-theme-05) 0,
                    var(--color-theme-05) 25%,
                    transparent 0,
                    transparent 37.5%,
                    var(--color-theme-05) 0,
                    var(--color-theme-05) 50%,
                    transparent 0,
                    transparent 62.5%,
                    var(--color-theme-05) 0,
                    var(--color-theme-05) 75%,
                    transparent 0,
                    transparent 87.5%,
                    var(--color-theme-05) 0
    ) 50%/7px 8px no-repeat,
    linear-gradient(
                    var(--color-theme-01) 12.5%,
                    transparent 0,
                    transparent 25%,
                    var(--color-theme-01) 0,
                    var(--color-theme-01) 37.5%,
                    transparent 0,
                    transparent 50%,
                    var(--color-theme-01) 0,
                    var(--color-theme-01) 62.5%,
                    transparent 0,
                    transparent 75%,
                    var(--color-theme-01) 0,
                    var(--color-theme-01) 87.5%,
                    transparent 0
    ) 49%/7px 8px no-repeat,
    var(--color-theme-03);
  }

  &::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(
                    90deg,
                    transparent 12.5%,
                    var(--color-theme-05) 0,
                    var(--color-theme-05) 25%,
                    transparent 0,
                    transparent 37.5%,
                    var(--color-theme-05) 0,
                    var(--color-theme-05) 50%,
                    transparent 0,
                    transparent 62.5%,
                    var(--color-theme-05) 0,
                    var(--color-theme-05) 75%,
                    transparent 0,
                    transparent 87.5%,
                    var(--color-theme-05) 0
    ) 50%/8px 7px no-repeat,
    linear-gradient(
                    90deg,
                    var(--color-theme-01) 12.5%,
                    transparent 0,
                    transparent 25%,
                    var(--color-theme-01) 0,
                    var(--color-theme-01) 37.5%,
                    transparent 0,
                    transparent 50%,
                    var(--color-theme-01) 0,
                    var(--color-theme-01) 62.5%,
                    transparent 0,
                    transparent 75%,
                    var(--color-theme-01) 0,
                    var(--color-theme-01) 87.5%,
                    transparent 0
    ) center 49%/8px 7px no-repeat,
    var(--color-theme-03);
  }
}