.header {
  height: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: $bgc-secondary;
  .page--search-enabled & {
    background-color: $bgc-secondary;
  }


  @include respond-to('medium') {
    background-color: transparent;
    .page--search-enabled & {
      background-color: $white;
    }

    .page--api & {
      background-color: transparent;
    }
  }

}

.header__aside {
  padding-right: $p-base--horizontal;
  padding-left: $p-base--horizontal;
  margin-top: $p-base--vertical;
  margin-bottom: $p-base--vertical;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  background-color: $bgc-secondary;

  @include respond-to('medium') {
    height: 100%;
    padding-right: 0;
    padding-left: $p-base--offset;
    margin-top: 0;
    margin-bottom: 0;
    flex: $w-layout-aside--md 0 0;

    .page--api & {
      padding-left: $p-base--offset;
      flex: $w-api-layout-aside--md 0 0;
      justify-content: flex-start;
    }
  }
}

.header__main {
  padding-right: $p-base--horizontal;
  padding-left: $p-base--horizontal;
  flex: 100% 0 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  @include respond-to('small') {
    flex: auto 1 0;
  }

  @include respond-to('medium') {
    padding-right: 2*$p-base--horizontal;
    padding-left: 2*$p-base--horizontal;
    flex: auto 1 0;
  }
}

.header__logo {
  width: $w-logo;
  height: $h-logo;

  @include respond-to('medium') {
    width: $w-logo--md;
    height: $h-logo--md;

    .page--api & {
      width: $w-logo;
      height: $h-logo;
    }
  }

  .header--logo-disabled & {
    @include respond-to('medium') {
      display: none;
    }
  }
}

.header__trigger {
  width: 30px;
  height: 20px;
  margin-right: 2*$p-base--horizontal;
  display: block;

  @include respond-to('medium') {
    display: none;
  }
}

.header__search {
  flex-grow: 1;
}