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

::-webkit-scrollbar-button {
  width: 12px;
  height: 12px;
  margin: 2px;
}

::-webkit-scrollbar-thumb {
  border: 6px none var(--a-base-5);
  background: var(--a-base-7);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--a-base-4);
}

::-webkit-scrollbar-thumb:active {
  background: var(--a-base-2);
}

::-webkit-scrollbar-track {
  border: 6px none var(--a-base-9);
  background: var(--a-base-9);
  border-radius: 10px;
}

::-webkit-scrollbar-track:hover {
  background: var(--a-base-8);
}

::-webkit-scrollbar-track:active {
  background: var(--a-base-7);
}

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

// variants
.apos-primary-scrollbar {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-button {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-thumb {
    border: 6px none var(--a-background-primary);
    background: var(--a-primary);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--a-primary-dark-10);
  }

  ::-webkit-scrollbar-thumb:active {
    background: var(--a-primary-dark-15);
  }

  ::-webkit-scrollbar-track {
    border: 6px none var(--a-base-10);
    background: var(--a-base-10);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-track:hover {
    background: var(--a-base-8);
  }

  ::-webkit-scrollbar-track:active {
    background: var(--a-base-6);
  }

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