@mixin _collapse-toggle-with-icon {
  &::after {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translate(0, -50%);
  }

  &.with-plus::after {
    content: '\002B';
  }

  &.with-plus[data-collapsed="false"]::after {
    content: '\2212';
  }

  &.with-caret::after {
    @include caret('down');
  }

  &.with-caret[data-collapsed="false"]::after {
    @include caret('up');
  }

  &.with-arrow::after {
    @include arrow('down');
    transform: translate(0, -50%) rotate(45deg);
  }

  &.with-arrow[data-collapsed="false"]::after {
    @include arrow('up');
    transform: translate(0, -50%) rotate(-135deg);
  }
}

//======================================================================
// Collapse
//======================================================================

.collapse-toggle {
  @include btn-base;
  @include _collapse-toggle-with-icon;
  position: relative;
}

// transition.
.collapsing-enter-active,
.collapsing-leave-active {
  overflow: hidden;
  transition: max-height .3s ease-out;
}