// Dark, thin scrollbars matching the arena shell
@mixin arena-scrollbar($size: 6px, $horizontal: false) {
  scrollbar-width: thin;
  scrollbar-color: var(--arena-surface-04) transparent;

  &::-webkit-scrollbar {
    @if $horizontal {
      height: $size;
      width: auto;
    } @else {
      width: $size;
      height: $size;
    }
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 2px;
    margin-inline: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--arena-surface-04);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: padding-box;

    &:hover {
      background: color-mix(in srgb, var(--arena-accent) 55%, var(--arena-surface-04));
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    &:active {
      background: var(--arena-accent);
      border: 2px solid transparent;
      background-clip: padding-box;
    }
  }

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

  &::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

* {
  @include arena-scrollbar(8px);
}

.h-scroll,
[data-h-scroll] {
  @include arena-scrollbar(5px, $horizontal: true);
}

.sidebar-nav {
  @include arena-scrollbar(5px);
}

.arena-main {
  @include arena-scrollbar(8px);
}
