.x-radio {
  appearance: none;
  vertical-align: text-bottom;
  width: var(--radio-size);
  height: var(--radio-size);
  cursor: var(--cursor-radio);
  border-radius: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  transition: background-color 80ms, box-shadow 80ms;
  display: inline-block;
  position: relative;
}

.x-radio:where([data-disabled], :disabled) {
  cursor: var(--cursor-disabled);
}

.x-radio:after {
  content: "";
  background-color: currentColor;
  border-radius: 100%;
  transition: transform 80ms;
  position: absolute;
  inset: 0;
  transform: scale(0);
}

.x-radio:where(:checked):after {
  transform: scale(.4);
}

.x-radio:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}

.x-radio:where([data-size="1"]) {
  --radio-size: calc(var(--space-4) * .875);
}

.x-radio:where([data-size="2"]) {
  --radio-size: var(--space-4);
}

.x-radio:where([data-size="3"]) {
  --radio-size: calc(var(--space-4) * 1.25);
}

.x-radio:where(:not([data-size])) {
  --radio-size: var(--space-4);
}

.x-radio:where(:not([data-variant="soft"])) {
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--neutral-a7);
}

.x-radio:where(:not([data-variant="soft"])):where(:checked) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
  box-shadow: none;
}

.x-radio:where(:not([data-variant="soft"])):where([data-high-contrast]):where(:checked) {
  background-color: var(--accent-12);
  color: var(--neutral-1);
}

.x-radio:where(:not([data-variant="soft"])):where([data-disabled], :disabled) {
  background-color: var(--neutral-a3);
  box-shadow: inset 0 0 0 1px var(--neutral-a6);
  color: var(--neutral-a8);
}

.x-radio:where([data-variant="soft"]) {
  background-color: var(--accent-a4);
  color: var(--accent-a11);
}

.x-radio:where([data-variant="soft"]):where([data-high-contrast]):where(:checked) {
  color: var(--accent-12);
}

.x-radio:where([data-variant="soft"]):where([data-disabled], :disabled) {
  background-color: var(--neutral-a3);
  color: var(--neutral-a8);
}