@use "../../wwwroot/scss/variables" as *;

.search.auto-complete {
    --bb-ac-padding-right: #{$bb-search-padding-right};
    --bb-search-prefix-icon-color: #{$bb-search-prefix-icon-color};
    --bb-search-clear-icon-color: var(--bb-select-append-color);

    .form-control-group {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;

        .search-prefix-icon {
            color: var(--bb-search-prefix-icon-color);
            margin-inline-end: 0.5rem;
        }

        .search-input {
            flex: 1;
            width: 1%;
            min-width: 0;
            border: none;
            padding: 0;
        }

        .search-clear-icon {
            cursor: pointer;
            color: var(--bb-search-clear-icon-color);
            margin-inline-start: 0.5rem;
        }

        &:not(:hover) .search-clear-icon {
            display: none;
        }

        .search-template-icon {
            margin-inline-start: 0.5rem;
        }
    }

    .input-group button {
        cursor: pointer;
    }
}
