/* ── Separator component ──────────────────────────────────────── */

@layer components {
  .separator {
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--border);

    /* Horizontal (default) */
    height: 1px;
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: 1px;
      align-self: stretch;
    }
  }

  /* ── Labeled separator ───────────────────────────────────── */
  .separator-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & .separator { flex: 1; }

    & span {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }
}