@use "../../feature/theme/theme" as theme;

.nav-search {
  width: 100%;
  align-items: center;
  display: flex;

  .search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 35px;
    position: relative;
    border-radius: 3px;
    padding: 5px;
    border: 1px solid lightGray;

    .fa-magnifying-glass {
      color: var(--header-color);
    }
  }

  input {
    background-color: transparent;
    padding: 0;
    width: 100%;
    line-height: 22px;
    outline: 0;
    font-size: .8rem;
    border: none;
    @include theme.property(color, var(--header-color), #acacac);
  }

  .active {
    &.search-bar {
      @include theme.property(background-color, white, black);
      &:after {
        display: none; // temp code
      }
    }

    .fa-magnifying-glass {
      color: #495057 !important;
    }

    .search-dropdown {
      display: block;
    }
  }
}

.nav-search:not(.nav-search-mobile) {
  @include media-breakpoint-down(md) {
    .search-bar {
      display: none;
    }
  }
}

.nav-search-mobile {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1000;

  .search-bar {
    height: 100%;
    border-radius: 0;

    &:after {
      display: none; // temp code
    }
  }

  .search-dropdown {
    margin-top: 1px; // add extra margin since input does not have border-radius anymore
  }

  input::placeholder, input::-webkit-input-placeholder {
    color: transparent;
  }
}

.search-dropdown {
  position: absolute;
  display: none;
  border: 1px solid $card-border-color;
  box-shadow: rgba(0, 0, 0, 0.15) 0 8px 16px 0;
  width: calc(100% + 2px);
  background-color: #fff;
  left: -1px;
  top: 100%;
  z-index: 100;

  .item-options {
    position: absolute;
    right: 10px;
    display: none;

    i {
      color: #333333bf;
    }
  }

  li {
    &.hover {
      background-color: rgb(248, 249, 250);

      .item-options {
        display: inline;
      }
    }

    > a {
      padding: 5px 10px;
      display: block;
      color: #343a40;

      &:hover {
        text-decoration:  none;
        color: inherit;
      }
    }
  }

  .title {
    font-size: .75rem;
    margin: 5px 10px;
    color: #777;
    text-transform: lowercase;
    background: linear-gradient(to bottom, #ffffff 47%, #b4b4b4 50%, #ffffff 52%);

    > span {
      background-color: #fff;
      display: inline-block;
      padding: 2px 10px 2px 0;
    }
  }

  .forum-name {
    font-size: .65rem;
  }
}
