:root {
  --app-scrollbar-size: 0.5rem;
  --app-scrollbar-size-compact: 0.375rem;
  --app-scrollbar-light-track: var(--gray-300);
  --app-scrollbar-light-thumb: rgba(31, 41, 55, 0.28);
  --app-scrollbar-light-thumb-hover: rgba(31, 41, 55, 0.48);
  --app-scrollbar-dark-track: transparent;
  --app-scrollbar-dark-thumb: rgba(255, 255, 255, 0.28);
  --app-scrollbar-dark-thumb-hover: rgba(255, 255, 255, 0.42);
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-light-thumb) var(--app-scrollbar-light-track);
}

.scrollbar-theme-dark,
.sidebar-content,
.nav-sidebar,
.dropdown-menu-dark,
.dropdown-menu-dark .dropdown-menu-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-dark-thumb) var(--app-scrollbar-dark-track);
}

.nav-tabs-responsive,
.scrollbar-hidden {
  scrollbar-width: none;
}

.nav-tabs-responsive::-webkit-scrollbar,
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
  }

  *::-webkit-scrollbar-track {
    background: var(--app-scrollbar-light-track);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-light-thumb);
    border-radius: 999px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-light-thumb-hover);
  }

  .nav-tabs-responsive::-webkit-scrollbar,
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-theme-dark::-webkit-scrollbar,
  .sidebar-content::-webkit-scrollbar,
  .nav-sidebar::-webkit-scrollbar,
  .dropdown-menu-dark::-webkit-scrollbar,
  .dropdown-menu-dark .dropdown-menu-scrollable::-webkit-scrollbar {
    width: var(--app-scrollbar-size-compact);
    height: var(--app-scrollbar-size-compact);
  }

  .scrollbar-theme-dark::-webkit-scrollbar-track,
  .sidebar-content::-webkit-scrollbar-track,
  .nav-sidebar::-webkit-scrollbar-track,
  .dropdown-menu-dark::-webkit-scrollbar-track,
  .dropdown-menu-dark .dropdown-menu-scrollable::-webkit-scrollbar-track {
    background: var(--app-scrollbar-dark-track);
  }

  .scrollbar-theme-dark::-webkit-scrollbar-thumb,
  .sidebar-content::-webkit-scrollbar-thumb,
  .nav-sidebar::-webkit-scrollbar-thumb,
  .dropdown-menu-dark::-webkit-scrollbar-thumb,
  .dropdown-menu-dark .dropdown-menu-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-dark-thumb);
    border-radius: 999px;
  }

  .scrollbar-theme-dark::-webkit-scrollbar-thumb:hover,
  .sidebar-content::-webkit-scrollbar-thumb:hover,
  .nav-sidebar::-webkit-scrollbar-thumb:hover,
  .dropdown-menu-dark::-webkit-scrollbar-thumb:hover,
  .dropdown-menu-dark .dropdown-menu-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-dark-thumb-hover);
  }
}