fieldset {
  border-top: solid 2px var(--accent);
  font-family: $font-family-sans-serif;

  h2,
  h3 {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    text-transform: none;

    &:before {
      display: none;
    }

    button {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      all: inherit;
      width: 100%;
      padding: 1rem 1.1875rem;
      margin: 0;
      border-top: 0;

      svg {
        display: block;
        float: right;
        margin-top: 0.5rem;
      }

      &:hover,
      &:focus {
        color: var(--brand);
        background: var(--bg-body);
      }

      &:active {
        box-shadow: none;
      }

      &[aria-expanded="true"] {
        color: var(--brand);

        svg {
          transform: rotate(180deg);
        }
      }
    }
  }

  h2 {
    button[aria-expanded="true"] {
      border-bottom: solid 2px var(--accent);
      background: #fafdff;
    }
  }

  [type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px);
  }

  [type="radio"] + label {
    cursor: pointer;
    display: block;
    padding: 1rem 1.1875rem;
    margin-bottom: 0;

    svg {
      display: none;
    }
  }

  [type="radio"]:focus {
    label {
      cursor: pointer;
      display: block;
    }
  }

  [type="radio"]:checked + label {
    color: var(--brand);
    font-weight: bold;

    svg {
      display: block;
      float: right;
      margin-top: 0.5rem;
      width: 1rem;
      height: 1rem;
      fill: transparent;
    }
  }

  &:last-of-type {
    border-bottom: solid 2px var(--accent);
    margin-bottom: 1rem;
  }
}