@spaced-out/ui-design-system/lib/components/RadioButton/RadioButton.module.css

Sense UI components library

@value (
  borderWidthNone,
  borderWidthTertiary,
  borderRadiusMedium,
  borderRadiusRadioButton
) from '../../styles/variables/_border.css';

@value (
  colorBackgroundTertiary,
  colorBorderSecondary,
  colorBorderDanger,
  colorFillPrimary,
  colorFillDisabled,
  colorFocusPrimary,
  colorFocusDanger,
  colorTextDisabled
) from '../../styles/variables/_color.css';

@value (
  size20,
  size110,
  size160,
  size240,
  size500
) from '../../styles/variables/_size.css';

@value (
  spaceNone,
  spaceSmall,
  spaceMedium,
  spaceXSmall
) from '../../styles/variables/_space.css';

.container {
  display: flex;
  flex-direction: row;
  gap: spaceSmall;
  cursor: pointer;
  align-items: center;
  cursor: pointer;
}

.containerDisabled {
  cursor: not-allowed;
}

.radio {
  /* secret sauce to styling radio buttons */
  appearance: none;
  -webkit-appearance: none;
  -mozilla-appearance: none;
  vertical-align: text-bottom;
  box-sizing: border-box;
  border-radius: borderRadiusMedium;
  height: size20;
  width: size20;
  min-width: size20;
  min-height: size20;
  background: colorBackgroundTertiary;
  margin: spaceNone;
  cursor: pointer;
}

.unselected {
  border: borderWidthTertiary solid colorBorderSecondary;
}

.radio[disabled] {
  border: borderWidthTertiary solid colorFillDisabled;
  cursor: not-allowed;
}

.radio[disabled]:checked {
  border: borderRadiusRadioButton solid colorFillDisabled;
  background: colorBorderSecondary;
}

.radio:focus {
  border: borderWidthTertiary solid colorFocusPrimary;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.radio:checked:focus .radio:focus:checked {
  border: borderWidthTertiary solid colorFillPrimary;
  border-radius: borderRadiusMedium;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.radio:checked {
  border: borderRadiusRadioButton solid colorFillPrimary;
}

.selected {
  border: borderRadiusRadioButton solid colorFillPrimary;
}

.radioLabel {
  composes: formLabelMedium from '../../styles/typography.module.css';
  composes: secondary from '../../styles/typography.module.css';
}

.labelDisabled {
  color: colorTextDisabled;
}

.horizontalRadioButton {
  flex: 1 0 size160; /*  grow, don't shrink, start with size160 width */
}

.fluidRadioButton {
  flex: 0 0 auto; /* don't grow, don't shrink, auto width */
}

.error {
  border: borderWidthTertiary solid colorBorderDanger;
  border-radius: borderRadiusMedium;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

.error:focus {
  border: borderWidthTertiary solid colorBorderDanger;
  border-radius: borderRadiusMedium;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

.error:checked {
  border: borderRadiusRadioButton solid colorBorderDanger;
  border-radius: borderRadiusMedium;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
  color: colorFocusDanger;
}