@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .filter-tab {
    @apply text-nowrap rounded-lg border border-[#363636] bg-ui-controls-button px-2.5 py-1 text-[13px] font-medium text-white/80 transition-all duration-150 hover:border-brand-primary/50 hover:bg-assets-background/80;
  }

  .filter-tab.active {
    @apply border border-brand-primary text-white hover:border-brand-primary hover:bg-ui-controls-button;
  }

  .filter-tab:disabled {
    @apply border-transparent bg-ui-controls-button/50 hover:border-transparent disabled:text-white/30;
  }
}