:root {
  --g-size-sm: var(--space-400);
  --g-size-md: var(--space-600);
}

.input {
  composes: absolute from "./Layout.css";
  composes: m0 from "./Whitespace.css";
  appearance: none;
  opacity: var(--opacity-0);
  outline: 0;
}

.InputEnabled {
  composes: pointer from "./Cursor.css";
}

.sizeSm {
  height: var(--space-400);
  width: var(--space-400);
}

.sizeMd {
  height: var(--space-600);
  width: var(--space-600);
}

.RadioButton {
  composes: block from "./Layout.css";
  composes: borderBox from "./Layout.css";
  composes: circle from "./Borders.css";
  composes: flex from "./Layout.css";
  composes: xsItemsCenter from "./Layout.css";
  composes: justifyCenter from "./Layout.css";
  composes: relative from "./Layout.css";
  composes: solid from "./Borders.css";
}

.Border {
  composes: borderColorDarkGray from "./Borders.css";
}

.BorderCheckedSm {
  border-width: 6px;
}

.BorderCheckedMd {
  border-width: 8px;
}

.BorderSelected {
  composes: borderColorSelected from "./Borders.css";
}

.BorderDisabled {
  composes: noBorder from "./Borders.css";
}

.BorderDisabledChecked {
  composes: borderColorLightGrayDisabled from "./Borders.css";
}

.BorderHovered {
  composes: borderColorLightGrayHovered from "./Borders.css";
}

.BorderUnchecked {
  composes: sizeLg from "./Borders.css";
}

.outerFocusedOutline {
  outline: 2px solid var(--sema-color-border-focus-outer-default);
}

.innerBorderFocused {
  border: 2px solid var(--sema-color-border-focus-inner-default);
}

.innerBorderDisabled {
  border: 2px solid var(--sema-color-background-disabled);
}

.innerBorderChecked {
  border: 2px solid var(--sema-color-background-selected);
}

.innerBorderUnchecked {
  border: 2px solid var(--sema-color-border-focus-inner-default);
}

.BgDisabled {
  background-color: var(--color-background-formfield-disabled);
}

.BgEnabled {
  background-color: var(--color-background-formfield-primary);
}