/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — FLEX
   Classification : Layout Atom | Flexbox Container | Responsive
   Version        : 1.0.0 | Genesis • Flexbox Layout Primitive
   File           : /tools/modules/ui.flex/ui.flex.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */

@layer ui.flex {

  /* ─── Root Flex Container ───────────────────────────────────── */
  .ui-flex[data-module="ui.flex"],
  [data-module="ui.flex"] {
    display: flex;
    flex-direction: var(--ui-flex-direction, row);
    gap: var(--ui-flex-gap, var(--site-pad, 1rem));
    justify-content: var(--ui-flex-justify, flex-start);
    align-items: var(--ui-flex-align, stretch);
    box-sizing: border-box;
    position: relative;
  }

  /* ─── Inline Flex Variant ───────────────────────────────────── */
  .ui-flex[data-inline="true"] {
    display: inline-flex;
  }

  /* ─── Wrap Variants ─────────────────────────────────────────── */
  .ui-flex[data-wrap="wrap"] {
    flex-wrap: wrap;
  }

  .ui-flex[data-wrap="nowrap"] {
    flex-wrap: nowrap;
  }

  .ui-flex[data-wrap="reverse"] {
    flex-wrap: wrap-reverse;
  }

  /* ─── Direct Children ───────────────────────────────────────── */
  .ui-flex[data-module="ui.flex"] > *,
  [data-module="ui.flex"] > * {
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
    width: auto;
  }

  /* ─── Responsive Stack (Mobile) ─────────────────────────────── */
  @media (max-width: 600px) {
    .ui-flex[data-stack="true"] {
      flex-direction: column !important;
    }
  }

  /* ─── Theme Awareness ───────────────────────────────────────── */
  [data-theme="dark"] .ui-flex {
    color: var(--site-fg, #eee);
  }

  [data-theme="light"] .ui-flex {
    color: var(--site-fg, #111);
  }

  /* ─── Motion Reduction ──────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .ui-flex { transition: none !important; }
  }

  /* ─── Genesis Token Bridges ─────────────────────────────────── */
  :root {
    --ui-flex-direction: row;
    --ui-flex-gap: var(--site-pad, 1rem);
    --ui-flex-justify: flex-start;
    --ui-flex-align: stretch;
  }

  /* ─── Debug Visualization ───────────────────────────────────── */
  .ui-flex[data-debug="true"] {
    outline: 1px dashed rgba(0, 128, 255, 0.3);
    outline-offset: 2px;
  }

  .ui-flex[data-debug="true"] > * {
    outline: 1px dashed rgba(0, 128, 255, 0.15);
  }
}