<div class="ctc-counter">
  <span class="ctc-counter-chip" role="group" aria-label="Inbox count">
    <button type="button" data-ctc-cnt="-1" aria-label="Decrement">−</button>
    <span class="ctc-counter-label">Inbox</span>
    <span class="ctc-counter-num" aria-live="polite" aria-valuenow="12">12</span>
    <button type="button" data-ctc-cnt="+1" aria-label="Increment">+</button>
  </span>
</div>

.ctc-counter {
  display: flex;
}

.ctc-counter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  font:
    600 12px/1 system-ui,
    sans-serif;
  color: #f0eeff;
}

.ctc-counter-chip button {
  width: 26px;
  height: 28px;
  background: transparent;
  border: 0;
  color: #c4b5fd;
  font:
    700 14px/1 system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.ctc-counter-chip button:hover {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}

.ctc-counter-label {
  padding: 0 6px 0 10px;
}

.ctc-counter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  margin-right: 4px;
  padding: 0 6px;
  background: rgba(124, 108, 255, 0.22);
  color: #c4b5fd;
  border-radius: 999px;
  font:
    700 11px/1 ui-monospace,
    monospace;
}

(function () {
  document.querySelectorAll(".ctc-counter-chip").forEach(function (chip) {
    var num = chip.querySelector(".ctc-counter-num");
    chip.querySelectorAll("[data-ctc-cnt]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var n = parseInt(num.textContent, 10) || 0;
        var inc = parseInt(btn.getAttribute("data-ctc-cnt"), 10);
        var v = Math.max(0, n + inc);
        num.textContent = v;
        num.setAttribute("aria-valuenow", v);
      });
    });
  });
})();