/* -------------------------------------------------- */
/*    Content Toggle
/* -------------------------------------------------- */

.m-contentToggleWrapper {
  .p-about &--benefits,
  .p-workDetail &--projectInfo {
    @include media('>=m') {
      @include make-col(10);
      @include offset(2);
    }
  }
}

.m-contentToggle {
  $root: &;
  @include make-row();

  &__head {
    @include make-col(12);

    span {
      cursor: pointer;
      transition: all 0.25s ease('out-cubic');
    }

    &:hover {
      color: c('black');

      strong {
        color: c('black');
        font-weight: 700;
      }
    }
  }

  &__content {
    position: relative;
    padding-top: s(2);
    display: none;
    opacity: 0;

    .m-richTextWrapper {
      @include make-col(6, 6);
      @include offset(0);
    }

    @include media('>=m') {
      @include make-col(6, 10);
    }

    .p-workDetail & {
      padding-bottom: s(4);
    }

    &.fadeIn {
      opacity: 1;
      transition: opacity 0.5s ease('out-cubic');
    }

    .m-headlineWrapper {
      margin: 0;
    }

    h4 {
      @include f(fs('ms0'), fs('ms1'));
      margin-top: s(4);
    }
  }

  &__aside {
    font-size: fs('ms-2');
    width: 100%;
    @include make-vr();

    @include media('>=m') {
      @include make-col(2, 6);
      @include pull(-3, 6);
      @include make-vr(0.5);
      position: absolute;
      top: 0;
    }

    .m-headlineWrapper {
      margin: 0;
    }

    h3 {
      padding: 0;
      width: 100%;
      @include make-vr(1);
      font-size: fs('ms-2');
      text-transform: uppercase;
    }

    p,
    ul {
      @include make-vr(2/3);
      width: 100%;
    }

    p,
    ul li {
      @include make-col(12);
    }

    ul {
      list-style: none;
    }
  }
}
