/* ═══════════════════════════════════════════════════════════════
   DIVIDER-N — Horizontal or vertical divider with optional label.
   ═══════════════════════════════════════════════════════════════ */

@scope (divider-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --divider-color:    var(--a-border-subtle);
    --divider-size:     1px;
    --divider-spacing:  var(--a-space-3);
    --divider-label-font: var(--a-ui-sm);
    --divider-label-fg: var(--a-fg-muted);
    --divider-label-px: var(--a-space-2);
  }

  /* ── Horizontal (default) ── */
  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    margin-block: var(--divider-spacing);
  }

  /* Horizontal line without label */
  :scope:not(:has([slot="label"]))::before {
    content: '';
    flex: 1;
    height: var(--divider-size);
    background: var(--divider-color);
  }

  /* Horizontal line with label — left line */
  :scope:has([slot="label"])::before {
    content: '';
    flex: 1;
    height: var(--divider-size);
    background: var(--divider-color);
  }

  /* Horizontal line with label — right line */
  :scope:has([slot="label"])::after {
    content: '';
    flex: 1;
    height: var(--divider-size);
    background: var(--divider-color);
  }

  /* ── Label ── */
  [slot="label"] {
    padding-inline: var(--divider-label-px);
    font-size: var(--divider-label-font);
    color: var(--divider-label-fg);
    white-space: nowrap;
    line-height: 1;
  }

  /* ── Vertical ── */
  :scope[vertical] {
    display: inline-flex;
    flex-direction: column;
    width: auto;
    height: auto;
    align-self: stretch;
    margin-block: 0;
    margin-inline: var(--divider-spacing);
  }

  /* Vertical line without label */
  :scope[vertical]:not(:has([slot="label"]))::before {
    content: '';
    flex: 1;
    width: var(--divider-size);
    height: auto;
    background: var(--divider-color);
  }

  /* Vertical line with label — top line */
  :scope[vertical]:has([slot="label"])::before {
    content: '';
    flex: 1;
    width: var(--divider-size);
    height: auto;
    background: var(--divider-color);
  }

  /* Vertical line with label — bottom line */
  :scope[vertical]:has([slot="label"])::after {
    content: '';
    flex: 1;
    width: var(--divider-size);
    height: auto;
    background: var(--divider-color);
  }

  /* Vertical label */
  :scope[vertical] [slot="label"] {
    padding-inline: 0;
    padding-block: var(--divider-label-px);
    writing-mode: vertical-lr;
  }
}
