@use '../../colors';

.root {
  max-width: 100%;
  max-height: 100%;
}

.theme:global(.os-scrollbar) {
  --os-size: 12px;
  --os-padding-axis: 4px;
  --os-padding-perpendicular: 0;

  --os-track-border: none;
  --os-track-border-hover: none;
  --os-track-border-active: none;
  --os-track-border-radius: 0;
  --os-track-bg: none;
  --os-track-bg-hover: none;
  --os-track-bg-active: none;

  --os-handle-border-radius: 2px;
  --os-handle-bg: #{colors.$basic-gray12};
  --os-handle-bg-hover: #{colors.$basic-gray24};
  --os-handle-bg-active: #{colors.$basic-gray24};
  --os-handle-border: none;
  --os-handle-border-hover: none;
  --os-handle-border-active: none;
  --os-handle-min-size: 33px;
  --os-handle-max-size: none;
  --os-handle-perpendicular-size: 4px;
  --os-handle-perpendicular-size-hover: 4px;
  --os-handle-perpendicular-size-active: 4px;
  --os-handle-interactive-area-offset: 0;
}

.theme :global(.os-scrollbar-handle) {
  transition:
    opacity 0.15s,
    background-color 0.15s,
    border-color 0.15s;
}

.theme:global(.os-scrollbar-horizontal) :global(.os-scrollbar-handle) {
  margin-bottom: 4px;
}

.theme:global(.os-scrollbar-vertical) :global(.os-scrollbar-handle) {
  margin-right: 4px;
}