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

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

@import '@postxl/ui-components/data-grid.css';

/**
 * The @source directive tells Tailwind to scan the library for class names.
 * Note: The path must be relative to your stylesheet, not the project root nor a package name.
 *
 * ❌ Doesn't work
 * @source "@postxl/ui-components";
 *
 * ✅ Works - relative path from the CSS file
 * @source "../../node_modules/@postxl/ui-components";
 */
@source "../../node_modules/@postxl/ui-components"; /* NOSONAR - Tailwind CSS v4 at-rule */

/* 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 {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

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

input[type='number'].appearance-none::-webkit-inner-spin-button,
input[type='number'].appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type='number'].appearance-none {
  -moz-appearance: textfield !important;
}

/* Hide the default date icon in date inputs */
.no-date-icon::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
.no-date-icon::-moz-calendar-picker-indicator {
  display: none;
}
.no-date-icon::-ms-clear,
.no-date-icon::-ms-expand {
  display: none;
}

@utility container {
  padding: 2rem;
}

/**
 * the theme will be parsed by the tailwindcss plugin and creates utility classes for each variable
 * @see: https://tailwindcss.com/docs/theme#theme-variable-namespaces
 * @see: defaults: https://tailwindcss.com/docs/theme#default-theme-variable-reference
 * @see: usage of utility classes: https://tailwindcss.com/docs/styling-with-utility-classes
 */
@theme inline {
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  /* Font sizes - reference CSS variables so they cascade based on theme class */
  --text-sm: var(--fs-sm);
  --text-sm--line-height: var(--fs-sm-lh);
  --text-base: var(--fs-base);
  --text-base--line-height: var(--fs-base-lh);
  --text-lg: var(--fs-lg);
  --text-lg--line-height: var(--fs-lg-lh);
  --text-xl: var(--fs-xl);
  --text-xl--line-height: var(--fs-xl-lh);
  --text-2xl: var(--fs-2xl);
  --text-2xl--line-height: var(--fs-2xl-lh);

  /* Colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Border radius */
  --radius-xs: calc(var(--radius) * 0.25);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.5);
  --radius-xl: calc(var(--radius) * 2);
  --radius-2xl: calc(var(--radius) * 2.5);
  --radius-3xl: calc(var(--radius) * 3.5);
  --radius-4xl: calc(var(--radius) * 5);

  /* Shadows */
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer components {
  h1 {
    font-size: var(--fs-2xl);
    line-height: var(--fs-2xl-lh);
    font-weight: var(--font-weight-semibold);
  }

  h2 {
    font-size: var(--fs-xl);
    line-height: var(--fs-xl-lh);
    font-weight: var(--font-weight-semibold);
  }

  h3 {
    font-size: var(--fs-lg);
    line-height: var(--fs-lg-lh);
    font-weight: var(--font-weight-semibold);
  }
}

/* Keyframes for accordion animations only used, when Radix Accordion is used otherwise the animations are not needed and can be removed */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

/* View Transitions API styles for color mode Toggle */
::view-transition-old(root),
::view-transition-new(root) {
  /* Prevent the default cross-fade animation */
  animation: none;
  /* Ensure the new view is on top */
  mix-blend-mode: normal;
  /* Prevent interaction during transition */
  pointer-events: none;
}

/* When reversing (Dark -> Light), put old (Dark) on top so we can shrink it */
[data-theme-transition='reverse']::view-transition-old(root) {
  z-index: 1;
}
[data-theme-transition='reverse']::view-transition-new(root) {
  z-index: 0;
}
