.jxui-radio {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--4px) var(--8px);
  width: var(--240px);
  flex-wrap: wrap;
}

.jxui-radio-input {
  flex-shrink: 0;
  flex-grow: 0;
  margin-top: var(--2px);
  border-radius: 100%;
  width: var(--20px);
  aspect-ratio: 1;
  appearance: none;
  background-color: var(--ui-bg-base);
  border: 2px solid var(--ui-border-default);
  position: relative;
  transition-duration: 0.2s;
  transition-property: background-color, border-color;
}
.jxui-radio-input:focus-visible {
  outline: 4px solid var(--ui-outline);
  outline-offset: 0;
}
.jxui-radio-input::after {
  content: "";
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: var(--ui-font-size-md);
  text-align: center;
  background: var(--ui-bg-base);
  box-shadow: inset 0 0 0 var(--10px) var(--ui-bg-base);
  border-radius: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition-duration: 200ms;
  transition-property: all;
  pointer-events: none;
}
.jxui-radio-input:checked::after {
  background-color: var(--ui-bg-accent);
  box-shadow: inset 0 0 0 4px var(--ui-bg-base);
}
.jxui-radio-input:checked {
  border-color: var(--ui-bg-accent);
}

[data-disabled] > .jxui-radio-input {
  background-color: var(--ui-bg-base-200);
  border-color: var(--ui-border-disabled);
  color: var(--ui-fg-muted);
  cursor: default;
}
[data-size="large"] > .jxui-radio-input {
  width: var(--24px);
}

.jxui-radio-icon {
  color: var(--ui-fg-muted);
  font-size: var(--20px);
  line-height: 1.4;
}