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

/* SG
# Headers

```
<div class="CDB-HeaderInfo is-block">
  <div>
    <h2 class="CDB-Text CDB-Size-huge is-light u-bSpace">Name map</h2>
  </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</h2>
      <p>Rabo</p>
    </div>
    <p class="CDB-Text CDB-Size-medium"><a href="#">populated_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">
    <h2 class="CDB-Text CDB-Size-huge is-light u-bSpace">Basemap</h2>
    <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">
    <p class="CDB-Text CDB-Size-medium"><a href="#">populates_places</a></p>
  </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);
  padding-right: 24px;
}