/* Radio button component styling */
[data-component="radio-button"] {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background-color: var(--color-primary-light);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

[data-component="radio-button"][data-state="checked"] {
  background-color: var(--accent);
  border-color: var(--accent);
}

[data-component="radio-button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}