@custom-variant light (&:where([data-theme=light], [data-theme=light] *));
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant kubefirst (&:where([data-theme=kubefirst], [data-theme=kubefirst] *));
@custom-variant kubefirst-dark (&:where([data-theme=kubefirst-dark], [data-theme=kubefirst-dark] *));

@layer components {
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  .scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-metal-300) transparent;

    @variant dark {
      scrollbar-color: var(--color-metal-700) transparent;
    }
  }

  .scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

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

    @variant dark {
      background-color: var(--color-metal-700);
    }
  }

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