/**
 * Site header
 * @define site-header
 */

// Import base
@import '@ecl/ec-base/ec-base';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('ec-component-icon', 'ec-component-search-form'));

@include exports('ec-component-site-header') {
  .ecl-site-header {
    background-color: $ecl-color-white-100;
    margin: 0;
    width: 100%;
  }

  .ecl-site-header__container {
    display: flex;
    flex-direction: column;
    padding-bottom: $ecl-spacing-m;
    padding-top: $ecl-spacing-l;

    @include ecl-media-breakpoint-up('lg') {
      align-items: flex-end;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: $ecl-spacing-xl;
      padding-top: $ecl-spacing-xl;
    }
  }

  .ecl-site-header__banner {
    align-items: flex-end;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;

    @include ecl-media-breakpoint-up('lg') {
      padding-right: $ecl-spacing-xl;
    }
  }

  .ecl-site-header__logo-image {
    display: block;
    height: 3rem;
    margin: 0;
    width: 11.25rem;

    @include ecl-media-breakpoint-up('sm') {
      height: 4.5rem;
      width: 17rem;
    }
  }

  .ecl-site-header__selector {
    align-items: center;
    display: flex;

    @include ecl-media-breakpoint-up('lg') {
      height: 1px; /* IE fix */
      min-height: 2.75rem;
    }
  }

  .ecl-site-header__selector-link {
    align-items: center;
    display: flex;
    font: $ecl-font-m;

    &:visited {
      color: $ecl-color-primary;
    }
  }

  .ecl-site-header__language-icon {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: $ecl-spacing-s;
    position: relative;
  }

  .ecl-site-header__language-code {
    color: $ecl-color-white-100;
    font: $ecl-font-xs;
    font-weight: $ecl-font-weight-bold;
    left: 50%;
    position: absolute;
    text-transform: uppercase;
    // position top and left has to be set like this because IE...
    // also ugly magic numbers to center the text on the icon
    top: 50%;
    transform: translateX(-50%) translateX(-0.01rem) translateY(-50%)
      translateY(-0.1rem);
  }

  .ecl-site-header__search {
    margin-top: $ecl-spacing-m;

    @include ecl-media-breakpoint-up('lg') {
      margin-top: 0;
    }
  }
}