// Typography styles
// ----------------------------------------------

/* SG
# Headers

```
<div class="CDB-HeaderInfo is-block">
  <div class="CDB-HeaderInfo-Title u-bSpace">
    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
    <div class="CDB-HeaderInfo-Actions">
      <a href="#">
          <div class="CDB-Shape">
            <div class="CDB-Shape-threePoints is-blue is-small">
              <div class="CDB-Shape-threePointsItem"></div>
              <div class="CDB-Shape-threePointsItem"></div>
              <div class="CDB-Shape-threePointsItem"></div>
            </div>
          </div>
      </a>
    </div>
  </div>
  <ul class="CDB-HeaderInfo-List">
    <li class="CDB-HeaderInfo-ListItem">
      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
        PUBLIC
      </button>
    </li>
    <li class="CDB-HeaderInfo-ListItem">
      <ul class="CDB-AvatarList u-iBlock">
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
        </li>
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
        </li>
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
        </li>
        <li class="CDB-AvatarList-itemMore">
          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
        </li>
      </ul>
    </li>
    <li class="CDB-HeaderInfo-ListItem">
      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock">Published 8 days ago</p>
    </li>
  </ul>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </a>
  <div class="CDB-HeaderInfo-Inner">
    <div class="CDB-HeaderInfo-Title u-bSpace">
      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
      <ul class="CDB-HeaderInfo-Actions">
        <li class="CDB-HeaderInfo-ActionsItem">
          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
          </button>
        </li>
        <li class="CDB-HeaderInfo-ActionsItem">
          <a href="#">
              <div class="CDB-Shape">
                <div class="CDB-Shape-threePoints is-blue is-small">
                  <div class="CDB-Shape-threePointsItem"></div>
                  <div class="CDB-Shape-threePointsItem"></div>
                  <div class="CDB-Shape-threePointsItem"></div>
                </div>
              </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
        <li class="CDB-Shape-DatasetItem"></li>
        <li class="CDB-Shape-DatasetItem"></li>
      </ul>
    </div>
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </a>
  <div class="CDB-HeaderInfo-Inner">
    <div class="CDB-HeaderInfo-Title u-bSpace">
      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
      <div class="CDB-HeaderInfo-Actions">
        <a href="#">
            <div class="CDB-Shape">
              <div class="CDB-Shape-threePoints is-blue is-small">
                <div class="CDB-Shape-threePointsItem"></div>
                <div class="CDB-Shape-threePointsItem"></div>
                <div class="CDB-Shape-threePointsItem"></div>
              </div>
            </div>
        </a>
      </div>
    </div>
    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </a>
  <div class="CDB-HeaderInfo-Inner">
    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
        <li class="CDB-Shape-DatasetItem"></li>
        <li class="CDB-Shape-DatasetItem"></li>
      </ul>
    </div>
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="CDB-Step-header u-bSpace--xl">
  <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>

  <div class="CDB-Step-headerInfo CDB-Text">
    <p class="CDB-Size-large u-color-cMainDark u-bSpace--m">Type</p>
    <p class="CDB-Step-headerDetails is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
    <p class="CDB-Step-headerDetails CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
  </div>

  <div class="CDB-Shape">
    <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
  </div>
</div>

<br/>
<br/>
<br/>
```
*/

@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';

.CDB-HeaderInfo {
  @include display-flex();

  &.is-block {
    display: block;
  }
}

.CDB-HeaderInfo-ListItem {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;

  &:last-child {
    margin-right: 0;
  }
}

.CDB-HeaderInfo-Text {
  color: $cTypo3;
}

.CDB-HeaderInfo-Inner {
  @include flex(1);
}

.CDB-HeaderInfo-Back {
  margin-top: 7px;
}

.CDB-HeaderInfo-Title {
  @include display-flex();
  @include align-items(center);
}

.CDB-HeaderInfo-TitleText {
  @include flex(1);
  width: 0;
  padding-right: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.CDB-HeaderInfo-ActionsItem {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

/* Steps header */
.CDB-Step-header {
  @include display-flex();
  @include flex-direction(row);
  @include align-items(flex-start, flex-start);
}
.CDB-Step-headerNumeration {
  width: $baseSize * 3;
  height: $baseSize * 3;
  border: 1px solid $cMainLine;
  border-radius: 4px;
  background-color: $cWhite;
  color: $cTypo3;
  font-size: $sFontSize-small;
  line-height: $baseSize * 3;
  text-align: center;
  box-sizing: border-box;
}
.CDB-Step-headerInfo {
  @include flex-grow(2);
}
.CDB-Step-headerTitle {
  color: $cMainDark;
}
.CDB-Step-headerDetails {
  color: $cTypo3;

  &.is-uppercase {
    text-transform: uppercase;
  }
}