@use '@xui/theme-core';

@mixin theme() {
  * {
    @include regular();
  }

  .x-scrollbar-thin {
    @include thin();
  }
}

@mixin regular() {
  &::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-bg-tertiary);
  }

  &::-webkit-scrollbar-track {
    background-color: var(--color-bg-secondary);
  }

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

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

  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
    border: 4px solid transparent;
    background-clip: padding-box;

    @include theme-core.border-radius(8px);
  }

  // Firefox
  scrollbar-color: var(--color-bg-tertiary) var(--color-bg-secondary);
}

@mixin thin() {
  @include regular();

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background-color: transparent;
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: var(--color-bg-tertiary);
  }

  // Firefox
  scrollbar-width: thin;
}