
// Docs
.docs {
  @extend %wrapper;
  display: flex;
  padding-top: 1rem;
}
// Doc page
.doc-page {
  flex: 1;
}
.doc-page-title {
  margin-top: 0;
}
.doc-page-nav {
  @extend %clearfix;
  margin-bottom: 1rem;
}
.doc-page-nav-link-next, .doc-page-nav-link-prev {
  border: 1px solid $brand-color;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
  border-radius: 4px;
}
.doc-page-nav-link-next {
  float: right;
}
.doc-page-nav-link-prev {
  float: left;
}
.section-selector {
  margin-bottom: 1rem;
  @media only screen and (min-width: $medium-breakpoint) {
    display: none;
  }
}
.branded-graph {
  color: $brand-color;
  font-size: 38px;
  .shape-element {
    fill: $brand-color;
  }
}

// Docs
.docs {
  @extend %wrapper;
  display: flex;
  padding-top: 1rem;
}
// Doc page
.doc-page {
  flex: 1;
  min-width: 0; // Flexbox issue in chrome??
}
.doc-page-title {
  margin-top: 0;
}
.doc-page-nav {
  @extend %clearfix;
  margin-bottom: 1rem;
}
.doc-page-nav-link-next, .doc-page-nav-link-prev {
  border: 1px solid $brand-color;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
  border-radius: 4px;
}
.doc-page-nav-link-next {
  float: right;
}
.doc-page-nav-link-prev {
  float: left;
}
.section-selector {
  margin-bottom: 1rem;
  @media only screen and (min-width: $medium-breakpoint) {
    display: none;
  }
}
.branded-graph {
  color: $brand-color;
  font-size: 38px;
  .shape-element {
    fill: $brand-color;
  }
}
Fix flexbox issue when lines are too long
Fix flexbox issue when lines are too long
