.radio {
  transition: background-color var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
  height: var(--grapes-unit-16);
  width: var(--grapes-unit-16);
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  background-color: var(--grapes-color-background-primary-default);
  border: 1px var(--grapes-color-border-default) solid;

  &:has(:checked)::after {
    content: '';
    position: relative;
    z-index: 1;
    width: var(--grapes-unit-4);
    height: var(--grapes-unit-4);
    border-radius: 50%;
    background-color: var(--bg, var(--grapes-color-background-primary-default));
  }

  &:has(:disabled) {
    border: none;
    --bg: var(--grapes-color-content-disabled);
    cursor: not-allowed;
  }
}

.radioInput {
  position: absolute;
  height: var(--grapes-unit-16);
  width: var(--grapes-unit-16);
  cursor: inherit;
  appearance: none;
  border-radius: inherit;
  padding: 0;
  margin: 0;

  &:focus-visible {
    outline: var(--grapes-focus-ring);
    outline-offset: var(--grapes-focus-ring-offset);
  }

  &:where(:checked) {
    background-color: var(--grapes-color-border-selected);
  }

  &:disabled {
    pointer-events: none;
    background-color: var(--grapes-color-background-primary-disabled);
    border: 1px solid var(--grapes-color-border-default);
  }
}