void-radio {
  --tone: var(--void-color-accent);

  display: inline-flex;
  align-items: center;
  gap: var(--void-space-2);
  cursor: pointer;
  font-family: var(--void-font-sans);
  font-size: var(--void-text-sm);
  color: var(--void-color-text);
  user-select: none;
}

void-radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.void-radio-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--void-color-border-strong);
  border-radius: var(--void-radius-full);
  background: transparent;
  transition: background var(--void-duration-fast) var(--void-ease-in-out),
              border-color var(--void-duration-fast) var(--void-ease-in-out);
}

.void-radio-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--void-radius-full);
  background: var(--void-color-text-on-accent);
}

void-radio:hover .void-radio-circle {
  border-color: var(--tone);
}

void-radio:focus-visible .void-radio-circle {
  outline: 2px solid var(--void-color-border-focus);
  outline-offset: 2px;
}

void-radio[checked] .void-radio-circle {
  background: var(--tone);
  border-color: var(--tone);
}

void-radio[color="error"]   { --tone: var(--void-color-error); }
void-radio[color="warning"] { --tone: var(--void-color-warning); }
void-radio[color="caution"] { --tone: var(--void-color-caution); }
void-radio[color="success"] { --tone: var(--void-color-success); }
void-radio[color="info"]    { --tone: var(--void-color-info); }
void-radio[color="notice"]  { --tone: var(--void-color-notice); }

void-radio[size="sm"] { font-size: var(--void-text-xs); }
void-radio[size="sm"] .void-radio-circle { width: 0.875rem; height: 0.875rem; }
void-radio[size="sm"] .void-radio-dot { width: 0.375rem; height: 0.375rem; }
void-radio[size="lg"] { font-size: var(--void-text-base); }
void-radio[size="lg"] .void-radio-circle { width: 1.375rem; height: 1.375rem; }
void-radio[size="lg"] .void-radio-dot { width: 0.625rem; height: 0.625rem; }
void-radio[size="xl"] { font-size: var(--void-text-lg); }
void-radio[size="xl"] .void-radio-circle { width: 1.625rem; height: 1.625rem; }
void-radio[size="xl"] .void-radio-dot { width: 0.75rem; height: 0.75rem; }
void-radio[size="xxl"] { font-size: var(--void-text-xl); }
void-radio[size="xxl"] .void-radio-circle { width: 1.875rem; height: 1.875rem; }
void-radio[size="xxl"] .void-radio-dot { width: 0.875rem; height: 0.875rem; }

void-radio[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}