@import 'tailwindcss';
@import 'tw-animate-css';

@import './theme-default.css';

/* important to override the tailwind variant to use our class instead of the preferred color theme (https://tailwindcss.com/docs/dark-mode) */
@custom-variant dark (&:where(.dark, .dark *)); /* NOSONAR */

@layer base {
  html {
    @apply scroll-smooth;
  }
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground text-base font-normal;

    /* line height for text-sm (used to determine row height in data-grid) */
    --line-height-sm: 16px;
  }
}

/**
 * Tailwind Breakpoints
 *
 * Breakpoint prefix	Minimum width	CSS
 * sm	40rem (640px)	@media (width >= 40rem) { ... }
 * md	48rem (768px)	@media (width >= 48rem) { ... }
 * lg	64rem (1024px)	@media (width >= 64rem) { ... }
 * xl	80rem (1280px)	@media (width >= 80rem) { ... }
 * 2xl	96rem (1536px)	@media (width >= 96rem) { ... }
 **/
