<fieldset class="cbgp-cell" role="group" aria-label="Text formatting">
  <legend class="cbgp-sr">Text formatting</legend>
  <label
    ><input type="checkbox" /><span aria-label="Bold"><strong>B</strong></span></label
  >
  <label
    ><input type="checkbox" checked /><span aria-label="Italic"><em>I</em></span></label
  >
  <label
    ><input type="checkbox" /><span aria-label="Underline"><u>U</u></span></label
  >
  <label
    ><input type="checkbox" /><span aria-label="Strikethrough"><s>S</s></span></label
  >
</fieldset>

@property --cbgp-cell-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-cell {
  display: inline-flex; gap: 4px;
  border: 0; padding: 6px;
  background: rgba(8,10,18,0.85);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
.cbgp-cell input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-cell label { display: block; cursor: pointer; }
.cbgp-cell span {
  --cbgp-cell-a: 0deg;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background:
    conic-gradient(from var(--cbgp-cell-a),
      transparent 0deg, transparent 200deg,
      rgba(255,90,241,0.28) 260deg,
      rgba(0,255,224,0.32) 320deg,
      transparent 360deg),
    rgba(20,22,30,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font: 700 14px/1 'Times New Roman', serif;
  color: rgba(220,225,230,0.6);
  transition: --cbgp-cell-a 0.55s cubic-bezier(.65,0,.35,1), color 0.25s, border-color 0.25s;
}
.cbgp-cell label:hover span { color: rgba(220,225,230,0.9); --cbgp-cell-a: 180deg; }
.cbgp-cell input:checked + span {
  --cbgp-cell-a: 360deg;
  color: #fff;
  border-color: rgba(0,255,224,0.5);
  box-shadow: 0 0 16px rgba(0,255,224,0.2);
}
.cbgp-cell input:focus-visible + span { outline: 2px solid #00ffe0; outline-offset: -2px; }