discourse/app/assets/stylesheets/common/components/header-search.scss

@use "lib/viewport";

.header-search--enabled,
.search-header--visible {
  .panel .header-dropdown-toggle.search-dropdown,
  .panel .search-menu {
    display: none;
  }

  a.search-link {
    color: var(--tertiary);

    .d-icon {
      color: var(--primary-medium);
    }

    .search-item-slug,
    .keyword {
      color: var(--primary);
    }
  }

  .floating-search-input + .panel {
    margin-left: 0;
  }

  .floating-search-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
  }

  &.welcome-banner--enabled {
    .floating-search-input {
      @include d-animation(float-up, 0.25s, ease);
    }
  }

  .floating-search-input {
    width: 100%;
    max-width: 550px; // half of default d-max-width

    .search-banner {
      height: 100%;

      &-inner.wrap {
        height: 100%;
        padding: 0;

        .search-menu {
          height: 100%;
          width: 100%;
          margin: 0 auto;
          position: relative;

          @include viewport.until(lg) {
            width: 80%;
          }

          @include viewport.until(md) {
            width: 90%;
          }

          // Hide search-icon when search-context is present
          .search-input .search-context ~ .search-icon {
            display: none;
          }

          .search-input .search-context ~ .search-term__input {
            padding-left: 0.5em;
          }

          .searching .extra-search-icons ~ .clear-search {
            display: none;
          }

          .searching {
            width: 3em;
            justify-content: flex-end;

            .show-advanced-search,
            a.clear-search {
              display: inline-flex;
              align-items: center;
            }
          }

          .search-icon {
            background: transparent;
            pointer-events: none;
            color: var(--header_primary-medium);
            margin-left: calc(1rem - 0.65em);
            height: 100%;
            position: absolute;
            z-index: 2;
          }

          .search-menu-panel {
            padding: 0;
            border: 1px solid var(--content-border-color);
            border-radius: var(--d-border-radius);
            max-height: calc(100vh - var(--header-offset));
          }

          .search-input {
            display: flex;
            padding: 0 0 0 2em;
            border-radius: var(--d-input-border-radius);

            .search-term__input {
              height: 100%;
              width: 100%;
              margin: 0;
              padding: 0.5em;
              border-radius: var(--d-input-border-radius);

              &:focus {
                outline: none;
              }
            }
          }

          .results {
            &:empty {
              display: none;
            }
            background: var(--secondary);
            position: relative;
            box-sizing: border-box;
            width: 100%;

            ul.list,
            ul {
              list-style: none;
              margin: 0;
            }
          }
        }
      }
    }
  }

  // Styling for extra icons
  .search-bar-icons--icon {
    .d-icon {
      color: var(--primary-low-mid);
    }

    &:hover .d-icon {
      color: var(--primary-high);
    }
  }
}