// ============================================================================
// :: Presentation
// ============================================================================
/**
 * Very large component used to present a list of variations of a component and
 * other types of information and documentation all related to one certain
 * component.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-presentation {
  padding: 3rem 0 10rem;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-presentation__nav {
  margin-bottom: 3rem;

  border-bottom: 1px solid $bp-border-color-base;

  @include respond-at($bp-breakpoint-tablet-base) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  + .bp-presentation__components {
    margin-top: 12rem;
  }
}

.bp-presentation__header {
  margin-bottom: 2rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    padding-bottom: 1rem;
    margin-bottom: 0;
  }
}

.bp-presentation__tabs {

  @include respond-at($bp-breakpoint-tablet-base) {
    margin-left: 3rem;
  }
}

.bp-presentation__title {
  font-size: $bp-font-size-4x-large;
  font-weight: $bp-font-weight-bold;
  line-height: $line-height-normalize;
}

.bp-presentation__intro {
  margin-bottom: 6rem;
}

.bp-presentation__index {
  margin-bottom: 12rem;
}

.bp-presentation__components-docs {
  margin-top: 12rem;
}

.bp-presentation__components-modifiers,
.bp-presentation__components-states {
  border-bottom: 1px solid $bp-border-color-base;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.bp-presentation--quark,
.bp-presentation--layout {

  .bp-presentation__header {
    margin-bottom: 4rem;
  }
}