<!-- Plain divider -->
<hr class="divider" />

<!-- Labeled divider -->
<div class="divider-label">
  <span class="divider-line"></span>
  <span class="divider-text">or continue with</span>
  <span class="divider-line"></span>
</div>

<!-- Vertical divider (inline) -->
<div style="display:flex;align-items:center;gap:1rem;height:2rem">
  <span>Item one</span>
  <div class="divider-vertical"></div>
  <span>Item two</span>
  <div class="divider-vertical"></div>
  <span>Item three</span>
</div>

<style>
.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.divider-label { display: flex; align-items: center; gap: 0.875rem; margin: 1.5rem 0; }
.divider-line { flex: 1; height: 1px; background: var(--border); }
.divider-text { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.divider-vertical { width: 1px; height: 100%; background: var(--border); }
</style>