/**
 * QDS Layer Ordering
 * 
 * Defines the cascade order for Tailwind CSS layers:
 * - qds: QDS design system tokens and custom variants
 * - theme: Theme-level customizations
 * - base: Base styles and resets
 * - components: Component styles
 * - utilities: Utility classes (highest priority)
 */
@layer base, qds, theme, components, utilities;

/**
 * QDS UI State Variants
 * 
 * These custom variants enable state-based styling that automatically scopes
 * to the nearest component scope, preventing style leakage in nested components.
 * 
 * Usage:
 *   ui-checked:bg-blue-500
 *   not-ui-disabled:opacity-100
 *   ui-open:rotate-180
 * 
 * Generated by: docs/generate-ui-variants.ts
 * DO NOT EDIT MANUALLY - Run the generator script to update
 */

/**
 * ui-invalid: Apply styles when nearest component scope has ui-invalid
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-invalid (
  /* Descendant of scope with ui-invalid, stops at nearest scope boundary */
  [ui-qds-scope][ui-invalid] > &,
  [ui-qds-scope][ui-invalid] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-invalid]&
);

/**
 * not-ui-invalid: Apply styles when nearest component scope does NOT have ui-invalid
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-invalid (
  /* Descendant of scope without ui-invalid, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-invalid]) > &,
  [ui-qds-scope]:not([ui-invalid]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-invalid])&
);

/**
 * ui-required: Apply styles when nearest component scope has ui-required
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-required (
  /* Descendant of scope with ui-required, stops at nearest scope boundary */
  [ui-qds-scope][ui-required] > &,
  [ui-qds-scope][ui-required] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-required]&
);

/**
 * not-ui-required: Apply styles when nearest component scope does NOT have ui-required
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-required (
  /* Descendant of scope without ui-required, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-required]) > &,
  [ui-qds-scope]:not([ui-required]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-required])&
);

/**
 * ui-disabled: Apply styles when nearest component scope has ui-disabled
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-disabled (
  /* Descendant of scope with ui-disabled, stops at nearest scope boundary */
  [ui-qds-scope][ui-disabled] > &,
  [ui-qds-scope][ui-disabled] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-disabled]&
);

/**
 * not-ui-disabled: Apply styles when nearest component scope does NOT have ui-disabled
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-disabled (
  /* Descendant of scope without ui-disabled, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-disabled]) > &,
  [ui-qds-scope]:not([ui-disabled]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-disabled])&
);

/**
 * ui-readonly: Apply styles when nearest component scope has ui-readonly
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-readonly (
  /* Descendant of scope with ui-readonly, stops at nearest scope boundary */
  [ui-qds-scope][ui-readonly] > &,
  [ui-qds-scope][ui-readonly] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-readonly]&
);

/**
 * not-ui-readonly: Apply styles when nearest component scope does NOT have ui-readonly
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-readonly (
  /* Descendant of scope without ui-readonly, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-readonly]) > &,
  [ui-qds-scope]:not([ui-readonly]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-readonly])&
);

/**
 * ui-checked: Apply styles when nearest component scope has ui-checked
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-checked (
  /* Descendant of scope with ui-checked, stops at nearest scope boundary */
  [ui-qds-scope][ui-checked] > &,
  [ui-qds-scope][ui-checked] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-checked]&
);

/**
 * not-ui-checked: Apply styles when nearest component scope does NOT have ui-checked
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-checked (
  /* Descendant of scope without ui-checked, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-checked]) > &,
  [ui-qds-scope]:not([ui-checked]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-checked])&
);

/**
 * ui-selected: Apply styles when nearest component scope has ui-selected
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-selected (
  /* Descendant of scope with ui-selected, stops at nearest scope boundary */
  [ui-qds-scope][ui-selected] > &,
  [ui-qds-scope][ui-selected] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-selected]&
);

/**
 * not-ui-selected: Apply styles when nearest component scope does NOT have ui-selected
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-selected (
  /* Descendant of scope without ui-selected, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-selected]) > &,
  [ui-qds-scope]:not([ui-selected]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-selected])&
);

/**
 * ui-pressed: Apply styles when nearest component scope has ui-pressed
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-pressed (
  /* Descendant of scope with ui-pressed, stops at nearest scope boundary */
  [ui-qds-scope][ui-pressed] > &,
  [ui-qds-scope][ui-pressed] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-pressed]&
);

/**
 * not-ui-pressed: Apply styles when nearest component scope does NOT have ui-pressed
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-pressed (
  /* Descendant of scope without ui-pressed, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-pressed]) > &,
  [ui-qds-scope]:not([ui-pressed]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-pressed])&
);

/**
 * ui-open: Apply styles when nearest component scope has ui-open
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-open (
  /* Descendant of scope with ui-open, stops at nearest scope boundary */
  [ui-qds-scope][ui-open] > &,
  [ui-qds-scope][ui-open] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-open]&
);

/**
 * not-ui-open: Apply styles when nearest component scope does NOT have ui-open
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-open (
  /* Descendant of scope without ui-open, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-open]) > &,
  [ui-qds-scope]:not([ui-open]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-open])&
);

/**
 * ui-highlighted: Apply styles when nearest component scope has ui-highlighted
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-highlighted (
  /* Descendant of scope with ui-highlighted, stops at nearest scope boundary */
  [ui-qds-scope][ui-highlighted] > &,
  [ui-qds-scope][ui-highlighted] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-highlighted]&
);

/**
 * not-ui-highlighted: Apply styles when nearest component scope does NOT have ui-highlighted
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-highlighted (
  /* Descendant of scope without ui-highlighted, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-highlighted]) > &,
  [ui-qds-scope]:not([ui-highlighted]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-highlighted])&
);

/**
 * ui-active: Apply styles when nearest component scope has ui-active
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-active (
  /* Descendant of scope with ui-active, stops at nearest scope boundary */
  [ui-qds-scope][ui-active] > &,
  [ui-qds-scope][ui-active] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-active]&
);

/**
 * not-ui-active: Apply styles when nearest component scope does NOT have ui-active
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-active (
  /* Descendant of scope without ui-active, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-active]) > &,
  [ui-qds-scope]:not([ui-active]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-active])&
);

/**
 * ui-mixed: Apply styles when nearest component scope has ui-mixed
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-mixed (
  /* Descendant of scope with ui-mixed, stops at nearest scope boundary */
  [ui-qds-scope][ui-mixed] > &,
  [ui-qds-scope][ui-mixed] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-mixed]&
);

/**
 * not-ui-mixed: Apply styles when nearest component scope does NOT have ui-mixed
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-mixed (
  /* Descendant of scope without ui-mixed, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-mixed]) > &,
  [ui-qds-scope]:not([ui-mixed]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-mixed])&
);

/**
 * ui-empty: Apply styles when nearest component scope has ui-empty
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-empty (
  /* Descendant of scope with ui-empty, stops at nearest scope boundary */
  [ui-qds-scope][ui-empty] > &,
  [ui-qds-scope][ui-empty] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-empty]&
);

/**
 * not-ui-empty: Apply styles when nearest component scope does NOT have ui-empty
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-empty (
  /* Descendant of scope without ui-empty, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-empty]) > &,
  [ui-qds-scope]:not([ui-empty]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-empty])&
);

/**
 * ui-horizontal: Apply styles when nearest component scope has ui-horizontal
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-horizontal (
  /* Descendant of scope with ui-horizontal, stops at nearest scope boundary */
  [ui-qds-scope][ui-horizontal] > &,
  [ui-qds-scope][ui-horizontal] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-horizontal]&
);

/**
 * not-ui-horizontal: Apply styles when nearest component scope does NOT have ui-horizontal
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-horizontal (
  /* Descendant of scope without ui-horizontal, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-horizontal]) > &,
  [ui-qds-scope]:not([ui-horizontal]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-horizontal])&
);

/**
 * ui-vertical: Apply styles when nearest component scope has ui-vertical
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-vertical (
  /* Descendant of scope with ui-vertical, stops at nearest scope boundary */
  [ui-qds-scope][ui-vertical] > &,
  [ui-qds-scope][ui-vertical] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-vertical]&
);

/**
 * not-ui-vertical: Apply styles when nearest component scope does NOT have ui-vertical
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-vertical (
  /* Descendant of scope without ui-vertical, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-vertical]) > &,
  [ui-qds-scope]:not([ui-vertical]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-vertical])&
);

/**
 * ui-closed: Apply styles when nearest component scope has ui-closed
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant ui-closed (
  /* Descendant of scope with ui-closed, stops at nearest scope boundary */
  [ui-qds-scope][ui-closed] > &,
  [ui-qds-scope][ui-closed] > :not([ui-qds-scope]) &,
  /* Direct match on element itself */
  [ui-closed]&
);

/**
 * not-ui-closed: Apply styles when nearest component scope does NOT have ui-closed
 * Automatically scopes to prevent nested components from inheriting state
 */
@custom-variant not-ui-closed (
  /* Descendant of scope without ui-closed, stops at nearest scope boundary */
  [ui-qds-scope]:not([ui-closed]) > &,
  [ui-qds-scope]:not([ui-closed]) > :not([ui-qds-scope]) &,
  /* Direct match on element itself ONLY if it's also a scope */
  [ui-qds-scope]:not([ui-closed])&
);