element-web/res/css/structures/_AutocompleteInput.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

.mx_AutocompleteInput {
    position: relative;
}

.mx_AutocompleteInput_search_icon {
    margin-left: $spacing-8;
    fill: $secondary-content;
}

.mx_AutocompleteInput_editor {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid $input-border-color;
    border-radius: 4px;
    transition: border-color 0.25s;

    > input {
        flex: 1;
        min-width: 40%;
        resize: none;
        /* `!important` is required to bypass global input styles. */
        margin: 0 !important;
        padding: $spacing-8 9px;
        border: none !important;
        color: $primary-content !important;
        font-weight: normal !important;

        &::placeholder {
            color: $primary-content !important;
            font-weight: normal !important;
        }
    }
}

.mx_AutocompleteInput_editor--focused {
    border-color: $links;
}

.mx_AutocompleteInput_editor--has-suggestions {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mx_AutocompleteInput_editor_selection {
    display: flex;
    margin-left: $spacing-8;
}

.mx_AutocompleteInput_editor_selection_pill {
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding-left: $spacing-8;
    padding-right: $spacing-8;
    background-color: $username-variant1-color;
    color: #ffffff;
    font-size: $font-12px;
}

.mx_AutocompleteInput_editor_selection_remove_button svg {
    vertical-align: middle;
}

.mx_AutocompleteInput_matches {
    position: absolute;
    left: 0;
    right: 0;
    background-color: $background;
    border: 1px solid $links;
    border-top-color: $input-border-color;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 1000;
}

.mx_AutocompleteInput_suggestion {
    display: flex;
    align-items: center;
    padding: $spacing-8;
    cursor: pointer;

    > * {
        user-select: none;
    }

    &:hover {
        background-color: $quinary-content;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

.mx_AutocompleteInput_suggestion--selected {
    background-color: $quinary-content;

    &:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

.mx_AutocompleteInput_suggestion_title {
    margin-right: $spacing-8;
}

.mx_AutocompleteInput_suggestion_description {
    color: $secondary-content;
    font-size: $font-12px;
}