zarm-web/lib/radio/style/index.css

基于 React 的桌面端UI库

:root {
  --theme-default:hsl(0, 0%, 90%);
  --theme-default-light:hsla(0, 0%, 90%, 0.8);
  --theme-default-dark:hsl(0, 0%, 86%);
  --theme-primary:hsl(156, 100%, 36.9%);
  --theme-primary-light:hsla(156, 100%, 36.9%, 0.8);
  --theme-primary-dark:hsl(156, 100%, 32.9%);
  --theme-success:hsl(156, 100%, 36.9%);
  --theme-success-light:hsla(156, 100%, 36.9%, 0.8);
  --theme-success-dark:hsl(156, 100%, 32.9%);
  --theme-warning:hsl(31, 83.1%, 55.9%);
  --theme-warning-light:hsla(31, 83.1%, 55.9%, 0.8);
  --theme-warning-dark:hsl(31, 83.1%, 51.9%);
  --theme-danger:hsl(0, 100%, 65.7%);
  --theme-danger-light:hsla(0, 100%, 65.7%, 0.8);
  --theme-danger-dark:hsl(0, 100%, 61.7%);
  --color-text: #343434;
  --color-text-inverse: #fff;
  --color-text-placeholder: #a9a9a9;
  --color-text-disabled: #bcbcbc;
  --color-text-caption: #909090;
  --color-link: var(--theme-primary);
  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.2);
  --background-disabled: #fafafa;
  --border-color: #dcdcdc;
  --border-disabled: #e6e6e6;
  --zindex-tooltip: 1500;
  --opacity-disabled: 0.5;
  --opacity-tooltip: 0.8;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-round: 1000px;
  --radius-circle: 50%;
  --padding-h-xs: 8px;
  --padding-h-sm: 12px;
  --padding-h-md: 14px;
  --padding-h-lg: 16px;
  --padding-h-xl: 18px;
  --padding-v-xs: 6px;
  --padding-v-sm: 8px;
  --padding-v-md: 12px;
  --padding-v-lg: 14px;
  --padding-v-xl: 18px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --activity-indicator-size-md: 16px;
  --activity-indicator-size-lg: 32px;
  --activity-indicator-path-color: #e6e6e6;
  --avatar-border-radius: 50%;
  --avatar-fontSize: 14px;
  --avatar-width-md: 40px;
  --avatar-height-md: 40px;
  --avatar-width-xl: 72px;
  --avatar-height-xl: 72px;
  --avatar-width-lg: 48px;
  --avatar-height-lg: 48px;
  --avatar-width-sm: 32px;
  --avatar-height-sm: 32px;
  --avatar-width-xs: 24px;
  --avatar-height-xs: 24px;
  --avatar-default-color: #fff;
  --avatar-default-bg-color: #ccc;
  --badge-height: 14px;
  --badge-font-size: var(--font-size-xs);
  --badge-padding-h: 4px;
  --badge-dot-diameter: 8px;
  --badge-border-radius-rect: var(--radius-sm);
  --badge-border-radius-round: var(--radius-round);
  --badge-sup-top: -4px;
  --badge-text-color: #fff;
  --breadcrumb-default-font-size: 14px;
  --breadcrumb-default-color: var(--color-text-caption);
  --breadcrumb-color: var(--color-text);
  --breadcrumb-hover-color: var(--theme-primary);
  --breadcrumb-separator-color: rgba(0, 0, 0, 0.45);
  --button-ghost-disabled-border: var(--border-color);
  --button-ghost-disabled-color: var(--color-text-inverse);
  --button-padding-h-xl: var(--padding-h-xl);
  --button-padding-h-lg: var(--padding-h-lg);
  --button-padding-h-md: var(--padding-h-md);
  --button-padding-h-sm: var(--padding-h-sm);
  --button-padding-h-xs: var(--padding-h-xs);
  --button-height-xl: 40px;
  --button-height-lg: 36px;
  --button-height-md: 32px;
  --button-height-sm: 28px;
  --button-height-xs: 24px;
  --button-font-size-xl: 16px;
  --button-font-size-lg: 16px;
  --button-font-size-md: 14px;
  --button-font-size-sm: 12px;
  --button-font-size-xs: 12px;
  --button-icon-size-xl: 20px;
  --button-icon-size-lg: 18px;
  --button-icon-size-md: 16px;
  --button-icon-size-sm: 14px;
  --button-icon-size-xs: 14px;
  --button-disabled-opacity: var(--opacity-disabled);
  --button-disabled-color-ghost: var(--border-disabled);
  --button-default-background: var(--color-text-inverse);
  --button-default-border: var(--border-color);
  --button-default-color: var(--color-text);
  --button-default-hover-background: var(--color-text-inverse);
  --button-default-hover-border: var(--theme-primary);
  --button-default-hover-color: var(--theme-primary);
  --button-default-active-background: var(--color-text-inverse);
  --button-default-active-border: var(--theme-primary-dark);
  --button-default-active-color: var(--theme-primary-dark);
  --button-default-ghost-border: var(--color-text-inverse);
  --button-default-ghost-color: var(--color-text-inverse);
  --button-default-ghost-hover-border: var(--theme-primary-light);
  --button-default-ghost-hover-color: var(--theme-primary-light);
  --button-default-ghost-active-border: var(--theme-primary-dark);
  --button-default-ghost-active-color: var(--theme-primary-dark);
  --button-primary-background: var(--theme-primary);
  --button-primary-border: var(--theme-primary);
  --button-primary-color: var(--color-text-inverse);
  --button-primary-hover-background: var(--theme-primary-light);
  --button-primary-hover-border: var(--theme-primary-light);
  --button-primary-hover-color: var(--color-text-inverse);
  --button-primary-active-background: var(--theme-primary-dark);
  --button-primary-active-border: var(--theme-primary-dark);
  --button-primary-active-color: var(--color-text-inverse);
  --button-primary-ghost-border: var(--theme-primary);
  --button-primary-ghost-color: var(--theme-primary);
  --button-primary-ghost-hover-border: var(--theme-primary-light);
  --button-primary-ghost-hover-color: var(--theme-primary-light);
  --button-primary-ghost-active-border: var(--theme-primary-dark);
  --button-primary-ghost-active-color: var(--theme-primary-dark);
  --button-primary-gap-color: hsla(0, 0%, 100%, 0.3);
  --button-danger-background: var(--theme-danger);
  --button-danger-border: var(--theme-danger);
  --button-danger-color: var(--color-text-inverse);
  --button-danger-hover-background: var(--theme-danger-light);
  --button-danger-hover-border: var(--theme-danger-light);
  --button-danger-hover-color: var(--color-text-inverse);
  --button-danger-active-background: var(--theme-danger-dark);
  --button-danger-active-border: var(--theme-danger-dark);
  --button-danger-active-color: var(--color-text-inverse);
  --button-danger-ghost-border: var(--theme-danger);
  --button-danger-ghost-color: var(--theme-danger);
  --button-danger-ghost-hover-border: var(--theme-danger-light);
  --button-danger-ghost-hover-color: var(--theme-danger-light);
  --button-danger-ghost-active-border: var(--theme-danger-dark);
  --button-danger-ghost-active-color: var(--theme-danger-dark);
  --checkbox-size: 14px;
  --checkbox-radius: var(--radius-sm);
  --checkbox-border-color: var(--border-color);
  --loading-height-xs: 12px;
  --loading-height-md: 24px;
  --loading-height-lg: 36px;
  --loading-margin-h-xs: var(--padding-h-xs);
  --loading-margin-h-md: var(--padding-h-md);
  --loading-margin-h-lg: var(--padding-h-lg);
  --loading-font-size-xs: var(--font-size-xs);
  --loading-font-size-md: var(--font-size-md);
  --loading-font-size-lg: var(--font-size-lg);
  --loading-default-svg-color: var(--theme-primary);
  --loading-default-text-color: var(--color-text-disabled);
  --loading-default-mask-color: rgba(255, 255, 255, 0.4);
  --loading-default-mask-zIndex: 1000;
  --loading-inverse-mask-color: rgba(0, 0, 0, 0.4);
  --icon-font-size-sm: 16px;
  --icon-font-size-md: 24px;
  --icon-font-size-lg: 32px;
  --icon-theme-default: var(--color-text);
  --radio-size: 14px;
  --radio-radius: var(--radius-circle);
  --radio-border-color: var(--border-color);
  --radio-color: #616161;
  --menu-color: #343434;
  --menu-default-bg-color: var(--color-text-inverse);
  --menu-dark-bg-color: #001529;
  --menu-collapsed-width: 80px;
  --submenu-dark-bg-color: #000c17;
  --menuitem-dark-color: hsla(0, 0%, 100%, 0.65);
  --menuitem-dark-active-color: var(--color-text-inverse);
  --menuitem-default-color: #343434;
  --menuitem-active-color: var(--theme-primary);
  --menuitem-active-bg-color: rgba(0, 188, 112, 0.0625);
  --menuitem-disabled-color: rgba(0, 0, 0, 0.25);
  --menuitem-divider-bg-color: #e5e5e5;
  --menuitem-horizontal-padding: 20px;
  --menuitem-horizontal-height: 56px;
  --steps-title-color: var(--color-text);
  --steps-desc-color: var(--color-text-caption);
  --steps-title-font-size: var(--font-size-md);
  --steps-desc-font-size: var(--font-size-md);
  --steps-border-color: var(--border-color);
  --steps-status-wait: #bcbcbc;
  --steps-status-process: var(--theme-primary);
  --steps-status-error: var(--theme-danger);
  --steps-icon-size: 28px;
  --steps-content-width: 140px;
  --switch-width-md: 48px;
  --switch-width-sm: 32px;
  --switch-height-md: 20px;
  --switch-height-sm: 16px;
  --switch-background: #bcbcbc;
  --tabs-font-size-sm: 14px;
  --tabs-font-size-md: 16px;
  --tabs-font-size-lg: 18px;
  --tabs-header-icon-sm: 12px;
  --tabs-header-icon-md: 14px;
  --tabs-header-icon-lg: 16px;
  --tabs-header-card-height-sm: 34px;
  --tabs-header-card-height-md: 40px;
  --tabs-header-card-height-lg: 46px;
  --tabs-header-line-height-sm: 38px;
  --tabs-header-line-height-md: 48px;
  --tabs-header-line-height-lg: 58px;
  --tabs-header-vertical-height-sm: 30px;
  --tabs-header-vertical-height-md: 36px;
  --tabs-header-vertical-height-lg: 42px;
  --tabs-header-line-padding-sm: 12px;
  --tabs-header-line-padding-md: 16px;
  --tabs-header-line-padding-lg: 20px;
  --tabs-header-card-padding-sm: 10px;
  --tabs-header-card-padding-md: 12px;
  --tabs-header-card-padding-lg: 14px;
  --tabs-header-vertical-padding-sm: 16px;
  --tabs-header-vertical-padding-md: 20px;
  --tabs-header-vertical-padding-lg: 24px;
  --tabs-default-color: #616161;
  --tabs-default-hover-color: #33c98d;
  --tabs-default-disabled-color: var(--color-text-disabled);
  --tabs-default-icon-color: #bcbcbc;
  --tabs-default-icon-disabled-color: var(--border-disabled);
  --tabs-default-icon-hover-color: var(--color-text);
  --tabs-default-active-background: var(--color-text-inverse);
  --tabs-default-line-color: #00bc70;
  --tabs-default-active-color: #00bc70;
  --tabs-default-background-color: var(--color-text-inverse);
  --tabs-default-card-background: #fafafa;
  --tabs-default-noborder-background: #f2f2f2;
  --tag-height-lg: 32px;
  --tag-height-md: 28px;
  --tag-height-sm: 24px;
  --tag-height-xs: 20px;
  --tag-padding-h-lg: 16px;
  --tag-padding-h: 12px;
  --tag-font-size: 12px;
  --tag-icon-size-lg: 14px;
  --tag-icon-size: 12px;
  --tag-icon-size-xs: 10px;
  --tag-color-disabled: var(--color-text-disabled);
  --tag-disabled-opacity: var(--opacity-disabled);
  --tag-default-background: #f9f9f9;
  --tag-default-color: #616161;
  --tag-default-border: var(--border-color);
  --tag-primary-color: var(--theme-primary);
  --tag-success-color: var(--theme-success);
  --tag-warning-color: var(--theme-warning);
  --tag-danger-color: var(--theme-danger);
  --tag-primary-hover-background: var(--theme-primary-light);
  --tag-primary-active-background: var(--theme-primary-dark);
  --tag-color-green: 0, 188, 112;
  --tag-color-blue: 84, 192, 232;
  --tag-color-orange: 236, 145, 49;
  --tag-color-red: 255, 80, 80;
  --tooltip-font-size: 12px;
  --tooltip-color: var(--color-text-inverse);
  --tooltip-arrow-size: 4px;
  --tooltip-light-background-color: #f2f2f2;
  --tooltip-dark-background-color: rgba(0, 0, 0, var(--opacity-tooltip));
  --tooltip-padding-v: var(--padding-v-xs);
  --tooltip-padding-h: var(--padding-h-xs);
}

.zw-radio {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  color: var(--color-text);
  font-size: 14px;
}
.zw-radio:not(.zw-radio--disabled):hover .zw-radio__inner {
  border-color: var(--theme-primary);
}

.zw-radio__widget {
  display: inline-block;
  vertical-align: middle;
}

.zw-radio__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.zw-radio__text {
  vertical-align: middle;
  margin: 0 8px;
}

.zw-radio__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid var(--radio-border-color);
  border-radius: var(--radio-radius);
  background: var(--color-text-inverse);
}
.zw-radio__inner:before {
  content: "";
  width: calc(var(--radio-size) / 3.5);
  height: calc(var(--radio-size) / 2);
  border: calc(var(--radio-size) / 9) solid var(--color-text-inverse);
  border-top: 0;
  border-left: 0;
  margin-top: calc(var(--radio-size) / -12);
  margin-left: calc(var(--radio-size) / 18);
  transform: rotate(45deg) scale(0);
  transition: all 0.2s cubic-bezier(0.71, -0.46, 0.88, 0.6);
}

.zw-radio--indeterminate .zw-radio__inner:before {
  transform: scale(1);
  width: calc(var(--radio-size) / 2.33);
  height: calc(var(--radio-size) / 2.33);
  margin-top: 0;
  margin-left: 0;
  border: none;
  background-color: var(--theme-primary);
}

.zw-radio--checked .zw-radio__inner {
  border-color: var(--theme-primary);
  background-color: var(--theme-primary);
}
.zw-radio--checked .zw-radio__inner:before {
  transform: rotate(45deg) scale(1);
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.zw-radio--disabled .zw-radio__input {
  cursor: not-allowed;
}

.zw-radio--disabled .zw-radio__text {
  color: var(--color-text-disabled);
}

.zw-radio--disabled .zw-radio__inner {
  opacity: var(--opacity-disabled);
}

.zw-radio--disabled.zw-radio--checked .zw-radio__inner {
  border-color: var(--radio-border-color);
  background-color: var(--radio-border-color);
}

.zw-radio--untext {
  line-height: 1;
}

.zw-radio-group {
  display: inline-block;
  overflow: hidden;
}
.zw-radio-group__inner {
  margin-right: -24px;
  margin-bottom: -8px;
}

.zw-radio-group .zw-radio {
  margin-right: 24px;
  margin-bottom: 8px;
}
.zw-radio-group--block {
  width: 100%;
}
.zw-radio-group--block .zw-radio-group__inner {
  display: flex;
}

.zw-radio-group--block .zw-radio {
  flex: 1;
}

.zw-radio-group--button .zw-radio-group__inner {
  margin-right: -8px;
  margin-bottom: -8px;
}

.zw-radio-group--button .zw-radio {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0;
  border: none;
  font-weight: normal;
  text-align: center;
  overflow: hidden;
  color: var(--color-text);
  outline: 0 none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;
  /* disabled Button */
  /* block Button */
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-xs);
}
.zw-radio-group--button .zw-radio, .zw-radio-group--button .zw-radio:active, .zw-radio-group--button .zw-radio:hover, .zw-radio-group--button .zw-radio:focus, .zw-radio-group--button .zw-radio:visited {
  text-decoration: none;
}
.zw-radio-group--button .zw-radio.zw-radio--disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.zw-radio-group--button .zw-radio.zw-radio--block {
  display: block;
  width: 100%;
}

.zw-radio-group--button .zw-radio, .zw-radio-group--button .zw-radio:hover {
  background-color: var(--button-default-background);
  border-color: var(--button-default-border);
  color: var(--button-default-color);
}
.zw-radio-group--button .zw-radio:active {
  background-color: var(--button-default-background);
  border-color: var(--button-default-border);
  color: var(--button-default-color);
}
.zw-radio-group--button .zw-radio.zw-radio--disabled {
  opacity: var(--button-disabled-opacity);
  cursor: not-allowed;
}

.zw-radio-group--button .zw-radio.zw-radio--shadow {
  box-shadow: 0 3px 3px 0 var(--button-default-shadow-color);
}

.zw-radio-group--button .zw-radio .zw-radio__text {
  margin: 0;
}

.zw-radio-group--button .zw-radio.zw-radio--checked, .zw-radio-group--button .zw-radio.zw-radio--checked:hover {
  background-color: var(--button-primary-background);
  border-color: var(--button-primary-border);
  color: var(--button-primary-color);
}
.zw-radio-group--button .zw-radio.zw-radio--checked:active {
  background-color: var(--button-primary-active-background);
  border-color: var(--button-primary-active-border);
  color: var(--button-primary-active-color);
}
.zw-radio-group--button .zw-radio.zw-radio--checked.zw-radio--disabled {
  opacity: var(--button-disabled-opacity);
  cursor: not-allowed;
}

.zw-radio-group--button .zw-radio.zw-radio--checked.zw-radio--shadow {
  box-shadow: 0 3px 3px 0 var(--button-primary-shadow-color);
}

.zw-radio-group--button.zw-radio-group--block .zw-radio {
  flex: 1;
}

.zw-radio-group--button.zw-radio-group--rect .zw-radio {
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
}

.zw-radio-group--button.zw-radio-group--radius .zw-radio {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-md);
}

.zw-radio-group--button.zw-radio-group--round .zw-radio {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-round);
}

.zw-radio-group--button.zw-radio-group--circle .zw-radio {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-circle);
}

.zw-radio-group--button.zw-radio-group--lg .zw-radio {
  padding: 0 var(--button-padding-h-lg);
  font-size: var(--button-font-size-lg);
  height: var(--button-height-lg);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--lg .zw-radio.zw-radio--circle {
  width: var(--button-height-lg);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--lg .zw-radio .zw-icon {
  font-size: var(--button-icon-size-lg);
}
.zw-radio-group--button.zw-radio-group--lg .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-lg) / 2);
}

.zw-radio-group--button.zw-radio-group--md .zw-radio {
  padding: 0 var(--button-padding-h-md);
  font-size: var(--button-font-size-md);
  height: var(--button-height-md);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--md .zw-radio.zw-radio--circle {
  width: var(--button-height-md);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--md .zw-radio .zw-icon {
  font-size: var(--button-icon-size-md);
}
.zw-radio-group--button.zw-radio-group--md .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-md) / 2);
}

.zw-radio-group--button.zw-radio-group--sm .zw-radio {
  padding: 0 var(--button-padding-h-sm);
  font-size: var(--button-font-size-sm);
  height: var(--button-height-sm);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--sm .zw-radio.zw-radio--circle {
  width: var(--button-height-sm);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--sm .zw-radio .zw-icon {
  font-size: var(--button-icon-size-sm);
}
.zw-radio-group--button.zw-radio-group--sm .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-sm) / 2);
}

.zw-radio-group--button.zw-radio-group--xs .zw-radio {
  padding: 0 var(--button-padding-h-xs);
  font-size: var(--button-font-size-xs);
  height: var(--button-height-xs);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--xs .zw-radio.zw-radio--circle {
  width: var(--button-height-xs);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--xs .zw-radio .zw-icon {
  font-size: var(--button-icon-size-xs);
}
.zw-radio-group--button.zw-radio-group--xs .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-xs) / 2);
}

.zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked, .zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked:hover {
  background-color: transparent;
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}
.zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked:active {
  background-color: transparent;
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}
.zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked.zw-radio--disabled, .zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked.zw-radio--disabled:active, .zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked.zw-radio--disabled:hover, .zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked.zw-radio--disabled:focus, .zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--checked.zw-radio--disabled:visited {
  background-color: transparent;
  border-color: var(--theme-primary);
  color: var(--theme-primary);
  cursor: not-allowed;
}

.zw-radio-group--button.zw-radio-group--compact .zw-radio:not(:last-child) {
  margin-right: -1px;
}
.zw-radio-group--button.zw-radio-group--compact .zw-radio:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.zw-radio-group--button.zw-radio-group--compact .zw-radio:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.zw-radio-group--button.zw-radio-group--compact .zw-radio:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.zw-radio-group--button.zw-radio-group--compact .zw-radio.zw-radio--checked {
  z-index: 1;
}

.zw-radio-group--cell {
  display: block;
  overflow: visible;
}
.zw-radio-group--cell .zw-radio-group__inner {
  margin-right: 0;
  margin-bottom: 0;
}

.zw-radio-group--cell .zw-radio {
  position: static;
  margin-right: 0;
  margin-bottom: 0;
}

.zw-radio__inner:before {
  content: "";
  width: calc(var(--radio-size) / 2.33);
  height: calc(var(--radio-size) / 2.33);
  border: none;
  border-radius: var(--radius-circle);
  background-color: var(--theme-primary);
  margin: 0;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.71, -0.46, 0.88, 0.6);
}

.zw-radio--checked .zw-radio__inner {
  background-color: var(--color-text-inverse);
}
.zw-radio--checked .zw-radio__inner:before {
  transform: scale(1);
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.zw-radio--disabled .zw-radio__inner {
  opacity: 1;
  background-color: var(--background-disabled);
}

.zw-radio--disabled.zw-radio--checked .zw-radio__inner {
  background-color: var(--background-disabled);
}
.zw-radio--disabled.zw-radio--checked .zw-radio__inner:before {
  background-color: var(--radio-border-color);
}

.zw-radio-group--button .zw-radio {
  color: var(--radio-color);
}
.zw-radio-group--button .zw-radio:hover {
  color: var(--theme-primary);
}
.zw-radio-group--button .zw-radio.zw-radio--disabled {
  opacity: 1;
  background-color: var(--background-disabled);
  color: var(--color-text-disabled);
}
.zw-radio-group--button .zw-radio.zw-radio--disabled:hover {
  color: var(--color-text-disabled);
}

.zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--disabled.zw-radio--checked, .zw-radio-group--button.zw-radio-group--ghost .zw-radio.zw-radio--disabled.zw-radio--checked:hover {
  opacity: 1;
  border-color: var(--button-default-border);
  background-color: #f2f2f2;
  color: var(--color-text-disabled);
}

.zw-radio-group--button.zw-radio-group--lg .zw-radio {
  padding: 0 var(--button-padding-h-lg);
  font-size: var(--button-font-size-lg);
  height: var(--button-height-lg);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--lg .zw-radio.zw-radio--circle {
  width: var(--button-height-lg);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--lg .zw-radio .zw-icon {
  font-size: var(--button-icon-size-lg);
}
.zw-radio-group--button.zw-radio-group--lg .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-lg) / 2);
}

.zw-radio-group--button.zw-radio-group--md .zw-radio {
  padding: 0 var(--button-padding-h-md);
  font-size: var(--button-font-size-md);
  height: var(--button-height-md);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--md .zw-radio.zw-radio--circle {
  width: var(--button-height-md);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--md .zw-radio .zw-icon {
  font-size: var(--button-icon-size-md);
}
.zw-radio-group--button.zw-radio-group--md .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-md) / 2);
}

.zw-radio-group--button.zw-radio-group--sm .zw-radio {
  padding: 0 var(--button-padding-h-xs);
  font-size: var(--button-font-size-xs);
  height: var(--button-height-xs);
  line-height: 1.5;
}
.zw-radio-group--button.zw-radio-group--sm .zw-radio.zw-radio--circle {
  width: var(--button-height-xs);
  padding: 0;
}

.zw-radio-group--button.zw-radio-group--sm .zw-radio .zw-icon {
  font-size: var(--button-icon-size-xs);
}
.zw-radio-group--button.zw-radio-group--sm .zw-radio * + span {
  margin-left: calc(var(--button-padding-h-xs) / 2);
}