.radio-wrapper {
  & + & {
    margin-top: 0.25rem;
  }

  [type='radio'] {
    opacity: 0;
    position: absolute;
  }

  & label {
    --inner-size: 0.25rem;
    --outer-top: 0.33rem;
    line-height: 1;

    padding-left: 1.55rem;
    position: relative;

    &::after,
    &::before {
      border-radius: 50%;
      content: '';
      display: block;
      position: absolute;
    }

    &::after {
      border: var(--inner-size) solid var(--clr-foreground);
      left: var(--inner-size);
      opacity: 0;
      top: calc(var(--inner-size) + var(--outer-top));
      transition: opacity 0.12s ease-out;
    }

    &::before {
      background: var(--clr-background);
      border: 0.125rem solid var(--clr-foreground);
      height: 1rem;
      left: 0;
      top: var(--outer-top);
      width: 1rem;
    }
  }

  [type='radio']:focus + label::before {
    outline: 0.125rem solid var(--clr-foreground);
    outline-offset: 0.125rem;
  }

  [type='radio']:checked + label::after {
    opacity: 1;
  }
}