:root {
  --scrollbar-size: 8px;
  --scrollbar-radius: 4px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--workspace-scrollbar-thumb, rgba(255, 255, 255, 0.14));
  --scrollbar-thumb-hover: var(--workspace-scrollbar-thumb-hover, rgba(255, 255, 255, 0.28));
  --scrollbar-thumb-active: var(--workspace-scrollbar-thumb-active, #a3e9bd);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

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

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--scrollbar-radius);
  

  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}