@nami-ui/radio/lib/radio.css

a radio component.

.nami-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.nami-radio__input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.nami-radio__cell {
  display: block;
  width: var(--nami-radio-size, 16px);
  height: var(--nami-radio-size, 16px);
  position: relative;
}
.nami-radio__cell__frame {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border: var(--nami-box-base-border-width, 1px) solid var(--nami-radio-color, var(--nami-primary-700, #388fd7));
  border-radius: 100%;
  background-color: transparent;
}
.nami-radio__cell__icon {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: 2px;
  color: var(--nami-radio-color, var(--nami-primary-700, #388fd7));
  transform: scale(0);
}
.nami-radio__label {
  margin-left: var(--nami-distance-small, 8px);
  font-size: var(--nami-font-size-base, 14px);
  line-height: var(--nami-line-height-base, 24px);
}
.nami-radio:active:not(.nami-radio--disabled):not(.nami-radio--readonly) .nami-radio__cell__frame {
  opacity: 0.7;
}
.nami-radio:active:not(.nami-radio--disabled):not(.nami-radio--readonly).nami-radio--checked .nami-radio__cell__frame {
  opacity: 1;
}
.nami-radio--checked .nami-radio__cell__frame {
  border-color: var(--nami-radio-color, var(--nami-primary-700, #388fd7));
}
.nami-radio--checked .nami-radio__cell__icon {
  transform: scale(1);
}
.nami-radio--disabled {
  opacity: 0.5;
  color: var(--nami-text-color-quiet, #7f8284);
}
.nami-radio--disabled:not(.nami-radio--checked) .nami-radio__cell__frame {
  background: #f0f1f2;
}