// ebi-header-footer--header

// Disable masthead-black-bar search when told
body.no-global-search .masthead-black-bar ul#global-nav.menu li.search { display: none; }

.ebi-header-footer.masthead-black-bar {
  --vf-stack-margin--custom: 0; // black bar needs to always sit at the top of the screen
  background-color: var(--vf-color--grey--darkest);

  nav ul.menu li {
    display: inline-block;
    margin-bottom: 0;
    float: right;
  }

  > .row {
    opacity: 0;

    body.ebi-black-bar-loaded & {
      opacity: 1;
      opacity: unset; // show the blackbar contents after JS has strapped
    }
  }

  a:focus {
    box-shadow: 0 0 2px var(--vf-color--grey--lightest)
  }

  .vf-content .global-masthead-interactive-banner p:not([class*='vf-']) {
    font-size: 15px; // embl dropdown p tags shouldn't have large text
  }

  .global-masthead-interactive-banner {
    height: 0;
    overflow: hidden;
    display: none;
    background-color: #000;


    &.active {
      display: block;
      height: auto; overflow: visible;
    }
  }

  .search-bar {
    .close-button:hover, .close-button:focus {
      color: var(--vf-ui-color--white);
    }
  }

  .global-nav {

    li a {
      color: var(--vf-ui-color--white);
    }

    a:hover,
    li a:hover,
    li a:active,
    li a:focus,
    li.active a,
    li.active-trail a {
      color: var(--vf-color--grey--darkest);
      border-bottom: none;
      background-color: var(--vf-color--grey--lightest);
    }
    li.active a {
      font-weight: 700;
    }

    li {
      font-size: 14.4px; // to closely match existing height

      a:before {
        font-family: 'EBI-Generic';
        display: inline-block; // safari 9 & 10 fix
        padding-right: .4rem;
      }
    }

    li.where {
      a:before {
        content: '[';
      }
    }

    // icon for Home
    li.home,
    li.ebi {
      a:before {
        content: 'H';
      }
    }

    // icon for Services
    li.services {
      a:before {
        content: '(';
      }
    }

    // icon for Research
    li.research {
      a:before {
        content: ')';
      }
    }

    // icon for Training
    li.training {
      a:before {
        content: 't';
      }
    }
    // icon for about us
    li.about {
      a:before {
        content: 'i';
      }
    }

    // icon for search
    li.search a:before {
      font-family: 'EBI-Functional';
      content: '1';
      padding-right: 0;
    }

    li.search .dropdown-pane {
      width: 100%;
      left: 0;
      background: var(--vf-color--grey--darkest);
      border: none;
      margin-top: -2px;
      color: var(--vf-ui-color--white);
    }
  }

  // mobile
  @media screen and (max-width: 39.9375em) {
    &.masthead-black-bar nav ul.menu > li > a {
        text-align: center;
        font-size: 10px;
        padding: .6rem .35rem;
    }
  }

  @media screen and (max-width: 39.9375em) {
    &.masthead-black-bar nav ul.menu > li > a > img,
    &.masthead-black-bar nav ul.menu > li > a:before {
        display: block;
        margin: 0 auto 0.25rem;
        font-size: 16px;
    }
  }
}

// vf-stack + vf-content-hub + legacy black bar edge case
.vf-stack .vf-content-hub-html .masthead-black-bar > div {
  --vf-stack-margin: 0;
  --vf-stack-margin--custom: 0;
}

// New blackbar changes to fix accessbility errors and remove the white separator next to EBI logo, also fix the search
// 'x' button fix
.ebi-header-footer .input-group {
  width: 97% !important;
  margin-left: auto;
  margin-right: auto; }

.ebi-header-footer .close-button {
  right: -1rem !important; }

.custom-ebi-logo-bg {
  background: no-repeat 3px 48% url("https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
  background-size: 90px;
  padding-left: 95px;
  width: 105px;
  background-color: unset !important;
}

.custom-ebi-logo-bg-transparent-text {
  color: transparent !important;
}
.ebi-header-footer.masthead-black-bar li.embl-selector {
  border-left: none !important;
  padding-left: 0.5rem !important;
}