sparkletown/sparkle

@import "scss/constants.scss";
@import "./navSearchBarConstants.scss";

.NavSearchBar {
  position: relative;
  width: $search-dropdown-width;
  margin-right: $margin-right--navbar-links;

  &__search-input {
    text-align: left;
    font-size: 0.9em;
  }

  &__clear-search {
    cursor: pointer;
    opacity: 0.4;

    &:hover {
      opacity: 0.6;
    }

    &:active {
      opacity: 0.8;
    }
  }

  &__nav-dropdown {
    position: fixed;
    top: 0;
    width: $search-dropdown-width;
    max-height: $search-dropdown-height--max;
    margin-top: $navbar-height;
    background-color: $secondary--dark;
    box-shadow: box-shadow--large(var(--content--under-50a));
    border-radius: 0 0 $border-radius--xl $border-radius--xl;
    transform: translateY(-$navbar-height - $search-dropdown-height--empty);
    transform-origin: top right;
    transition: all 400ms $transition-function;
    pointer-events: none;
    z-index: z(navbar__drawer);

    &--show {
      transform: translateY(0);
      opacity: 1;
      pointer-events: all;
    }

    &__title {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      padding: 0 $search-result-padding--horizontal;
      opacity: 0.5;
    }
  }

  &__search-results-number {
    font-weight: 500;
  }

  &__search-results {
    overflow-y: auto;
    max-height: $search-results-height--max;
  }
}