.scrollbar-thumb(@thumb: var(--color-border-3); @thumb-hover: var(--color-text-3)) {
  scrollbar-width: thin;
  scrollbar-color: @thumb transparent;

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

  &::-webkit-scrollbar-thumb {
    background-color: @thumb;
    border-radius: 6px;
    border: 1px solid transparent;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: @thumb-hover;
  }

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

// 横向滚动条
.scrollbar-x(@size: 6px; @thumb: var(--color-border-3); @thumb-hover: var(--color-text-3)) {
  .scrollbar-thumb(@thumb; @thumb-hover);

  &::-webkit-scrollbar {
    height: @size;
  }
}

// 纵向滚动条
.scrollbar-y(@size: 6px; @thumb: var(--color-border-3); @thumb-hover: var(--color-text-3)) {
  .scrollbar-thumb(@thumb; @thumb-hover);

  &::-webkit-scrollbar {
    width: @size;
  }
}

// 横向 + 纵向
.scrollbar(@size: 6px; @thumb: var(--color-border-3); @thumb-hover: var(--color-text-3)) {
  .scrollbar-thumb(@thumb; @thumb-hover);

  &::-webkit-scrollbar {
    width: @size;
    height: @size;
  }
}