.et-widget-headermain {
  &.bg-fullsize,
  &.bg-boxed .container {
    background-color: $colorNeutral1;
    color: color-yiq($colorNeutral1);
  }

  &.bottom-line-enabled:not(.bg-fullsize) {
    .container,
    .container-fluid {
      border-bottom: 1px solid $colorPrimary1;
    }
  }

  &.bottom-line-enabled.bg-fullsize {
    border-bottom: 1px solid $colorPrimary1;
  }

  .et-header-main-wrapper {
    @include media-breakpoint-up(lg) {
      flex-wrap: nowrap;
    }
  }
  .et-header-main-search-close {
    display: none;
  }

  .et-header-main-logo {
    img {
      width: auto;
      transform: translate3d(0, 0, 0); // force hardware rendering
      max-height: 32px;
      @include media-breakpoint-up(sm) {
        max-height: 44px;
      }
      @include media-breakpoint-up(lg) {
        max-height: 80px;
      }
    }
  }

  // Mobile header
  @include media-breakpoint-down(md) {

    .et-header-main-mobile-menu {
      display: flex;
      flex-wrap: nowrap;
      order: 1;
      justify-content: flex-start;
      align-items: center;

      > *:not(:first-child) {
        margin-left: 20px;
      }

      font-size: 22px;

      .nav-link {
        padding: 0;
      }
    }
    .et-header-main-logo {
      display: flex;
      flex-wrap: nowrap;
      order: 2;
      // align center always
      justify-content: center;
      align-items: center;
    }
    .et-header-main-account-basket {
      display: flex;
      flex-wrap: nowrap;
      order: 3;
      // align right always
      justify-content: flex-end;

      > *:not(:first-child) {
        margin-left: 20px;
      }

      // align center always
      align-items: center;
    }
    .et-header-main-search {
      order: 100; // should always be last
      background-color: $colorNeutral1;
      color: color-yiq($colorNeutral1);
      padding-top: $grid-gutter-width / 2;
      display: none; // initially hidden
      align-items: center;

      .et-header-main-search-close {
        display: flex;
        font-size: 22px;
        padding: 0;
        margin-right: 30px;
      }
    }
  }

  @include media-breakpoint-up(lg) {
    .et-header-main-logo,
    .et-header-main-search,
    .et-header-main-account-basket {
      display: flex;
      flex-wrap: nowrap;

      &.et-align-horizontal {
        &-left {
          justify-content: flex-start;

          > *:not(:last-child) {
            margin-right: 20px;
          }
        }

        &-center {
          justify-content: center;

          > *:not(:last-child) {
            margin-right: 10px;
          }

          > *:not(:first-child) {
            margin-left: 10px;
          }
        }

        &-right {
          justify-content: flex-end;

          > *:not(:first-child) {
            margin-left: 20px;
          }
        }
      }

      &.et-align-vertical {
        &-top {
          align-items: flex-start;
        }

        &-center {
          align-items: center;
        }

        &-bottom {
          align-items: flex-end;
        }
      }
    }
  }

  .et-header-main-certification {
    display: none;
    @include media-breakpoint-up(sm) {
      display: flex;
    }
    .et-header-main-certification-image {
      display: flex;
    }
    .et-header-main-certification-label {
      display: none;
      @include media-breakpoint-up(lg) {
        display: flex;
      }
    }
    .et-header-main-certification-image,
    .et-header-main-certification-label {
      align-items: center;
      padding: 0;
      @include media-breakpoint-up(lg) {
        padding: 8px 0;
      }
    }

    a {
      display: flex;
    }

    img {
      width: auto;
      max-height: 28px;
      @include media-breakpoint-up(xl) {
        max-height: 33px;
      }
      transform: translate3d(0, 0, 0); // force HW rendering
    }

    .et-header-main-certification-label:not(:first-child) {
      margin-left: 5px;
    }
  }

  .et-header-main-search {
    [type="text"].form-control {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-color: $colorNeutral3;
      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);

      &:focus {
        box-shadow: none;
      }
    }

    .input-group {
      flex-wrap: nowrap;

      .twitter-typeahead {
        width: 100%;
      }
    }

    .nav-item {
      flex-basis: 100%;
    }

    .search-wrapper .btn {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      border-color: $colorNeutral3;
      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);
      box-shadow: none;
    }
  }

  .et-header-main-language-currency {
    display: none;
    @include media-breakpoint-up(lg) {
      display: flex;
    }

    .nav-link {
      font-size: 17px;
      @include media-breakpoint-only(lg) {
        font-size: 13px;
      }
      font-weight: 600;
      padding: 0;
      @include media-breakpoint-up(lg) {
        padding: 8px 0;
      }
    }

    .nav-item:not(:first-child) {
      margin-left: 20px;
    }

    .dropdown-menu {
      min-width: 0; // make language / currency toggles narrow
    }
  }

  .et-header-main-compare,
  .et-header-main-wishlist {
    display: none;
    @include media-breakpoint-up(lg) {
      display: flex;
    }
  }

  .et-header-main-basket,
  .et-header-main-compare,
  .et-header-main-wishlist,
  .et-header-main-account {
    cursor: pointer;

    .nav-link {
      font-size: 22px;
      @include media-breakpoint-only(lg) {
        font-size: 17px;
      }
      padding: 0;
      @include media-breakpoint-up(lg) {
        padding: 8px 0;
      }
    }
  }

  .et-header-main-account {
    .dropdown-menu {
      min-width: 240px;
    }
  }

  .et-header-main-basket {
    .nav-item {
      white-space: nowrap;
      & > .cart-dropdown {
        white-space: normal;
      }
    }
  }

  .search-wrapper {
    form {
      margin-block-end: 0;
    }
    .input-group {
      /* Fixes a visibility problem of the search input field when JTL Search drops a modal background over everything */
      z-index: $zindex-sticky;
    }
  }

  /* cart-dropdown */
  .cart-dropdown {

    padding: $grid-gutter-width;
    background-color: $colorNeutral3;
    color: color-yiq($colorNeutral3);

    min-width: 300px; // looks alright in 320px screens
    @include media-breakpoint-up(sm) {
      min-width: 460px;
    }
    max-width: 90vw;

    .dropdown-cart-item {
      padding: $grid-gutter-width 0;
      border-bottom: 2px solid $colorNeutral5;
    }

    .dropdown-cart-item-image {
      img {
        max-width: 100%;
        height: auto;
        border-radius: $border-radius;
      }
    }
    .dropdown-cart-item-details {
      display: flex;
      flex-wrap: wrap;
    }
    .dropdown-cart-item-name {
      word-break: break-word;
      hyphens: auto;
      flex-basis: 75%;
    }
    .dropdown-cart-item-quantity {
      flex-basis: 20%;
      margin-left: auto;
      text-align: right;
    }
    .dropdown-cart-item-remove {
      font-size: small;
      color: $colorFontMuted;
      margin-top: 10px;
      flex-basis: 49%;
    }
    .dropdown-cart-item-price {
      margin-top: 10px;
      flex-basis: 49%;
      text-align: right;
    }
    .dropdown-cart-overflow {
      margin-top: 10px;
      font-size: small;
      text-align: center;
      font-style: italic;

    }

    .cart-dropdown-shipping-notice {
      border-top: 2px solid $colorNeutral5;
      margin-top: 20px;
      padding-top: 20px;
    }

    .cart-items-delete-button {
      padding: 0;
      border: 0;
    }

    .cart-dropdown-total-item {
      margin-top: 10px;
      font-size: $font-size-sm;
    }

    .cart-dropdown-total-item-price {
      float: right;
      white-space: nowrap;
    }

    .cart-dropdown-cart,
    .cart-dropdown-next {
      margin-bottom: 10px;
      @include media-breakpoint-up(lg) {
        margin-bottom: 0;
      }
    }

    .cart-dropdown-buttons {
      margin-top: map-get($spacers, 3);
    }

    .cart-dropdown-empty {
      padding: map-get($spacers, 2);
      white-space: normal;
    }
  }

  /* cart-dropdown-label */
  .cart-icon-dropdown {
    .cart-icon-dropdown-price {
      white-space: nowrap;
      display: none;
      font-size: 14px;
      @include media-breakpoint-up(xl) {
        font-size: 17px;
      }
      @include media-breakpoint-up(lg) {
        display: inline-block;
      }
      font-weight: 600;
      margin-left: 10px;
    }

    .cart-icon-dropdown-icon {
      position: relative;
      margin-right: 0; // maybe removed if we do not use _basket.scss from NOVA
    }

    &:not(.not-empty) {
      .cart-icon-dropdown-icon {
        @include media-breakpoint-up(md) {
          margin-right: 0; // maybe removed if we do not use _basket.scss from NOVA
        }
      }
    }
  }

  .et-comparelist-icon,
  .et-wishlist-icon {
    position: relative;
  }

  /*
   * Defacto these dropdowns are very important and must be visible even over fixed elements.
   */
  .dropdown-menu {
    z-index: $zindex-fixed + 3;
  }
}
