@mixin base--radio {
  display: none;

  + label {
    position: relative;

    &::before {
      display: inline-block;
      width: 1em;
      height: 1em;
      margin-right: get('rhythm') / 2;
      vertical-align: middle;
      border: get('input border width') solid color('gray', 30);
      border-radius: 50%;
      content: '';
      transform: translateY(-.125em);
    }
  }

  &:checked + label::before {
    background: radial-gradient(color('gray', 80) 40%, transparent 40%);
  }
}