body {
  --radio-margin-text-left: 8px;
  --radio-scale: scale(0.6);
  --radio-border-width: 2px;
  --radio-color-border: var(--border-level-2-color);
  --radio-layout-height: 18px;
  --radio-color-bg: #fff;
  --radio-color-bg_checked: var(--brand-color);
  --radio-border-color_disabled_checked: var(--brand-color-disabled);
  --radio-color-text_disabled: var(--text-color-disabled);
  --radio-color-border_disabled: var(--border-level-2-color);
  --radio-color-bg_disabled: var(--brand-color-disabled);
  --radio-border-color-bg_disabled_checked: var(--brand-color-disabled);
  --radio-color-dot-bg_checked_disabled: var(--brand-color-disabled);
  --radio-group-margin-right: 24px;
  --radio-button-color-text: var(--text-color-secondary);
  --radio-button-color-hover-text: var(--text-color-primary);
  --radio-button-spacing_padding: 2px;
  --radio-button-height: 32px;
  --radio-group-button-color-bg: var(--bg-color-component);
  --radio-button-padding-horizontal: 0 16px;
  --radio-button-border-radius: 4px;
  --radio-button-color-bg_disabled: transparent;
  --radio-button-color-text_disabled: var(--text-color-disabled);
  --radio-button-color-bg_checked_disabled: #fff;
  --radio-button-color-text-color_checked_disabled: var(--brand-color-disabled);
}
.mx-radio > input[type='radio'],
.mx-radio-button > input[type='radio'] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.mx-radio {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: unset;
}
.mx-radio-text {
  margin-left: var(--radio-margin-text-left);
}
.mx-radio:hover .mx-radio-mask {
  border-color: var(--radio-color-bg_checked);
}
.mx-radio-mask {
  border: var(--radio-border-width) solid var(--radio-color-border);
  box-sizing: border-box;
  height: var(--radio-layout-height);
  width: var(--radio-layout-height);
  border-radius: 50%;
  position: relative;
  transition: border 0.1s linear;
}
.mx-radio-mask::after {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  content: '';
  border-radius: 50%;
  width: calc(var(--radio-layout-height) - var(--radio-border-width) * 2);
  height: calc(var(--radio-layout-height) - var(--radio-border-width) * 2);
  top: 0;
  left: 0;
  transform: scale(1);
  transition: transform 0.1s linear;
}
.mx-radio-checked .mx-radio-mask {
  background-color: var(--radio-color-bg_checked);
  border-color: var(--radio-color-bg_checked);
}
.mx-radio-checked .mx-radio-mask::after {
  transform: var(--radio-scale);
  background-color: var(--radio-color-bg);
}
.mx-radio-checked:hover .mx-radio-mask {
  border-color: var(--radio-color-bg_checked);
}
.mx-radio-disabled {
  cursor: not-allowed;
}
.mx-radio-disabled .mx-radio-text {
  color: var(--radio-color-text_disabled);
}
.mx-radio-disabled .mx-radio-mask {
  border-color: var(--radio-color-border_disabled);
}
.mx-radio-disabled:hover .mx-radio-mask {
  border-color: var(--radio-color-border_disabled);
}
.mx-radio-checked.mx-radio-disabled .mx-radio-mask,
.mx-radio-checked.mx-radio-disabled:hover .mx-radio-mask {
  border-color: var(--radio-border-color_disabled_checked);
  background-color: var(--radio-border-color-bg_disabled_checked);
}
.mx-radio-checked.mx-radio-disabled .mx-radio-mask::after {
  transform: var(--radio-scale);
}
.mx-radio-group {
  display: inline-flex;
}
.mx-radio-group .mx-radio {
  margin-right: var(--radio-group-margin-right);
}
.mx-radio-group-type-button {
  position: relative;
  z-index: 0;
  padding: var(--radio-button-spacing_padding);
  background-color: var(--radio-group-button-color-bg);
  display: inline-flex;
  height: var(--radio-button-height);
  border-radius: var(--radio-button-border-radius);
  align-items: center;
  box-sizing: border-box;
}
.mx-radio-button {
  display: inline-flex;
  position: relative;
  font-size: var(--radio-font-text-size);
  color: var(--radio-button-color-text);
  height: 100%;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radio-button-border-radius);
  transition: all 0.1s linear;
}
.mx-radio-button-inner {
  padding: var(--radio-button-padding-horizontal);
}
.mx-radio-button:hover {
  color: var(--radio-button-color-hover-text);
}
.mx-radio-button.mx-radio-checked {
  background-color: var(--bg-color-container-select);
  color: var(--radio-button-color-hover-text);
  transition: all 0.1s linear;
}
.mx-radio-button.mx-radio-disabled {
  cursor: not-allowed;
  background-color: var(--radio-button-color-bg_disabled);
  color: var(--radio-button-color-text_disabled);
}
.mx-radio-button.mx-radio-disabled.mx-radio-checked {
  background-color: var(--radio-button-color-bg_checked_disabled);
  color: var(--radio-button-color-text-color_checked_disabled);
}
.mx-radio-group-direction-vertical {
  display: flex;
  flex-direction: column;
}
.mx-radio-group-direction-vertical .mx-radio {
  margin-bottom: 20px;
}