.RadioButton {
  position: relative;
  display: flex;
}

.Input {
  opacity: 0;
  height: 12px;
  width: 12px;
  margin: 0;
  margin-right: 5px;
  padding: 0;
  flex-shrink: 0;
}

.Label {
  display: inline-flex;
  font-size: var(--input-font-size);
  cursor: pointer;
  color: var(--label-color);
}
.Label.Checked {
  color: var(--input-color);
}
.Disabled .Label {
  color: var(--label-color-disabled);
  cursor: auto;
}

.LabelBefore {
  flex-shrink: 0;
  display: inline-block;
  height: 12px;
  width: 12px;
  /*position: relative;*/
  /*top: 1px;*/
  /*right: 10px;*/
  position: absolute;
  top: 2px;
  left: 0;
}

.Input:focus + label .LabelBefore {
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-shadow);
  outline: none;
}

.UncheckedIcon {
  height: 12px;
  width: 12px;
  fill: var(--icon-neutral-color);
}

.CheckedIcon {
  height: 12px;
  width: 12px;
}

.CheckedIcon :global .cls-1 {
  fill: var(--primary-color);
}
.CheckedIcon :global .cls-2 {
  fill: white;
}

.Disabled .CheckedIcon :global .cls-1 {
  fill: var(--icon-neutral-color);
}

/***********************************************/

.RadioGroup {
  display: flex;
}

.RadioGroupLabel {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: var(--label-color);
}
.Disabled .RadioGroupLabel {
  color: var(--label-color-disabled);
}

.RadioGroup.RadioGroupHorizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.RadioGroup.RadioGroupHorizontal .RadioButton {
  margin-left: 10px;
}

.RadioGroup.RadioGroupVertical {
  flex-direction: column;
}

.RadioGroup.RadioGroupVertical .RadioButton {
  width: 100%;
  margin-bottom: 5px;
  margin-left: 2px;
}

.RadioGroup.RadioGroupVertical .LabelWrapper {
  margin-bottom: 7px;
}