.sbb-scrollbar,
.sbb-scrollbar-negative,
.sbb-scrollbar-thick,
.sbb-scrollbar-thick-negative,
.sbb-scrollbar-track-visible,
.sbb-scrollbar-negative-track-visible,
.sbb-scrollbar-thick-track-visible,
.sbb-scrollbar-thick-negative-track-visible {
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
}
.sbb-scrollbar::-webkit-scrollbar,
.sbb-scrollbar-negative::-webkit-scrollbar,
.sbb-scrollbar-thick::-webkit-scrollbar,
.sbb-scrollbar-thick-negative::-webkit-scrollbar,
.sbb-scrollbar-track-visible::-webkit-scrollbar,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar {
  width: var(--sbb-scrollbar-width);
  height: var(--sbb-scrollbar-width);
  background-color: var(--sbb-scrollbar-track-color, transparent);
}
.sbb-scrollbar::-webkit-scrollbar-corner,
.sbb-scrollbar-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-thick::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
  background-color: var(--sbb-scrollbar-track-color, transparent);
}
.sbb-scrollbar::-webkit-scrollbar-thumb,
.sbb-scrollbar-negative::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb,
.sbb-scrollbar-track-visible::-webkit-scrollbar-thumb,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick-negative-track-visible::-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;
}
.sbb-scrollbar::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-negative::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-track-visible::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb:hover {
  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
}
.sbb-scrollbar::-webkit-scrollbar-button, .sbb-scrollbar::-webkit-scrollbar-corner,
.sbb-scrollbar-negative::-webkit-scrollbar-button,
.sbb-scrollbar-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-thick::-webkit-scrollbar-button,
.sbb-scrollbar-thick::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-button,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
  display: none;
}
@supports not selector(::-webkit-scrollbar) {
  .sbb-scrollbar,
  .sbb-scrollbar-negative,
  .sbb-scrollbar-thick,
  .sbb-scrollbar-thick-negative,
  .sbb-scrollbar-track-visible,
  .sbb-scrollbar-negative-track-visible,
  .sbb-scrollbar-thick-track-visible,
  .sbb-scrollbar-thick-negative-track-visible {
    scrollbar-width: var(--sbb-scrollbar-width-firefox);
    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
  }
}

.sbb-scrollbar {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-negative {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-thick {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-thick-negative {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-track-visible {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
}

.sbb-scrollbar-negative-track-visible {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
}

.sbb-scrollbar-thick-track-visible {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
}

.sbb-scrollbar-thick-negative-track-visible {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
}