<div class="radikalwp-rad-color" role="radiogroup" aria-label="انتخاب رنگ"><label class="radikalwp-rad-color-item"><input type="radio" name="radikalwp-color" checked><span style="--c:#ef4444"><//span><//label><label class="radikalwp-rad-color-item"><input type="radio" name="radikalwp-color"><span style="--c:#f59e0b"><//span><//label><label class="radikalwp-rad-color-item"><input type="radio" name="radikalwp-color"><span style="--c:#10b981"><//span><//label><label class="radikalwp-rad-color-item"><input type="radio" name="radikalwp-color"><span style="--c:#3b82f6"><//span><//label><label class="radikalwp-rad-color-item"><input type="radio" name="radikalwp-color"><span style="--c:#a855f7"><//span><//label><//div>

.radikalwp-rad-color { display: flex; gap: 12px; }
.radikalwp-rad-color-item { cursor: pointer; }
.radikalwp-rad-color-item input { position: absolute; opacity: 0; }
.radikalwp-rad-color-item span {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 0 var(--c);
  transition: box-shadow .25s ease, transform .25s ease;
}
.radikalwp-rad-color-item input:checked + span {
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--c);
  transform: scale(1.1);
}
.radikalwp-rad-color-item input:focus-visible + span {
  outline: 2px dashed var(--c);
  outline-offset: 5px;
}