Minimal Radio Check List Item

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="chk-radio-list">
  <label class="c-item">
    <input type="radio" name="r_check" checked />
    <div class="c-content"><span>Public Profile</span><i class="c-ico">✓</i></div>
  </label>
  <label class="c-item">
    <input type="radio" name="r_check" />
    <div class="c-content"><span>Private Profile</span><i class="c-ico">✓</i></div>
  </label>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.chk-radio-list { display: flex; flex-direction: column; gap: 6px; width: 190px; font-family: system-ui, sans-serif; }
.c-item input { display: none; }
.c-content {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
  background: #27272a; color: #a1a1aa; border-radius: 8px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.c-ico { font-style: normal; font-weight: 900; opacity: 0; transform: scale(0.5); transition: all 0.2s; color: #22c55e; }
.c-item input:checked + .c-content {
  background: #3f3f46; color: #ffffff; font-weight: 600;
}
.c-item input:checked + .c-content .c-ico { opacity: 1; transform: scale(1); }