// A bit arbitrary, works for it's use at time of implementation
$collapsible-max-height: 350px;

.collapsible-checkbox {
  display: none;
}

.collapsible-label > ::before {
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  border-top: 5px solid transparent;

  content: ' ';
  display: inline-block;

  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;

  vertical-align: middle;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}

.collapsible-checkbox:checked + .collapsible-label + .collapsible-content {
  max-height: $collapsible-max-height;
}

.collapsible-checkbox:checked + .collapsible-label > ::before {
  transform: rotate(90deg) translateX(-3px);
}

@media only screen and (min-width: 1025px) {
  // This double class is used to so this rule is more specific than the one in
  // all.scss
  .collapsible-label.collapsible-label-md {
    margin-left: 0;
  }

  .collapsible-label-md > ::before {
    display: none;
  }

  .collapsible-content-md {
    max-height: $collapsible-max-height;
  }
}