title: Radio button css works with checked, but doesn't work with unchecked
body: <p>I have the following code (css+html):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.c-form__radio__input {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1; }
    .c-form__radio__label {
      font-size: 0.8rem;
      border: none;
      margin: 0;
      padding: 0 0 0 calc(2px + 1rem);
      cursor: pointer;
      line-height: 1; }
      .c-form__radio__label::before, .c-form__radio__label::after {
        content: '';
        width: calc(0.8rem + 2px);
        height: calc(0.8rem + 2px);
        display: block;
        border: 1px solid transparent;
        border-radius: 100%;
        position: absolute;
        top: calc(0.5rem - 1px);
        left: 0;
        background-color: transparent; }
      .c-form__radio__label::before {
        border-color: #bdc3c7; }
      .c-form__radio__label::after {
        transform: scale(0.6); }
      .c-form__radio__input:checked + .c-form__radio__label::after {
        background-color: blue; }
      .c-form__radio__input:not(:checked) + .c-form__radio__label::after {
        background-color: transparent; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="c-form__radio"&gt;
              &lt;input id="radio1" type="radio" class="c-form__radio__input" name="radio1"/&gt;
              &lt;label for="radio1" class="c-form__radio__label"&gt;First radio&lt;/label&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code is working for check, but clicking again for uncheck is not working.</p>
  
  <p>If I start unchecked and click checked is working, clicking again doesn't work; Starting checked, and clicking doesn't work;</p>