@import '../scss/init.scss';

.collapse {
  &_header {
    overflow: hidden;
    cursor: pointer;

    .mdIcon {
      display: none;
    }
  }

  &_body {
    display: none;
    &.is_active {
      display: block;
    }
  }

  &_body_inner {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-30px);
    transition: 175ms;
    &.is_active {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }
  }
}

@function setPseudo($dir) {
  @if ($dir == left) {
    @return 'before';
  }
  @else {
    @return 'after';
  }
}

@mixin margin($dir) {
  @if ($dir == left) {
    margin-right: $s_gutter;
  }

  @else {
    margin-left: auto;
  }
}

@mixin collapse--arrow($dir) {
  .collapse_header {
    height: $s_touchable;
    display: flex;
    align-items: center;

    .mdIcon {
      display: flex;
      transition: 225ms;

      @if ($dir == left) {
        order: -1;
        margin-right: $s_gutter;
      } @else {
        order: 1;
        margin-left: $s_gutter;
      }
    }
  }

  &.is_active > .collapse_header .mdIcon {
    transform: rotate(-180deg);
  }
}

.collapse--leftArrow {
  @include collapse--arrow(left);
}

.collapse--rightArrow {
  @include collapse--arrow(right);
}

.collapse--arrow--align {
  > .collapse_body {
    padding-left: 40px;
  }
}