@import "../_colors";
@import "../_queries";
@import "../_sizes";

.ui-autocomplete {
    display: inline-flex;

    & input {
        font-size: 14px !important;
    }

    & .ui-autocomplete-items .ui-state-highlight {
        background-color: $default-primary-color;
        color: $primary-dark-text-color;
    }

    .ui-autocomplete-dropdown.ui-button {
        background-color: $default-color;
        border: 1px solid $input-border-color;
        border-left: none;
        color: $primary-dark-text-color;
        height: auto;
        width: $input-trigger-size;

        &:focus,
        &:hover {
            background-color: highlight($default-primary-color) !important;
        }

        &:enabled:active {
            background-color: active($default-primary-color);
        }
    }

    .ui-autocomplete-emptymessage {
        color: $secondary-dark-text-color;
        font-size: 13px;
        font-style: italic;
    }

    .ui-autocomplete-loader {
        right: 10px;

        &::before {
            content: "\f1ce";
        }
    }

    &.ui-autocomplete-dd {
        .ui-autocomplete-loader {
            right: 44px;
        }
    }

    .ui-autocomplete-token {
        max-width: 100%;

        .ui-autocomplete-token-label {
            max-width: 50ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.ui-fluid {
    .ui-autocomplete {
        .ui-autocomplete-dropdown.ui-button {
            width: $input-trigger-size;
        }

        &.ui-autocomplete-dd {

            .ui-autocomplete-input,
            .ui-autocomplete-multiple-container {
                width: calc(100% - #{$input-trigger-size});
            }
        }
    }
}

.ui-autocomplete-panel {
    max-width: calc(100vw - 32px);

    .ui-autocomplete-list-item {
        span {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}