.header {

background: $header-background;
a {
  font-weight: map-get($base, font-weight);
  text-decoration: none !important;
  @include link-colors($header-text-color, $main-color-1);
}
.main {
  @include flexbox();
  @include media-breakpoint-down(md) {
    @include flex-direction(column);
  }
}

}

.header–dark {

@extend .text--dark;
background: rgba(#000, .15);
.navigation__item--active {
  &::after {
    @include split-line(bottom, 4px, $text-color-theme-dark);
  }
}

}

.header–light {

@extend .text--light;
background: rgba(#fff, .15);
.navigation__item--active {
  &::after {
    @include split-line(bottom, 4px, $text-color-theme-light);
  }
}

}

.header__title {

@include menu(3, 0);
@include align-items(center);
@include flex-wrap(nowrap);
@include flex(1);
height: map-get($layout, header-height);
margin-right: map-get($spacers, 3);
white-space: nowrap;
@include media-breakpoint-down(md) {
  height: auto;
  margin-right: 0;
}
& > .header__brand {
  @include flex(1);
  @include media-breakpoint-down(md) {
    height: map-get($layout, header-height-sm);
  }
}
& > .search-button {
  display: none;
  margin-left: map-get($spacers, 2);
  @include media-breakpoint-down(md) {
    @include flexbox();
  }
}

}

.header__brand {

@include flexbox();
@include align-items(center);
& > svg {
  width: map-get($base, font-size-h4) * 1.6;
  height: map-get($base, font-size-h4) * 1.6;
  margin-right: map-get($spacers, 3);
  vertical-align: middle;
  @include media-breakpoint-down(md) {
    width: map-get($base, font-size-h4) * 1.2;
    height: map-get($base, font-size-h4) * 1.2;
  }
}
& > a {
  display: inline-block;
  font-size: map-get($base, font-size-h4);
  @include media-breakpoint-down(md) {
    font-size: map-get($base, font-size-h4-small);
  }
}

}

.navigation {

@include overflow(auto, "x");
& > ul {
  height: map-get($layout, header-height);
  padding-bottom: 0;
  margin: 0;
  @include media-breakpoint-down(md) {
    padding-bottom: 4px;
    margin: -4px 0 0 0;
  }
  @include menu(3, 2, nowrap);
  @include align-items(center);
  @include media-breakpoint-down(md) {
    height: auto;
  }
  .search-button {
    @include media-breakpoint-down(md) {
      display: none;
    }
  }
}

}

.navigation__item {

&::after {
  display: block;
  margin-bottom: -4px;
  content: "";
  @include split-line(bottom, 4px, transparent);
}

} .navigation__item–active {

a {
  @include link-colors($main-color-1, $main-color-1);
}
&::after {
  @include split-line(bottom, 4px, $main-color-1);
}

}