/* Omnibar - Global Top Bar */

.sjc-omnibar {

  .navbar {
    flex-wrap: unset !important; // stylelint-disable declaration-no-important
    height: 65px;
    padding: 0.5rem;
    line-height: 1rem;
    background-color: $primary;
  }

  .login-btn {
    padding: 0.25rem 1rem;
    font-size: 14px;
    line-height: 14px;

    &:hover {
      color: $white;

      /* stylelint-disable-next-line scss/at-function-named-arguments */
      background-color: scale-color($primary, $lightness: 20%);
    }
  }

  .global-icons .nav-link {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: 0.5rem;
    color: $white;
    text-align: center;


    > * {
      margin: auto;
    }
  }

  .global-icons {
    flex-wrap: unset !important;
    justify-content: center;
    margin-right: 10px;
  }

  .profile-dropdown-toggle:hover,
  .mega-dropdown-toggle:hover {
    opacity: 0.85;
  }

  .dropdown.show > .nav-link {
    text-align: center;
    background-color: lighten($primary, 10%);
    border-radius: 5px;
  }

  .logo {
    display: inline-block;
    padding: 20px 30px;
    color: $white;
    background-image: url('#{$stjude-images-path}/stjude-logo-child.svg');
    background-position: 0 3px;
    background-repeat: no-repeat;
    background-size: 55px;
    border-color: #99C4F4;
    border-right: 1px solid;
  }

  .logo img {
    width: auto;
    height: 40px;
    padding: 0;
    border: none;
  }

  .portal-title {
    display: inline-block;
    padding-left: 8px;
    margin-right: auto;
    overflow: hidden;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.75rem;
    color: lighten($primary, 30%);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-icon {
    padding: 10px;
    background-image: url('#{$stjude-images-path}/user-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
  }

  .dropdown-menu {
    font-size: 1rem;
    line-height: 1.25rem;
    color: $blue-dark;
    background: #F4F8FC;
    border-top: none;
    border-radius: 0;
    box-shadow: $box-shadow-sm;

    li {
      display: flex;
      align-items: center;
      height: 40px;
    }
  }

  .dropdown-menu a,
  .dropdown-item {
    color: $blue-dark;

    &:focus,
    &:hover {
      color: $blue-dark;
      text-decoration: underline;
    }
  }

  .profile-dropdown-menu {
    top: 50.4px;
  }

  .profile-dropdown-menu,
  .mega-dropdown-menu {
    display: block;
    overflow: hidden;
    transition: transform 0.25s ease-in-out;
    transform: scaleY(0);
    transform-origin: top;
  }

  .show .profile-dropdown-menu,
  .show .mega-dropdown-menu {
    transform: scaleY(1);
  }

  .profile-dropdown-menu > ul,
  .mega-menu-container {
    transition: transform 0.25s ease-in-out;
    transform: translateY(calc(-100% - 65px));
  }

  .mega-menu-container {
    padding: 1.5rem 0;
  }

  .show .profile-dropdown-menu > ul,
  .show .mega-menu-container {
    transform: translateY(0);
  }

  .mega-dropdown {
    position: static;
  }

  .mega-dropdown-menu {
    width: 100%;
    margin-top: 0;
    position: absolute;
    left: 0;
    top: 65px;
  }

  .mega-dropdown-col {
    padding: 1rem 3.5rem;
  }

  .mega-menu-title,
  .featured-study__title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: $blue-dark;
    text-transform: uppercase;
  }

  .featured-study__image {
    width: 100%;
    max-width: 14rem;
    margin-bottom: 0.75rem;
  }

  .app-title {
    display: flex;
    align-items: center;
  }

  .app-title__icon {
    width: 30px;
    height: 30px;
    margin-right: 0.75rem;
  }

  .genomics-platform-subtext {
    font-size: 12px;
  }

  /* Media Query Overrides ****************************************/

  @include media-breakpoint-down(sm) {

    .featured-study__image {
      display: none;
    }
  }

  @include media-breakpoint-only(sm) {

    .mega-dropdown-col {
      padding: 1rem;
    }
  }

  @include media-breakpoint-down(md) {

    .sjc-title {
      display: none;
    }
  }

  @include media-breakpoint-only(md) {

    .mega-dropdown-menu {
      font-size: 0.75rem;
      line-height: 0.9375rem;
    }

    .mega-dropdown-col {
      padding: 0.75rem;
    }

    .mega-dropdown-col li {
      height: 30px;
    }

    .mega-dropdown-col:last-child {
      padding-left: 1.125rem;
    }

    .app-icon {
      width: 30px;
      height: 22.5px;
    }

    .sjcgp-subtext {
      font-size: 9px;
    }
  }

  @include media-breakpoint-up(md) {

    .mega-dropdown-col:last-child {
      padding-left: 1.5rem;
      border-left: 1px solid #B3B3B3;
    }

    .featured-study {
      padding: 1.125rem 1rem;
      background-color: $white;
    }
  }

  @include media-breakpoint-up(lg) {

    .mega-dropdown-col {
      padding: 1rem;
    }
  }
}

.nav-menu-icon {

  .navbar-toggler &,
  .dropdown & {
    width: 1.25rem;
    height: 3px;
    content: '';
    background-color: $white;
    border-radius: 5rem;

    &:before,
    &:after {
      position: relative;
      display: block;
      width: 1.25rem;
      height: 3px;
      content: '';
      background-color: $white;
      border-radius: 5rem;
    }
  }

  .navbar-toggler &.bg-secondary {
    background-color: $secondary;

    &:before,
    &:after {
      background-color: $secondary;
    }
  }

  .navbar-toggler.collapsed &,
  .dropdown & {
    transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);

    &:before {
      top: -7px;
      transition: top 0.1s ease-in 0.25s;
    }

    &:after {
      bottom: -4px;
      transition: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

  }

  .navbar-toggler:not( .collapsed ) &,
  .dropdown.show & {
    transition: transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
    transform: rotate(225deg);

    &:before {
      top: 0;
      transition: top 0.1s ease-out;
    }

    &:after {
      bottom: 3px;
      transition: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
      transform: rotate(-90deg);
    }
  }
}

.sjc-subnav {
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: $white;
  border-bottom: rgba(0, 0, 0, 0.15) 1px solid;
  padding-left: 1rem;
  padding-right: 1rem;

  .navbar-toggler {
    padding: 0.25rem 0.65rem;
  }

  .dropdown-menu {
    border-radius: 0;
  }

  .dropdown-item,
  .nav-link {
    font-size: 1rem;
    color: $blue-dark;

    &:hover {
      color: $blue-dark;
    }
  }

  .sub-menu-text {
    margin-left: auto;
  }

  @include media-breakpoint-down(sm) {

    .dropdown-menu {
      border: 0;
    }

    .dropdown-item:hover {
      background-color: unset;
    }
  }

  @include media-breakpoint-up(md) {

    .sub-menu-text {
      display: none;
    }

    .dropdown-menu {
      top: 117%;
    }

    .nav-link {

      &:after {
        display: block;
        content: '';
        border-bottom: solid 2px $blue-dark;
        transition: transform 0.25s ease-in-out;
        transform: scaleX(0);
      }

      &:hover:after {
        transform: scaleX(1);
      }
    }

    .nav-item.show .nav-link:after {
      transform: scaleX(1);
    }
  }
}