/* =========================
   Navbar container
   ========================= */

.navbar {
  display: flex;
  background-color: var(--color-navbar);

  width: 95vw;
  margin: var(--spacing-medium);

  padding: var(--spacing-small);

  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}


/* =========================
   Navbar list
   ========================= */

.navbar-list {
  list-style: none;

  display: flex;
  justify-content: space-evenly;
  gap: var(--spacing-medium);

  width: 100%;
  margin: 0;
  padding: 0;
}


/* =========================
   Navbar links
   ========================= */

.navbar-link,
.dropdown-button {

  display: flex;
  align-items: center;
  gap: var(--spacing-extra-small);

  text-decoration: none;
  font-weight: 600;

  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
}


/* Hover state */

.navbar-link:hover,
.dropdown-button:hover {
  color: var(--color-accent);
}


/* =========================
   Navbar icons
   ========================= */

.navbar-icon {
  height: 1.15em;
  object-fit: contain;
}