// Native scrollbar aligned with the Base UI ScrollArea used by lists.
// Imported from app/layout.tsx with the rest of the global styles.

$scrollbar-thumb: var(--border);

.agent-desk-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: $scrollbar-thumb transparent;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 999px;
    background: $scrollbar-thumb;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: $scrollbar-thumb;
    background-clip: padding-box;
  }
}