Segmented Share Toggle

<div class="nuda-shr-seg">
  <div class="nuda-shr-seg__track">
    <button class="nuda-shr-seg__opt nuda-shr-seg__opt--active">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>
      Share
    </button>
    <button class="nuda-shr-seg__opt">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
      Link
    </button>
    <button class="nuda-shr-seg__opt">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 7 10-7"/></svg>
      Email
    </button>
    <button class="nuda-shr-seg__opt">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
      Export
    </button>
  </div>
</div>

.nuda-shr-seg {
  padding: .4rem;
}

.nuda-shr-seg__track {
  display: inline-flex;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .25rem;
  gap: .15rem;
}

.nuda-shr-seg__opt {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .6rem;
  border: none;
  background: transparent;
  color: #777;
  font-size: .75rem;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s,color .15s;
  white-space: nowrap;
}

.nuda-shr-seg__opt:hover {
  color: #cfcfcf;
}

.nuda-shr-seg__opt--active {
  background: #e4ff54;
  color: #0a0a0a;
  font-weight: 700;
}