/// Header
///
/// @group headers
///
/// @example scss - usage
///
///   @include k-Header;
///
/// @example html
///
///   <header class="k-Header">
///     <div class="k-Header__items">
///       <div class="k-Header__item k-Header__item--fixedSize">
///         …
///       </div>
///     </div>
///
///     <div class="k-Header__items__right">
///       <div class="k-Header__item">
///         …
///       </div>
///     </div>
///   </div>

@mixin k-Header {
  $background-color: #fff;
  $border-color: #eee;
  $border-width: 1px;
  $nav-border-width: 4px;

  $height: 65px;
  $item-spacing: k-px-to-rem(10px);
  $z-index: 10;

  $graphic-logo-size: 37px;

  .k-Header {
    background-color: $background-color;
    border-bottom: $border-width solid $border-color;
    position: relative;
    box-sizing: border-box;

    &.is-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: $z-index;

      width: 100%;
    }
  }

  .k-Header__container {
    @include k-container;
    position: relative;
  }

  .k-Header__row {
    display: flex;
    align-items: center;
    align-self: flex-start;
    justify-content: space-between;

    height: k-px-to-rem($height);

    // Since all items have left and right padding, negate it for the first
    // and last elements.
    margin-left: -$item-spacing;
    margin-right: -$item-spacing;
  }

  .k-Header__items {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .k-Header__items--fixedSize,
  .k-Header__item--fixedSize {
    flex: initial;
    flex-shrink: 0;
  }

  .k-Header__item {
    display: flex;
    margin: 0;
    padding: 0 $item-spacing;
  }

  .k-Header__item--centered {
    position: absolute;
    left: 0;
    right: 0;

    pointer-events: none;
  }

  .k-Header__nav {
    position: relative;
    top: $border-width;

    padding: 0 $item-spacing;

    @include k-media-max('s') {
      display: none;
    }
  }

  .k-Header__nav--hidden\@m-down {
    @include k-media-max('m') {
      display: none;
    }
  }

  .k-Header__nav__item {
    box-sizing: content-box;
    height: k-px-to-rem($height - $nav-border-width);
  }

  .k-Header__item__logo {
    padding-left: k-px-to-rem(5px);
  }

  .k-Header__logo {
    display: flex;
  }

  .k-Header__logo--smallOnXxs {
    svg, img {
      @include k-media-max('xxs') {
        width: k-px-to-rem(120px);
      }
    }
  }

  .k-Header__logo--lightOnM {
    overflow: hidden;

    svg, img {
      @include k-media-within('m') {
        margin-left: -$graphic-logo-size;
      }
    }
  }

  .k-Header__logo--lightOnXxs {
    overflow: hidden;

    svg, img {
      @include k-media-within('xxs') {
        margin-left: -$graphic-logo-size;
      }
    }
  }

  .k-Header__search {
    @include k-media-max('xxs') {
      display: none;
    }
  }

  .k-Header__signup,
  .k-Header__logged {
    @include k-media-max('xs') {
      display: none;
    }
  }

  .k-Header__signup {
    @include k-media-within('m') {
      display: none;
    }

    @include k-media-within('xxs') {
      padding-left: 0;
    }
  }

  .k-Header__signupIcon {
    @include k-media-min('s') {
      display: none;
    }

    @include k-media-within('m') {
      display: flex;
    }

    @include k-media-within('xxs') {
      padding-left: 0;
    }
  }

  .k-Header__button {
    padding-left: 0;
    padding-right: 0;
  }

  .k-Header__userMenuText--withEllipsis {
    text-overflow: ellipsis;
    max-width: k-px-to-rem(110px);
    white-space: nowrap;
    overflow: hidden;
  }

  .k-Header__titles {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    @include k-typographyFontSize($step: -1, $line-height: 1.3);
  }

  .k-Header__title {
    margin: 0;
    @include k-typographyFont('bold-uppercase');
  }

  .k-Header__subtitle {
    margin: 0;
    @include k-typographyFont('light');
  }
}