@fesjs/fes-design/es/radio-button/style/index.css

fes-design for PC

.fes-radio-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin-left: -1px;
  text-align: center;
  background: var(--f-white);
  cursor: pointer;
}
.fes-radio-button :hover {
  color: var(--f-primary-color);
}
.fes-radio-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.fes-radio-button-content-small {
  padding: 0 var(--f-padding-small);
  line-height: 20px;
}
.fes-radio-button-content-middle {
  padding: 0 var(--f-padding-middle);
  line-height: 28px;
}
.fes-radio-button-content > .fes-design-icon {
  margin-right: 4px;
}
.fes-radio-button-content-checked {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  border-radius: 4px;
}
.fes-radio-button-content-checked-small {
  height: 20px;
}
.fes-radio-button-content-checked-middle {
  height: 28px;
}
.fes-radio-button-content-checked-default {
  color: var(--f-black);
  background: var(--f-white);
  transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-radio-button-content-checked-default:hover {
  color: var(--f-black);
}
.fes-radio-button-content-checked-primary {
  color: var(--f-white);
  background: var(--f-primary-color);
  transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-radio-button-content-checked-primary:hover {
  color: var(--f-white);
}
.fes-radio-button-middle {
  height: 32px;
  font-size: var(--f-font-size-base);
}
.fes-radio-button-small {
  height: 24px;
  font-size: calc(var(--f-font-size-base) - 2px);
}
.fes-radio-button-border {
  border: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-base);
}
.fes-radio-button-no-border {
  color: var(--f-sub-head-color);
  background: var(--f-border-color-split);
  border: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
}
.fes-radio-button.is-checked-primary-border {
  z-index: 1;
  color: var(--f-white);
  background: var(--f-primary-color);
  border-color: var(--f-primary-color);
  transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-radio-button.is-checked-primary-border :hover {
  color: var(--f-white);
}
.fes-radio-button.is-checked-default-border {
  z-index: 1;
  color: var(--f-primary-color);
  background: var(--f-white);
  border-color: var(--f-primary-color);
  transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-radio-button.is-disabled {
  color: var(--f-border-color-base);
  cursor: not-allowed;
}
.fes-radio-button.is-disabled :hover {
  color: var(--f-border-color-base);
}
.fes-radio-button.is-disabled.fes-radio-button-border {
  border: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-base);
}
.fes-radio-button.is-flex {
  flex: 1;
}