Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
${z(1)};
${({ size }) => styles[size].radioStyles};
}
& + label:hover::before {
border: 2px solid ${tokens.color.black};
}
& + label > .radio-icon {
color: ${tokens.color.black};
${({ size }) => styles[size].radioIconStyles};
opacity: 0;
pointer-events: none;
transform: translateX(-50%);
transition: opacity 0.15s ease-out;
${z(2)};
}
& + label > .radio-solid-background {
background-color: ${tokens.color.black};
${({ size }) => styles[size].radioIconBackgroundStyles};
}
&:checked {
& + label.deselectable:hover:before {
background: ${tokens.color.blackLighten60};
}
& + label::before {
border: 2px solid ${tokens.color.black};
}
}
${({ size, hasLabel }) => styles[size].labelStyles(hasLabel)};
position: relative;
}
& + label::before,
& + label > .radio-icon {
position: absolute;
top: 0;
}
& + label::before {
background: ${tokens.color.white};
border: 2px solid ${tokens.border.color};
content: "";
left: 0;
${z(1)};
${({ size }) => styles[size].radioStyles};
}
& + label:hover::before {
border: 2px solid ${tokens.color.black};
}
& + label > .radio-icon {
color: ${tokens.color.black};
${({ size }) => styles[size].radioIconStyles};
opacity: 0;
pointer-events: none;
transform: translateX(-50%);
transition: opacity 0.15s ease-out;
${z(2)};
}