Radio Buttons

[data-radio='group'] {
  --focus-ring: var(--text);
  --radio-border: var(--text);
  --radio-focus: var(--active);

  display: flex;
}

[data-radio='input'] {
  @include config.is-hidden;
}

[data-radio='option'] {
  border: thin solid var(--radio-border);
  border-radius: var(--first, 0) var(--last, 0) var(--last, 0) var(--first, 0);
  cursor: pointer;
  flex: auto;
  padding: var(--quarter-shim) var(--gutter);
  text-align: center;
  text-transform: capitalize;

  [data-radio='input']:checked + & {
    --radio-border: var(--radio-focus);

    box-shadow: 0 0 0 var(--quarter-shim) var(--radio-focus) inset;
    color: var(--active);
  }

  [data-radio='input']:focus + & {
    @include config.focus-ring;
    @include config.z-index('bump');

    position: relative;
  }

  &:first-of-type {
    --first: var(--radius);
  }

  &:last-of-type {
    --last: var(--radius);
  }
}