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

/* Utility defaults for web components (when we were using shadow DOM) */
: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;
}

/* Global border color - this is what's causing the issue! */
/* Commenting out since it affects all elements globally
*,
::after,
::before,
::backdrop,
::file-selector-button {
  border-color: hsl(var(--border));
}
*/

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;
}

/* Font size overrides for SSO button component */
unraid-sso-button {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;
}