@layer base {
  body {
    --sb-track-color: #0f172a;
    --sb-thumb-color: #1e293b;
    --sb-size: 10px;
  }

  body::-webkit-scrollbar {
    width: var(--sb-size)
  }

  body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 4px;
  }

  body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 4px;
    
  }

  @supports not selector(::-webkit-scrollbar) {
    body {
      scrollbar-color: var(--sb-thumb-color)
                      var(--sb-track-color);
    }
  }

  .scrollbar {
    --sb-track-color: #0f172a;
    --sb-thumb-color: #1e293b;
    --sb-size: 10px;
  }

  .scrollbar::-webkit-scrollbar {
    width: var(--sb-size)
  }

  .scrollbar::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 4px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 4px;
    
  }

  @supports not selector(::-webkit-scrollbar) {
    .scrollbar {
      scrollbar-color: var(--sb-thumb-color)
                      var(--sb-track-color);
    }
  }
}
