/**
** COLLATE
** Hide content behind expandable collate box
**/

.c-collate {
  position: relative;

  details {
    border-top: 2px solid $brand-color--light;
    margin-top: 5px;
  }
}
.c-collate__panel {
  position: relative;
  transition: all 200ms ease-in;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(1, 1.05, 0, 1);
  transition: padding .1s;
  padding: 0;
  background-color: $brand-color--lighter;
  height: 0;
}
.c-collate__panel--expanded {
  padding: $spacing / 2;
  max-height: 100vh;
  overflow: visible;
  height: auto;

  + .c-collate__article {
    background: $background-color--darker;
  }
}

.c-collate__info {
  opacity: 0.5;
  @include mq(desktop) {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-$spacing * 1.5) translateY($spacing);
  }
  cursor: pointer;


  &:hover,
  &:focus {
    opacity: 1;
  }
}