@use 'variables';

nav.navbar {
  height: 80px;

  .container-fluid {
    height: 100%;
  }
}

#navbarNavDropdown {
  height: 100%;

  ul {
    height: 100%;
  }

  @media screen and (max-width: 992px) {
    &.show {
      .navbar-nav {
        height: auto !important;
        background-color: variables.$secondary-background-color !important;
        flex-direction: column;
        align-items: flex;
        justify-content: flex-start;
        border: 1px solid variables.$border-muted-color;
        border-radius: variables.$border-radius;
      }
    }
  }
}

.navbar-brand {
  height: 48px;
}

nav img {
  max-height: 100%;
  max-width: 100%;
}

.navbar-toggler {
  padding-right: 0;

  &:focus,
  &:active {
    outline: none;
    box-shadow: none;
  }
}

.hidden-md-up {
  display: none;

  @media screen and (max-width: 992px) {
    display: block;
  }
}

.hidden-md-down {
  display: block;

  @media screen and (max-width: 992px) {
    display: none;
  }
}

.dropdown-menu,
.dropdown-item {
  background-color: variables.$secondary-background-color;
  color: variables.$text-color;
}

.dropdown-item:hover,
.dropdown-item.selected {
  background-color: variables.$standout-background-color;
  color: variables.$standout-color;
}

.hover-no-change-only-pointer:hover {
  cursor: pointer;

  &:not(.selected) {
    background-color: inherit;
    color: variables.$text-color;
  }
}

.nav-item {
  display: flex;
  height: 100%;

  // Only on desktop
  @media screen and (min-width: 992px) {
    &:first-child {
      margin-left: 80px;
    }
  }
}

.nav-item .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding-left: 16px !important;
  padding-right: 16px !important;

  vertical-align: middle;
  &:hover {
    background-color: variables.$standout-background-color;
    color: darken(variables.$text-color, 15%) !important;
    // color: variables.$standout-color;
  }

  &#navbarAccountIcon:hover {
    background-color: inherit;
  }

  transition: 200ms ease-in-out;

  &.nuxt-link-active {
    color: variables.$standout-color !important;
    border-radius: 0;
    border-bottom: 2px solid variables.$standout-color;
  }

  &.dropdown-toggle::after {
    margin-left: 8px;
  }

  &.dropdown-toggle {
    margin-left: 8px;
  }

  @media screen and (max-width: 992px) {
    margin-left: auto;
    width: 100%;
    text-align: right;

    &.dropdown-toggle {
      margin-left: 0 !important;

      &.show {
        z-index: 100;
      }
    }
  }
}