:host {
  /* Colors */
  --ext-header-tpl-height: auto;
  /* Colors */
  --ext-header-tpl-primary-color: #1d1d1d;
  --ext-header-tpl-bg-color: var(--ext-header-tpl-primary-color);
  /* spaces */
  --ext-header-tpl-spaces: 8px;
  /* Text */
  --ext-header-tpl-font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  --ext-header-tpl-font-size: 18px;
  --ext-header-tpl-font-color: #ffffff;
  /* Icon */
  --ext-header-tpl-icon-opacity: 0.6;
}

#extended-uportal-header-container {
  display: flex;
  height: var(--ext-header-tpl-height);
  line-height: auto;
  white-space: nowrap;
  font-family: var(--ext-header-tpl-font-family);
  font-size: var(--ext-header-tpl-font-size);
  color: var(--ext-header-tpl-font-color);
  background-color: var(--ext-header-tpl-bg-color);
  a:any-link {
    font-family: var(--ext-header-tpl-font-family);
    font-size: var(--ext-header-tpl-font-size);
    color: var(--ext-header-tpl-font-color);
  }
  > div {
    display: flex;
    flex: 1;
    margin: auto 5px;
  }
  #extended-uportal-header-menu,
  #extended-uportal-header-org {
    flex: 0 1 fit-content;
    justify-content: left;
    white-space: initial;
  }

  #extended-uportal-header-org {
    align-items: center;
    overflow: hidden;
    a.org-logo {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 5px;

      img {
        display: block;
        opacity: var(--ext-header-tpl-icon-opacity);
      }
    }
    p.org-display-name {
      margin: 0;
      color: var(--ext-header-tpl-font-color);
      overflow: hidden;
      text-overflow: ellipsis;
      span.service-name {
        @media screen and (max-width: 768px) {
          display: none;
        }
      }
    }
  }
  #extended-uportal-header-user,
  #extended-uportal-header-login {
    flex: 1;
    justify-content: right;
    align-content: center;
  }
  #extended-uportal-header-user {
    & eyebrow-user-info {
      margin-top: auto;
      margin-bottom: auto;
      margin-left: var(--ext-header-tpl-spaces);
      margin-right: var(--ext-header-tpl-spaces);
    }
  }
  #extended-uportal-header-login {
    a.login-button {
      display: flex;
      align-items: center;
      text-decoration: none;
      padding: 4px;
      &:visited {
        color: var(--ext-header-tpl-font-color);
      }
      .sign-in-icon {
        height: var(--ext-header-tpl-font-size);
        margin-right: 5px;
        svg {
          max-height: var(--ext-header-tpl-font-size);
          width: 100%;
        }
      }
    }
  }
}