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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.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);
}

.medium.withSecondaryText {
  margin-block-start: var(--zd_size1) ;
}

.small.withSecondaryText {
  margin-block-start: var(--zd_size3) ;
}

.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);
}

.secondaryText {
  color: var(--zdt_radio_secondary_text);
}

.labelContainer {
  composes: dflex flexcolumn from '../common/common.module.css';
  gap: var(--zd_size4) ;
  margin: var(--radio_label_margin);
}

@keyframes circleAnimate {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}