@import url("../../styles/globalVar.css");
@import url("../lists/lists.css");
@import url("../badge/badge.css");

.nav-simple-container {
  align-items: center;
  background-color: var(--default-color);
  border-radius: 5px;
  box-shadow: 0 0 0.625rem var(--shadow-color);
  color: var(--light-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.75rem;
}

.nav-simple-brand {
  align-self: center;
  color: var(--light-color);
  font-size: 1.8rem;
  justify-self: flex-start;
  margin-left: 0.625rem;
  text-decoration: none;
}

.nav-simple-container > ul > li {
  list-style-type: none;
  padding: 0.5rem;
}

.nav-simple-container > ul {
  column-gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
}

.nav-simple-item,
.nav-simple-item > i {
  color: var(--light-color);
  display: inline-block;
  text-decoration: none;
}

.nav-simple-brand:hover,
.nav-simple-item:hover,
.nav-simple-item > i:hover {
  filter: brightness(120%);
}

.nav-simple-container > ul > .badge  > .badge-icon {
  background-color: var(--secondary-color);
  height: 1.5em;
  top: -5px;
  width: 1.5em;
}