wix-style-react/src/RadioGroup/RadioButton/RadioButton.st.css

wix-style-react

:import {
  -st-from: '../../Foundation/stylable/colors.st.css';
  -st-named: F00, D80, D10, D60, THEME-COLOR-10, THEME-COLOR-20, THEME-COLOR-40,
    THEME-COLOR-50, THEME-COLOR-60, D10-30, D10-05;
}

:import {
  -st-from: 'wix-ui-core/hocs.st.css';
  -st-named: Focusable;
}

.optionWrapper,
.optionWrapper .radioWrapper {
  cursor: initial;
  box-sizing: border-box;
  outline: none;
}

.radioWrapper:not(.checked) .radio:hover:not(:active) {
  background-color: value(THEME-COLOR-40);
}

.radioWrapper > input {
  display: none;
}

.radioWrapper .label {
  cursor: inherit;
  display: block;
}

.radioWrapper.disabled .label {
  cursor: default;
  pointer-events: none;
}

.radioWrapper .label .labelInner {
  display: flex;
  flex-direction: row;
  cursor: inherit;
}

.radioWrapper .label .labelInner.vcenter {
  align-items: center;
}

.focusableRadioButton {
  -st-extends: Focusable;
}

.focusableRadioButton:focus-visible .radioWrapper .radio {
  border-color: value(THEME-COLOR-10);
  box-shadow: 0 0 0 3px value(F00);
}

.radioWrapper {
  outline: none;
}

.children {
  cursor: pointer;
  padding-left: 12px;
}

.radio {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  min-width: 16px;
  height: 16px;
  border: 1px solid value(THEME-COLOR-10);
  background-color: value(D80);
  border-radius: 50%;
  cursor: pointer;
}

.disabled .radio {
  color: value(D10-30);
  border-color: value(D10-30);
  background-color: value(D10-05);
}

.disabled.checked .radio::after {
  background-color: value(D10-30);
}

.radio::after {
  content: '';
  display: block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  margin: 2px;
}

.checked:not(.disabled) .radioButtonChecked::after {
  background-color: value(THEME-COLOR-10);
}

.radio:active::after {
  background-color: value(THEME-COLOR-20);
}

.radioButtonWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

:global([dir='rtl']) .children {
  padding-left: 0;
  padding-right: 12px;
}

.content {
  margin-top: 6px;
}