@import "color";

.logo-navbar {
  width: 100px;
}

.nav-item {
  border: 2px solid $primary;
}

.nav-item:hover {
  background-color: $quaternary;
  border: 2px solid $quaternary;
  border-radius: 6px 6px;
}

.nav-item.active {
  border: 2px solid $secondary;
  border-radius: 6px 6px;
  background-color: $quaternary;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

.first-nav div ul li.nav-separator {
  border: 1px solid $secondary;
}

.second-nav div ul li.nav-separator {
  border: 1px solid $tertiary;
}

.first-nav {
  overflow-x: scroll;
  min-height: 60px;
  background-color: $primary;
}

.second-nav {
  overflow-x: scroll;
  background-color: $secondary;
  top: 60px;
}

.navbar {
  div {
    ul {
      li {
        a {
          color: rgb(255, 255, 255) !important;
        }
      }
    }
  }
}

.nav-subitem {
  border: 2px solid $secondary;
}

.nav-subitem:hover {
  background-color: $quinary;
  border: 2px solid $quinary;
  border-radius: 6px 6px;
}

.nav-subitem.active {
  border: 2px solid $tertiary;
  border-radius: 6px 6px;
  background-color: $quinary;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
}

#navbarToggler,
#navbarToggler2 {
  overflow-y: scroll;
}

.WIP {
  height: 300px;
}
