.accordion {
  margin-bottom: 0.75em;

  [type="checkbox"]:checked + label,
  [type="checkbox"]:checked ~ label:after,
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:not(:checked) ~ label:after,
  [type="radio"]:checked + label,
  [type="radio"]:checked ~ label:after,
  [type="radio"]:not(:checked) + label,
  [type="radio"]:not(:checked) ~ label:after {
    content: "";
    border: 0;
    background-color: transparent;
  }

  [type="checkbox"]:hover:not(:disabled) + label:before,
  [type="radio"]:hover:not(:disabled) + label:before,
  [type="radio"]:not(:checked) ~ label:before,
  [type="checkbox"]:not(:checked) ~ label:before,
  [type="radio"]:checked ~ label:before,
  [type="checkbox"]:checked ~ label:before {
    background-color: transparent;
    border: 0;
    content: "+";
    font-size: 1.3em;
    line-height: 1;
  }

  [type="checkbox"]:hover:checked + label:before,
  [type="radio"]:hover:checked + label:before,
  [type="radio"]:checked ~ label:before,
  [type="checkbox"]:checked ~ label:before {
    background-color: transparent;
    content: "-";
  }

  [type="radio"]:not(:checked) + label,
  [type="checkbox"]:not(:checked) + label,
  [type="radio"]:checked + label,
  [type="checkbox"]:checked + label {
    padding-left: 20px;
  }

  .accordion__copy {
    display: none;
    margin-top: 0.75em;
  }

  .accordion__toggle:checked ~ .accordion__copy {
    background-color: $gray-lighter;
    display: block;
    padding: 2.5em 1.25em 1em 1.75em;
    margin: -2.25em 0 2em -0.5em;
  }

}
