/* #Header
================================================== */

.design_header_fullwidth {

  width: 100%;
  padding: 0;
  height: auto;
  margin: 0;
}

div.design_header {

  margin-left: auto;
  margin-right: auto;
  position: relative;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

  .design_header > div {

    padding-top: 6px;
    padding-bottom: 6px;
  }

  .design_header > div,
  .design_header .header-features > div {

    display: flex;
    align-items: center;

    padding: 0;
  }

  .design_header > div,
  .design_header .header-features > div,
  .design_header .user-actions a {

    height: var(--template-header-height);
  }


  .design_header div.design_banner {

    margin-right: 16px;
  }
    .design_header div.design_banner .site_banner {}

      .design_header div.design_banner .site_banner a {

        display: flex;
      }
        .design_header div.design_banner .site_banner a:focus {

          outline-offset: -3px;
        }
        .design_header div.design_banner .site_banner a img {

          width: auto;
          vertical-align: middle;

          max-width: 120px;  /* TODO: make this a dynamic theme setting */
          max-height: var(--template-header-height);
        }

  .design_header .tagline {

    font-size: 1.4rem;
    margin: 0 auto;
    width: auto;
    height: var(--template-header-height);

    display: inline-block;
    vertical-align: middle;  
  }

  .design_header > div.design_search_nav_container {

    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-content: flex-end;
  }

  .design_header > div.header-features {

    flex-grow: 0;
    margin-right: 0;
    text-align: right;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    justify-content: flex-end;
    align-items: center;
  }

    .design_header .header-features button {

      height: 34px;
      margin: 4px 0;
    }

    .design_header > div.header-features > div,
    .design_header > div.header-features > button {

      flex: 0 1 auto;
      margin: 0 0 0 6px;
    }

    .design_header > div.header-features > div.component_loginlinks {

      flex: 0 0 auto;  
    }

  .design_header .tagline {

    display: none;
  }


/* NOTE: having right and left padding when displaying image will break on focus */
.user-actions a {

  padding: 6px 0;
}


.design_template_container .header-icon, 
.design_template_container .header-icon .lib-button--icon {

  color: var(--sys-color-header-text);
}

.design_header #headerNotificationLink { 

  margin-left: 0; 
  padding-right: 4px;

  min-width: 40px; /* for when we hide it to show notification number only */
}

  .design_header #headerNotificationLink .lib-badge[data-badge]::after { 

    top: -24px;
    right: -10px;
  }

.design_header #headerShoppingBasket .lib-button {

  min-width: 44px;
  width: 44px;
  height: 40px;
  padding: 6px 0 0;
}


/* #Header when fixed option is set
================================================== */

.fixed-header .design_template_container {

  padding-top: 150px;
}



/* #multi-level header
================================================== */

#headerTop.design_header {

  border-top: none;
  border-bottom: none;

  padding-left: 16px;
  padding-right: 16px;
}

#headerTop {

  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#headerTop div.design_banner {
  
  display: inline-block;
  margin-right: 40px;
}

#headerTop.design_header > div.header-features {

  flex-grow: 1;
}



/* #Custom header items
================================================== */

.user-menutoggle:after {

  font-size: 32px;
  color: var(--sys-font-body-color);
}

.design_header a.login-menutoggle span#textLogin {

  display: block;
  font-size: var(--sys-font-body-size);
}

#headerShoppingBasket {

  position: relative;
}

#headerShoppingBasket .count {

  font-size: 10px;
  position: absolute;
  right: 2px;
  height: 10px;
}

#headerUserImage .disablelink,
#headerUserImage .disablelink img {

  opacity: 1;
  cursor: default;
}

#headerUserImage .disablelink:hover {

  opacity: 1;
}




/* Our definition of a medium-sized screen */
@media (min-width: 37.5em) {

  .design_header div.design_banner .site_banner a img {

    max-width: 180px;
  }

}


/* Our definition of a large-sized screen */
@media (min-width: 56.25em) {

}


/* Our definition of a extra large-sized screen */
@media (min-width: 63em) {

  .design_header .tagline,
  .design_header > div.design_search_nav_container,
  .design_header #headerShoppingBasket {

    display: flex;
  }

}


/* Our definition of a extra-extra large-sized screen */
@media (min-width: 80em) {

}