.toggle {
  &-icon {
    display: inline-block;
    font-family: sans-serif;
    font-weight: 300;
    font-size: $base-font-size + 9;
    line-height: 19px;
    padding: 0;
    height: 26px;
    width: 26px;
    color: $blue;
    background-color: $white;
    border-radius: 99px;
    border: 2px solid $blue;
    text-align: center;
  }
}

.toggle {
  position: relative;

  &[aria-expanded]{
    cursor: pointer;
  }

  &[aria-expanded="true"]{
    .dropdown-arrow {
      transform: rotate(-135deg);
    }
  }

  &-content {
    transition: max-height 500ms ease-in-out;
  }

  &-content[aria-hidden="true"] {
    max-height: 0;
    overflow:hidden;
  }
}