.nav-ul {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 30px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 10px;

  list-style-type: none;
  overflow: hidden;

  border: var(--debug);
}

.nav-ul li {
  float: left;
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;

  border: var(--debug);
}

.nav-ul li.right {
  float: right;
}

.nav-ul li .text {
  border-radius: var(--radius);
}

.nav-ul li:hover .text {
  background-color: var(--color);
  color: var(--lighter-color);
  box-shadow: var(--shadow-intern);
}

.dark * li:hover .text {
  background-color: var(--darker-color);
  color: var(--lighter2-color);
}

.nav-ul li img {
  height: var(--logo-height);
}

.nav-ul li label {
  height: var(--navigation-height) !important;
  width: var(--navigation-height) !important;
}

.nav-ul li a, .nav-ul li label {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 16px;

  min-width: var(--navigation-height);
  height: var(--navigation-height);

  display: flex;
  justify-content: center;
  align-items: center;

  text-decoration: none;
  cursor: pointer;

  border: var(--debug);
}

.active {
  background-color: var(--lighter2-color);
  box-shadow: var(--shadow-intern);
  outline: var(--border-grey);
}

.dark * .active {
  background-color: var(--darker2-color);
}

.logo {
  height: var(--logo-height);
}

.default-logo {
  background-color: var(--color);

  -webkit-mask-image: url("../default-logo.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../default-logo.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.dark * .default-logo {
  background-color: var(--darker2-color);
}