Pure CSS Multi-Level Dropdown Switch

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="status-sw">
  <input type="radio" id="st1" name="st-group" checked />
  <label for="st1" class="st-lbl green">Active</label>
  <input type="radio" id="st2" name="st-group" />
  <label for="st2" class="st-lbl yellow">Pending</label>
  <input type="radio" id="st3" name="st-group" />
  <label for="st3" class="st-lbl red">Offline</label>
</div>

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

.status-sw { display: flex; background: #18181b; padding: 4px; border-radius: 8px; border: 1px solid #27272a; gap: 4px; font-family: system-ui; }
.status-sw input { display: none; }
.st-lbl { padding: 6px 12px; font-size: 11px; font-weight: 600; color: #71717a; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
#st1:checked + label.green { background: rgba(34,197,94,0.15); color: #22c55e; }
#st2:checked + label.yellow { background: rgba(234,179,8,0.15); color: #eab308; }
#st3:checked + label.red { background: rgba(239,68,68,0.15); color: #ef4444; }