/// Usage: class="navbar mmui-navbar-util"
.mmui-navbar-util {
  // @extend .navbar;
  background-color: $mm-core-brand-blue-100;
  min-height: 35px;
  padding: 0;
  .mmui-link-button {
    line-height: 3.5rem; //css trick to vertically centering one-line. since buttons are usually 45px but mmui-navbar-util makes it 35px, need this styling.
    margin-top: 0;
    margin-left: 1.2rem;

  }
}
/// Usage: class="navbar mmui-navbar-main"
.mmui-navbar-main {
  // @extend .navbar;
  padding: 21px 0;

  & .nav-link {
    //this doesn't need to go under _navbar but decided better to move with .navbar-main
    font-size: 1.4rem;
  }
  img {
    width: 64px; //48 width in design + 16 right pading
    padding-right: 16px;
    position: relative;
    bottom: 9px; //to move logo up to baseline rather than descender of text
  }

  #mmui-navbar-input-group {
    //searchbox in navbar style
    input,
    button {
      background-color: $mm-neutral-white;
      border-color: $mm-neutral-white;
    }
    //this is a hack to not show the chrome hack that makes an input field yellow, when autofill is used
    //Boyoon greatly dislikes this yellow and would like to use this hack until chrome address this issue
    //unfortunately, the form still seems to flash yellow for a second before tyrning gray
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 30px $mm-neutral-gray-40 inset;
    }
    & > .form-control::placeholder {
      color: $mm-neutral-gray-80;
    }

    & > .form-control:focus::placeholder {
      opacity: 0.7;
    }
  }
}

.mmui-navbar-main.has_breadcrumb {
  margin-bottom: 48px;
}

@include media-breakpoint-down(md) {
  #mmui-navbar-input-group {
    margin-top: 2rem;
  }
}

.nav-item.dropdown {
  i {
    font-size: 0.8rem;
    position: relative;
    top: -2px;
  }
}

.mmui-nav-bar-dropdown-menu {
  padding: 40px 20px 20px 20px;

  z-index: 1001; //filter-summary's z-index is 1000. we want dropdown to be on top of filter summary.
  a {
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 20px;
    color: $mm-core-digital-blue-70;
    width: 100%;
    word-wrap: break-word;

    &:visited {
      color: $mm-core-digital-blue-70;
    }
    &:hover {
      color: $mm-core-digital-blue-70;
      text-decoration: underline;
      background-color: transparent;
    }
  }
  .mmui-form-label {
    letter-spacing: 1.4px;
    padding-bottom: 10px;
    padding-top: 20px;
  }
}

.nav-triangle {
  display: none;
}

@include media-breakpoint-up(md) {
  .mmui-nav-bar-dropdown-menu {
    margin-top: 22px;
    margin-left: -100px;
    width: 200px;
    left: 50%;
  }

  svg.nav-triangle {
    display: block;
    fill: $mm-neutral-white;
    stroke: none;
    position: absolute;
    left: 50%;
    margin: -50px 0 0 -12.5px;
  }
}

@include media-breakpoint-down(sm) {
  .mmui-nav-bar-dropdown-menu {
    margin-top: 0;
    margin-left: 0;
    width: 100%;

    svg.nav-triangle {
      display: none;
    }
  }
}