@import 'tailwindcss';
@import '@unraid/ui/styles';
@import '@nuxt/ui';

/* Force generation of all color utilities for custom colors across packages */
@source inline("{bg,text,border,ring,fill,stroke}-{unraid-green,unraid-red}{,-50,-100,-200,-300,-400,-500,-600,-700,-800,-900,-950}");
@source inline("{bg,text,border,ring,fill,stroke}-{yellow-accent,orange-dark,orange}");

/* Scan unraid-ui package for class usage */
@source "../unraid-ui/src/**/*.{vue,ts,js}";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50: #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-200: #fed7aa;
  --color-primary-300: #fdba74;
  --color-primary-400: #fb923c;
  --color-primary-500: #ff6600;
  --color-primary-600: #ea580c;
  --color-primary-700: #c2410c;
  --color-primary-800: #9a3412;
  --color-primary-900: #7c2d12;
  --color-primary-950: #431407;

  /* Header colors */
  --color-header-text-primary: var(--header-text-primary);
  --color-header-text-secondary: var(--header-text-secondary);
  --color-header-background-color: var(--header-background-color);

  /* Legacy colors */
  --color-alpha: var(--color-alpha);
  --color-beta: var(--color-beta);
  --color-gamma: var(--color-gamma);
  --color-gamma-opaque: var(--color-gamma-opaque);
  --color-customgradient-start: var(--color-customgradient-start);
  --color-customgradient-end: var(--color-customgradient-end);

  /* Gradients */
  --color-header-gradient-start: var(--header-gradient-start);
  --color-header-gradient-end: var(--header-gradient-end);
  --color-banner-gradient: var(--banner-gradient);
}

@layer utilities {
  :host {
    --tw-divide-y-reverse: 0;
    --tw-border-style: solid;
    --tw-font-weight: initial;
    --tw-tracking: initial;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-rotate-x: rotateX(0);
    --tw-rotate-y: rotateY(0);
    --tw-rotate-z: rotateZ(0);
    --tw-skew-x: skewX(0);
    --tw-skew-y: skewY(0);
    --tw-space-x-reverse: 0;
    --tw-gradient-position: initial;
    --tw-gradient-from: #0000;
    --tw-gradient-via: #0000;
    --tw-gradient-to: #0000;
    --tw-gradient-stops: initial;
    --tw-gradient-via-stops: initial;
    --tw-gradient-from-position: 0%;
    --tw-gradient-via-position: 50%;
    --tw-gradient-to-position: 100%;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-blur: initial;
    --tw-brightness: initial;
    --tw-contrast: initial;
    --tw-grayscale: initial;
    --tw-hue-rotate: initial;
    --tw-invert: initial;
    --tw-opacity: initial;
    --tw-saturate: initial;
    --tw-sepia: initial;
    --tw-drop-shadow: initial;
    --tw-duration: initial;
    --tw-ease: initial;
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: hsl(var(--border));
  }

  :root {
    --ui-primary: var(--color-primary-500);
    --ui-primary-hover: var(--color-primary-600);
    --ui-primary-active: var(--color-primary-700);
  }

  .dark {
    --ui-primary: var(--color-primary-500);
    --ui-primary-hover: var(--color-primary-600);
    --ui-primary-active: var(--color-primary-700);
  }

  body {
    --color-alpha: #1c1b1b;
    --color-beta: #f2f2f2;
    --color-gamma: #999999;
    --color-gamma-opaque: rgba(153, 153, 153, 0.5);
    --color-customgradient-start: rgba(242, 242, 242, 0);
    --color-customgradient-end: rgba(242, 242, 242, 0.85);
    --shadow-beta: 0 25px 50px -12px rgba(242, 242, 242, 0.15);
    --ring-offset-shadow: 0 0 --var(--color-beta);
    --ring-shadow: 0 0 --var(--color-beta);
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}