/* ───────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.divider
   Version: 1.0.0 | Genesis-Final • Bus-Aware • Wrap-Safe • Tokenized
   Classification: Atom | Content Display | Divider/Separator
   Maintainer: DΛREΛKT_ UI TEAM
   ─────────────────────────────────────────────────────────────────────────────── */

@layer atoms {
  [data-atom="ui.divider"] .ui-divider {
    border: none;
    margin: var(--ui-divider-margin, 16px 0);
  }

  [data-atom="ui.divider"] .ui-divider[data-orientation="horizontal"] {
    width: 100%;
    height: var(--ui-divider-thickness, 1px);
    background: var(--ui-divider-color, rgba(255,255,255,.2));
  }

  [data-atom="ui.divider"] .ui-divider[data-orientation="vertical"] {
    width: var(--ui-divider-thickness, 1px);
    height: 100%;
    margin: 0 var(--ui-divider-margin, 16px);
    display: inline-block;
    vertical-align: middle;
  }

  [data-atom="ui.divider"] .ui-divider[data-variant="dashed"] {
    background: none;
    border-top: var(--ui-divider-thickness, 1px) dashed var(--ui-divider-color, rgba(255,255,255,.2));
  }

  [data-atom="ui.divider"] .ui-divider[data-variant="dotted"] {
    background: none;
    border-top: var(--ui-divider-thickness, 1px) dotted var(--ui-divider-color, rgba(255,255,255,.2));
  }

  /* ─── Pine / Wave variant ───────────────────────────────────── */
  [data-atom="ui.divider"] .ui-divider--pine {
    border: none;
    margin: 0;
    width: 100%;
    height: var(--ui-divider-pine-height, 160px);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 900px var(--ui-divider-pine-height, 160px);
    pointer-events: none;
    position: relative;
    z-index: 2;
  }

  [data-atom="ui.divider"] .ui-divider--pine[data-flip] {
    background-position: bottom center;
  }

  /* ─── Nami (波) / Ocean wave variant ──────────────────────── */
  [data-atom="ui.divider"] .ui-divider--nami {
    border: none;
    margin: -1px 0;
    width: 100%;
    height: var(--ui-divider-pine-height, 160px);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 900px var(--ui-divider-pine-height, 160px);
    pointer-events: none;
    position: relative;
    z-index: 2;
  }

  [data-atom="ui.divider"] .ui-divider--nami[data-flip] {
    background-position: bottom center;
  }
}