zulip/web/styles/search.css

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

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

    .search_icon {
        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 {
        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;

        &:focus {
            /* Reduce height to leave 1px on top and bottom for the outline. */
            height: calc(100% - 2px);
        }

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

        &:hover {
            opacity: 1;
        }

        &:disabled {
            visibility: hidden;
        }
    }

    .zulip-icon-close {
        font-size: 13px;
    }

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

        .search_close_button {
            display: none;
        }

        #searchbox-input-container {
            width: 150px;
        }

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

            box-shadow: none;
            cursor: pointer;
        }

        &: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) {
            #searchbox-input-container {
                /* On small screens, the input container/button becomes just
                   an icon. Width is to match the width of nearby buttons. */
                width: 40px;
            }

            .search-input {
                opacity: 0;
            }
        }

        @media (width < $sm_min) {
            #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);

        @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);
        }
    }

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

    .search-input {
        font-size: 14px;
        /* 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;
        height: var(--search-box-height);
        /* override bootstrap min-height for input[type="text"] */
        min-height: var(--search-box-height);
        background: transparent;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex-grow: 1;

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

        &::placeholder {
            color: var(--color-text-search-placeholder);
        }
    }

    #searchbox-input-container {
        display: flex;
        align-items: center;
        /* override .input-append style from app_components.js */
        letter-spacing: normal;
        height: var(--search-box-height);
    }

    @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 (width < $sm_min) {
        #searchbox_form {
            margin: 0;
        }

        #searchbox_form.expanded {
            position: fixed;
            left: 0;
            right: 9px;
            width: 100%;
            border-radius: 0;
            box-shadow: none;
            /* To be visible over `#streamlist-toggle-unreadcount`
            and `#userlist-toggle-unreadcount`. */
            z-index: 20;
        }

        .typeahead.dropdown-menu {
            box-shadow: 0 1px 5px var(--color-search-shadow-wide);
        }
    }

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

        .search_list_item .pill-container {
            margin-left: 5px;
        }
    }

    .pill {
        align-items: baseline;
    }

    .pill-image {
        /* Add line-height equal to height to mimic baseline alignment. */
        line-height: 20px;
        align-self: center;
    }

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