mikevallano/tmdb-moviequeue

:root {
  --nav-bar-height: 56px;
}

.main-nav {
  background: var(--color-secondary);
  color: var(--color-primary);
  overflow: auto;
  padding: 0 .75rem;
  height: var(--nav-bar-height);
}

.main-nav ul {
  display: flex;
  height: inherit;
  justify-content: space-between;
  align-items: center;
}

.main-nav ul li {
  list-style: none;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-primary);
}

.main-nav #sign_out_nav_link {
  color: white;
}

.main-nav form.header-movie-search input {
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 5px;
}

.dropdown-header { width: auto; }

/* Hide the inputs, checkmarks, and submenu */
.dropdown-header input, ul.dropdown-items {
  display: none;
  position: absolute;
  width: inherit;
}

.dropdown-header ul.dropdown-items li {
  padding: .75rem;
}

.dropdown-header input, ul.dropdown-items li:hover {
  background: var(--color-secondary-lighter);
}

.dropdown-header label {
  position: relative;
  display: block;
  cursor: pointer;
}

/* Show the submenu when input is checked */
.dropdown-header input:checked~ul.dropdown-items {
  display: block;
  background: var(--color-secondary-darker);
  top: var(--nav-bar-height);
}