// ============================================================================
// :: Collapse
// ============================================================================
/**
 * The collapse component is used to show and hide secondary information
 */

// ============================================================================
// :: Root
// ============================================================================
.m-collapse {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-collapse__header {
  // automatically generate an arrow-bottom icon on the header
  @extend %__icon-chevron-down;

  position: relative;
  z-index: $z-index-floor;

  // position the arrow and the header content on opposite sides
  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;

  // Style the arrow-bottom icon generated by the iconfont
  &::before {
    display: block;
    order: 2;
    margin-left: 0.8rem;

    font-size: 2.2rem;

    color: $text-color-base;

    transition: transform 0.3s ease-in-out;
  }
}

.m-collapse__content {
  // set the height to 0 to hide its contents
  height: 0;
  overflow: hidden;

  transition: height 0.3s ease-in-out;
}

// ============================================================================
// :: States
// ============================================================================
.m-collapse {

  &.is-open {

    .m-collapse__header {

      &::before {
        transform: rotate(180deg);
      }
    }

    .m-collapse__content {
      height: auto;
    }
  }
}