@import "variables";

.navbar {
  height: 6vmin;
  @media (max-width: 768px) {
    height: 6vh;
  }

  .navbar-brand {
    padding: 0px 15px;
    @media (max-width: 768px) {
      padding: 0;
      height: 6vh;
    }

    .logo h1 {
      font-size: 1.5rem;
    }

    /* Let the sun icon not be next to the top*/
    .theme-toggle {
      margin-top: 5px;
    }
  }

  .navbar-menu {
    background-color: $main-light;
    font-size: 1.1rem;

  }
  .dark-mode .navbar-menu {
    background-color: $dark-navbar;
    color: $dark-font;
  }

  .search {
    align-items: center;
    display: flex;
    height: 100%;
    @media (max-width: 768px) {
      display: none;
    }
  }

  #fastSearch {
    height: 60%;
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }

  #searchInput {
    height: 100%;
    flex-shrink: 0
  }

  #searchResults {
    position: relative;
    margin-top: 10px;
    display: inline-block;
    border-radius: 5px;

    li {
      background-color: $main-light;
      padding-left: 1rem;
      border-bottom: 1px solid $main-black;
      border-left: 1px solid $main-black;
      border-right: 1px solid $main-black;

      &:hover {
        background-color: $main-grey;
      }

      &:first-child {
        border-top: 1px solid $main-black;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }

      &:last-child {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      a .title {
        text-decoration: none;
        /*display: block;*/
        font-size: $font-size-content;
        padding-left: 0.5rem;
        font-weight: normal;
      }
    }
  }
}

.navbar-item {
  @media (max-width: 768px) {
    text-align: center;
  }
}
.dark-mode {
  .navbar.is-light  {
    background-color: $dark-navbar;
    color: $dark-font;
    .navbar-menu{
      background-color: $dark-navbar;
      color: $dark-font;
    }
    .navbar-brand > .navbar-item {
      color: $dark-font;
      background-color: $dark-navbar;
    }

    .navbar-start > .navbar-item {
      background-color: $dark-navbar;
      color: $dark-font;
    }
  }

}
.dark-mode #searchResults li {
  background-color: $dark-navbar;
  border-bottom: 1px solid $dark-font;
  border-left: 1px solid $dark-font;
  border-right: 1px solid $dark-font;
}

.dark-mode #searchResults li:first-child {
  border-top: 1px solid $dark-font;
}

.dark-mode #searchResults li:hover {
  color: $dark-font;
  background-color: $dark-background;
}

.dark-mode .navbar.is-light .navbar-burger {
  color: $dark-font;
}
.dark-mode .navbar.is-light .navbar-brand > a.navbar-item:hover, .dark-mode .navbar.is-light .navbar-start > a.navbar-item:hover {
  background-color: $dark-navbar;
  color: $dark-font;
}