zulip/web/styles/search.css

#searchbox {
    width: 100%;
    height: var(--header-height);

    .navbar-search {
        margin: 3.5px 0;
        border-radius: 5px;
        position: absolute;
        overflow: hidden;
    }

    .search_icon {
        grid-area: search-icon;
        align-self: center;
        text-decoration: none;
        padding: 0 7px;
        font-size: 17px;
        border: none;
        background-color: transparent;
        color: hsl(0deg 0% 0%);
        opacity: 0.5;
        cursor: default;

        &:active,
        &:focus {
            outline: none;
        }

        &:disabled {
            visibility: hidden;
        }
    }

    .search_close_button {
        grid-area: search-close;
        width: 28px;
        height: 100%;
        background: none;
        border: none;
        opacity: 0.5;
        line-height: 0;
        border-radius: 4px;
        /* Leave room for the focus outline. */
        margin-right: 1px;

        &:not(:focus-visible) {
            outline: none;
        }

        &:hover {
            opacity: 1;
        }

        &:disabled {
            visibility: hidden;
        }
    }

    .search-input-and-pills {
        grid-area: search-pills;
        display: flex;
        padding: 0;
        flex-wrap: wrap;
        gap: 2px 2px;
        align-self: center;
    }

    .search-input-and-pills.freshly-opened {
        > .pill {
            border-color: var(--focus-outline-input-pill);
        }
    }

    .navbar-search:not(.expanded) {
        right: 0;

        .search_close_button {
            display: none;
        }

        #searchbox-input-container {
            width: var(--search-box-width);
        }

        .search-input {
            border-radius: 5px;
            color: var(--color-text-search);
            box-shadow: none;
        }

        &:hover {
            cursor: pointer;

            @media (width >= $md_min) {
                box-shadow:
                    0 4px 20px var(--color-search-box-hover-shadow),
                    0 1px 5px var(--color-search-box-hover-shadow);
            }

            .search_icon {
                cursor: pointer;
            }
        }

        @media (width < $md_min) {
            .search-input {
                opacity: 0;
            }
        }

        @media (height < $short_navbar_cutoff_height) {
            #searchbox-input-container .search_icon {
                font-size: 18px;
            }
        }
    }

    .navbar-search.expanded {
        width: 100%;
        box-shadow:
            0 4px 20px var(--color-search-shadow-wide),
            0 1px 5px var(--color-search-shadow-tight);

        .search-input {
            cursor: text;
        }

        @media (width < $md_min) {
            /* 3px chosen so that the cursor clicks the search button
               and close button from the same position. */
            width: calc(100% - 3px);
            /* z-index to not see the gear icon underneath */
            z-index: 1;
        }
    }

    .typeahead.dropdown-menu {
        /* Match the typeahead's width to its parent container. */
        right: 0;
        top: 0;
        margin-top: 0;
        padding-top: 0;
        box-shadow: none;
        position: relative;
        width: 100%;
        background: var(--color-background-search);
        color: var(--color-text-search);

        border-width: 0;
        border-top-width: 1px;
        border-top-color: var(--color-search-dropdown-top-border);
        border-radius: 0 0 4px 4px;

        .active > a {
            background-color: var(--color-background-search-option-hover);
            background-image: none;
            color: var(--color-text-search-hover);
        }

        .typeahead-menu .simplebar-content > li > a {
            max-width: none;
        }
    }

    .input-append {
        position: relative;
        width: 100%;
        margin-bottom: 0;
    }

    .search-input {
        /* Avoid massive inheritance chain on font-size. */
        font-size: var(--base-font-size-px);
        /* override height-input-pill from default input pills to account for pill border */
        line-height: calc(
            var(--height-input-pill) + var(--vertical-spacing-input-pill)
        );
        min-height: calc(
            var(--height-input-pill) + var(--vertical-spacing-input-pill)
        );
        /* override bootstrap padding for input[type="text"] */
        padding: 0;
        border: none;
        outline: none;
        border-radius: 0;
        font-family: "Source Sans 3 VF", sans-serif;
        font-weight: 400;
        background: transparent;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex-grow: 1;

        color: var(--color-text-search);

        display: flex;
        align-items: center;

        &:empty::before {
            content: attr(data-placeholder-text);
            color: var(--color-text-search-placeholder);
        }
    }

    #searchbox-input-container {
        display: grid;
        /* The next two styles override .input-append style from app_components.js */
        letter-spacing: normal;
        font-size: 100%;
        /* Override style for .pill-container that isn't relevant for search. */
        border: none;
        grid-template:
            "search-icon search-pills search-close" var(--search-box-height)
            ". search-pills ." auto / auto minmax(0, 1fr) 28px;
        align-items: start;
        cursor: pointer;

        /* Override styles for .pill-container that aren't relevant for search. */
        .pill {
            margin: 0;
            min-width: unset;
        }

        &:not(.focused) {
            max-height: var(--search-box-height);
            overflow: hidden;

            .search-input-and-pills {
                flex-wrap: nowrap;
                overflow: hidden;
            }
        }

        &.focused .user-pill-container {
            flex-flow: row wrap;
            height: unset;
        }

        .user-pill-container {
            gap: 5px;

            > .pill-label {
                min-width: fit-content;
                white-space: nowrap;
                width: fit-content;
                /* Replaced by the 5px gap. */
                margin-right: 0;
            }

            .pill {
                height: var(--height-input-pill);
                border: none;
                border-radius: 3px;
                max-width: none;
                display: grid;
                grid-template-columns: auto 1fr auto;

                &:not(.deactivated-pill) {
                    background-color: var(--color-background-user-pill);
                }
            }
        }
    }

    .pill-label {
        min-width: 30px;
    }

    @media (width >= $md_min) {
        .navbar-search {
            background: var(--color-background-search);
        }

        .navbar-search:not(.expanded) {
            box-shadow: 0 0 2px var(--color-search-box-hover-shadow);
        }
    }

    @media (width < $md_min) {
        .navbar-search:not(.expanded) .search_icon:hover {
            opacity: 1;
        }

        .navbar-search.expanded {
            background: var(--color-background-search);
        }
    }

    @media (height < $short_navbar_cutoff_height) {
        #searchbox_form:not(.expanded) {
            margin: 0;
            /* Now that the header is shorter, the search box will take up the whole
               height (which looks weird), so add 2px of space above and below it.
               The extra pixel is to account for the header's bottom border (box shadow). */
            margin-top: 2px;
            height: calc(var(--header-height) - 5px);

            #searchbox-input-container {
                height: calc(var(--search-box-height) - 5px);
            }
        }

        /* It looks fine to fill the navbar when the typeahead is open. */
        #searchbox_form.expanded {
            margin-top: 0;
        }
    }

    @media (width < $sm_min) {
        #searchbox_form.expanded {
            position: fixed;
            left: 0;
            right: 9px;
            width: 100%;
            border-radius: 0;
            box-shadow: none;
            /* To be visible over `.left-sidebar-toggle-unreadcount` */
            z-index: 20;
        }
    }

    .typeahead-menu .simplebar-content > li > a {
        padding: 3px 40px;
        /* Override white-space: nowrap from zulip.css */
        white-space: normal;

        .search_list_item {
            max-width: 100%;
        }

        .search_list_item .pill-container {
            margin-left: 5px;
            /* This contains only one pill, which handles its own border */
            border: none;
            cursor: pointer;
            padding: 0;
            max-width: 100%;
        }

        .pill {
            align-items: baseline;
            margin: 0;

            &:focus {
                /* Keep the border the same color, there's no user interaction for users in the typeahead menu */
                border-color: var(--color-background-input-pill);
            }

            .exit {
                display: none;
            }
        }

        .pill-image {
            /* Add line-height equal to height to mimic baseline alignment. */
            line-height: var(--length-input-pill-image);
            align-self: center;
        }
    }

    /* Break really long words (unlikely to happen). */
    .search_list_item span {
        word-break: break-word;
    }
}