---
// Circuit divider - gradient hairlines meeting two rotated-square "diamonds"
// (cyan, magenta). Pure CSS, from the design handoff.
---

<div class="divider container" aria-hidden="true">
  <div class="divider__line divider__line--in"></div>
  <div class="divider__diamond divider__diamond--cyan"></div>
  <div class="divider__line divider__line--mid"></div>
  <div class="divider__diamond divider__diamond--magenta"></div>
  <div class="divider__line divider__line--out"></div>
</div>

<style>
  .divider {
    display: flex;
    align-items: center;
  }
  .divider__line {
    height: 1px;
  }
  .divider__line--in {
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(63, 186, 245, 0.5));
  }
  .divider__line--mid {
    width: 120px;
    background: rgba(63, 186, 245, 0.35);
  }
  .divider__line--out {
    flex: 1;
    background: linear-gradient(90deg, rgba(232, 121, 249, 0.5), transparent);
  }
  .divider__diamond {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    margin: 0 10px;
    flex-shrink: 0;
  }
  .divider__diamond--cyan {
    border: 1px solid var(--accent);
  }
  .divider__diamond--magenta {
    border: 1px solid var(--accent-2);
  }
</style>