// ebi-header-footer--footer
// Custom tag class for Foundation-based EBI framework

// Classes to theme the embl dropdown selector for the .masthead-black-bar

&.masthead-black-bar {
  li.embl-selector {
    border-left: none !important;
    padding-left: 0.5rem;
  }

  .embl-bar {
    background-color: var(--vf-ui-color--off-white);
    color: var(--vf-color--grey--darkest);
    position: relative; /* 2 */

    // a copy of vf-u-fullbleed code,
    // but we duplicate it as we're not able to insert classes into the legacy html import
    &::before {
      background-color: inherit; /* 3 */
      background-image: inherit;
      background-position: inherit;
      background-repeat: inherit;
      background-size: cover;
      content: '';
      grid-column: 1 / -1; /* 4 */
      height: 100%; /* 5 */
      margin-left: calc(50% - 50vw); /* 6 */
      position: absolute;
      top: 0; /* 7 */
      width: 100vw; /* 8 */
      z-index: set-layer(vf-z-index--negative); /* 9 */
    }

    a {
      color: var(--vf-color--grey--darkest);
    }
    a:hover {
      border-bottom: 1px solid var(--vf-ui-color--white);
    }
  }

  @media screen and (max-width: 39.9375em) {
    .dropdown-pane.embl-dropdown {
      // do not show embl-dropdown on small screens at all
      display: none;
      width: 0 !important;
      overflow: hidden;
    }
  }

  .embl-selector {
    .button.hover,
    .button:hover {
      background-color: transparent;
    }
    .button[aria-expanded="false"]::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border: inset 4px;
      border-color: var(--vf-ui-color--white) transparent transparent;
      border-top-style: solid;
      position: absolute;
      top: 18px;
      margin-left: 55px;
    }

    &.embl-ebi {
      .button,
      .button.hover,
      .button:focus,
      .button:hover {
        background: no-repeat 5px 48% url(https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg);
        padding-left: 95px;
        background-size: 90px;
        max-height: 33px;
      }
    }

    &.active {
      background-color: var(--vf-ui-color--off-white);;
      padding-right: 1rem;
      .button,
      .button.hover,
      .button:focus,
      .button:hover {
        background-image: url("https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL/EMBL-black.svg");
      }
    }

    &.active.embl-ebi {
      .button,
      .button.hover,
      .button:focus,
      .button:hover {
        background-image: url("https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/EMBL_EBI_Logo_black.svg");
      }
    }
  }

  // begin to hide bits of dropdown toggle as screen shrinks
  @media screen and (max-width: 53em) {
    li.embl-selector { padding-left: .5rem; }
    .embl-selector .button { width: 0px; padding-right:1rem; overflow: hidden; }
    .embl-selector .button:after { display: none; }
    nav ul.menu li a { padding-right: .35rem; padding-left: .35rem;}
  }
}

// no space between ebi black bar and hero
.vf-stack > .masthead-black-bar.vf-u-fullbleed ~ .vf-hero {
  margin-top:unset !important;
}