@import "../mixins/m3-mixins.css";
div.m3.m3-radio {
  width: 20px;
  height: 20px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
  z-index: 5;
}
div.m3.m3-radio > span.m3.m3-radio-state-layer {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio {
  margin: 0;
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  cursor: pointer;
  appearance: none;
  position: absolute;
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
  stroke-opacity: 38%;
  stroke: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
  fill-opacity: 38%;
  fill: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
  stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
  fill-opacity: 0;
  fill: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
  stroke: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
  fill-opacity: 1;
  fill: var(--md-sys-color-primary);
}
div.m3.m3-radio svg {
  margin: 0;
  width: 20px;
  z-index: 10;
  border-radius: 50%;
  pointer-events: none;
  aspect-ratio: inherit;
}
div.m3.m3-radio svg > circle {
  transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio svg > circle.m3-radio-outline {
  r: 9px;
  fill: black;
  fill-opacity: 0;
  stroke-width: 2px;
  stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio svg > circle.m3-radio-state {
  r: 5px;
}

/*# sourceMappingURL=radio.css.map */