@zohodesk/components/es/Radio/Radio.module.css

In this Package, we Provide Some Basic Components to Build Web App

.varClass {
  /* radio default variables */
  --radio_width: var(--zd_size16);
  --radio_height: var(--zd_size16);
  --radio_bg_color: none;
  --radio_stroke_width: 2px;
  --radio_stroke_color: var(--zdt_radio_default_stroke);
  --radio_fill: none;
  --radio_inner_stroke_width: 0;
}[dir=ltr] .varClass {
  --radio_label_margin: 0 0 0 var(--zd_size6);
}[dir=rtl] .varClass {
  --radio_label_margin: 0 var(--zd_size6) 0 0;
}
.container {
  composes: varClass;
}
.pointer {
  cursor: pointer;
}
.readonly, .disabled {
  cursor: default;
}
.disabled {
  opacity: 0.7
}
.radio {
  composes: offSelection from '../common/common.module.css';
  width: var(--radio_width);
  height: var(--radio_height);
  stroke: var(--radio_stroke_color);
  background: var(--radio_bg_color);
  border-radius: 50%;
}
.radio,
.centerPath {
  fill: var(--radio_fill);
}
.filled {
  --radio_bg_color: var(--zdt_radio_default_bg);
}

.medium {
  --radio_width: var(--zd_size16);
  --radio_height: var(--zd_size16);
}
.small {
  --radio_width: var(--zd_size13);
  --radio_height: var(--zd_size13);
}
.radioLabel {
  font-size: 0 ;
  display: block;
}
.rdBox {
  fill: none;
  stroke-width: var(--radio_stroke_width);
  stroke-linecap: round;
  stroke: inherit;
}
.centerPath {
  --radio_fill: inherit;
  stroke-width: var(--radio_inner_stroke_width);
  transform-origin: center;
}
[dir=ltr] .checked .centerPath {
  animation: circleAnimate var(--zd_transition3) ease forwards;
}
[dir=rtl] .checked .centerPath {
  animation: circleAnimate var(--zd_transition3) ease forwards;
}
.rdBoxprimary,
.hoverEfffect:hover .hoverprimary
/* .hoverEfffect:focus .hoverprimary  */
{
  --radio_stroke_color: var(--zdt_radio_primary_stroke);
}

.rdBoxdanger,
.hoverEfffect:hover .hoverdanger
/* .hoverEfffect:focus .hoverdanger */
 {
  --radio_stroke_color: var(--zdt_radio_danger_stroke);
}

.centerPathprimary {
  --radio_fill: var(--zdt_radio_primary_fill);
}
.centerPathdanger {
  --radio_fill: var(--zdt_radio_danger_fill);
}

.active:hover .primaryLabel,
/* .active:focus .primaryLabel, */
.primarycheckedActive {
  --label_text_color: var(--zdt_radio_label_primary_text);
}

.active:hover .dangerLabel,
/* .active:focus .dangerLabel, */
.dangercheckedActive {
  --label_text_color: var(--zdt_radio_label_danger_text);
}

.text {
  margin: var(--radio_label_margin);
}
@keyframes circleAnimate {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}