label.m3.m3-radio-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
  position: absolute;
  width: 2.5rem;
  aspect-ratio: inherit;
  border-radius: 50%;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

input[type="radio"].m3.m3-radio {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  width: 20px;
  margin: 0;
  aspect-ratio: inherit;
  border-radius: 50%;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="radio"].m3.m3-radio::after {
  content: "";
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
}
input[type="radio"].m3.m3-radio:disabled {
  border: 2px solid
    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type="radio"].m3.m3-radio:checked {
  border: 2px solid var(--md-sys-color-primary);
}
input[type="radio"].m3.m3-radio:checked::after {
  background-color: var(--md-sys-color-primary);
}
input[type="radio"].m3.m3-radio:checked:disabled {
  border: 2px solid
    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type="radio"].m3.m3-radio:checked:disabled::after {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 38%,
    transparent
  );
}
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
  );
}
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
  );
}
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
  );
}
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
  );
}
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
  );
}
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
  );
}

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