// ============================================================================
// :: Collapse
// ============================================================================
/**
 * Component that toggles content when the header or the arrow is clicked. It
 * automatically generates an arrow through the CSS with the generated iconfont.
 */

// ============================================================================
// :: Settings
// ============================================================================
$arrow-spacing: 1.5rem;
$arrow-width: 1.6rem;

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

// ============================================================================
// :: Elements
// ============================================================================
.bp-collapse__header {
  @extend %__bp-icon-arrow-down;

  position: relative;

  padding-right: $arrow-width + $arrow-spacing;

  cursor: pointer;

  &::before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    color: $bp-primary-color;

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

.bp-collapse__content {
  height: 0;
  overflow: hidden;

  pointer-events: none;

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

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

  &.is-open {

    .bp-collapse__header {

      &::before {
        transform: translateY(-50%) rotate(180deg);
      }
    }

    .bp-collapse__content {
      height: auto;

      pointer-events: auto;
    }
  }

  &.is-resizing {

    .bp-collapse__content {
      transition: none;
    }
  }
}