Radio
#radio - wrap
display: inline-flex;
align-items: center;
gap: var(--Spacing-SM, 8px);
#icon - unchecked
display: inline-flex;
align-items: center;
gap: var(--Spacing-SM, 8px);
#icon - hover
width: var(--Spacing-MD, 16px);
height: var(--Spacing-MD, 16px);
##with svg overlay
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="white" stroke="url(#paint0_linear_352_914)"/>
<rect x="5" y="5" width="6" height="6" rx="3" fill="#575A63"/>
<defs>
<linearGradient id="paint0_linear_352_914" x1="-5.59828e-10" y1="9.05263" x2="16" y2="9.04199" gradientUnits="userSpaceOnUse">
<stop stop-color="#1CC98C"/>
<stop offset="0.205" stop-color="#24CBDE"/>
<stop offset="0.4" stop-color="#57A9F7"/>
<stop offset="0.6" stop-color="#BD52F9"/>
<stop offset="0.8" stop-color="#EBB347"/>
<stop offset="1" stop-color="#FFF845"/>
</linearGradient>
</defs>
</svg>
#icon - checked
width: var(--Spacing-MD, 16px);
height: var(--Spacing-MD, 16px);
##with svg overlay
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="black" stroke="url(#paint0_linear_150_1396)"/>
<rect x="5" y="5" width="6" height="6" rx="3" fill="white"/>
<defs>
<linearGradient id="paint0_linear_150_1396" x1="-5.59828e-10" y1="9.05263" x2="16" y2="9.04199" gradientUnits="userSpaceOnUse">
<stop stop-color="#1CC98C"/>
<stop offset="0.205" stop-color="#24CBDE"/>
<stop offset="0.4" stop-color="#57A9F7"/>
<stop offset="0.6" stop-color="#BD52F9"/>
<stop offset="0.8" stop-color="#EBB347"/>
<stop offset="1" stop-color="#FFF845"/>
</linearGradient>
</defs>
</svg>
