@use "variables" as *;
@import "common";

p-autocomplete.p-inputwrapper-focus {
    .p-autocomplete {
        @extend #form-field-focus;
    }
}

.p-fluid .p-autocomplete.p-component, // To override the default behavior
.p-autocomplete.p-component {
    display: flex;
    align-items: center;
}

.p-autocomplete {
    @extend #form-field-extend;
    height: auto;
    padding-right: 0;

    .p-autocomplete-loader,
    .p-autocomplete-clear-icon {
        position: unset;
        color: $color-palette-primary;
        margin: 0 $spacing-0;
    }

    .p-autocomplete-clear-icon {
        grid-column-start: 3;
        grid-row-start: 1;
    }

    .p-autocomplete-loader {
        grid-column-start: 2;
    }

    .p-autocomplete-input.p-component {
        all: unset;
        border: none;
        font-family: $font-default;
        font-size: $font-size-md;
        color: $black;
        padding: 0;
        margin: 0;
        width: 100%;
        height: calc(
            $field-height-md - (2 * $field-border-size)
        ); // This input height is to match the 40px height, 40px - 3px of horizontal borders, because this input does not have borders
    }

    &.p-autocomplete-dd {
        .p-autocomplete-loader,
        .p-autocomplete-clear-icon {
            right: $spacing-7;
        }
    }

    .p-autocomplete-dropdown.p-button.p-element {
        &:hover,
        &:focus,
        &:active {
            outline: none;
            background-color: $color-palette-gray-200;
        }
    }

    // Disabled state styles
    &.p-disabled,
    &:disabled {
        @extend #form-field-disabled;
        cursor: not-allowed;

        .p-autocomplete-input.p-component,
        .p-autocomplete-input.p-component:disabled {
            color: $color-palette-gray-500;
            cursor: not-allowed;
            background: transparent;
        }

        .p-autocomplete-dropdown.p-button.p-element {
            background-color: $color-palette-gray-200;
            color: $color-palette-gray-500;
            cursor: not-allowed;

            &:hover,
            &:focus,
            &:active {
                background-color: $color-palette-gray-200;
                color: $color-palette-gray-500;
            }
        }

        .p-autocomplete-loader,
        .p-autocomplete-clear-icon {
            color: $color-palette-gray-500;
        }
    }

    &.p-autocomplete-multiple {
        .p-autocomplete-multiple-container {
            display: flex;
            align-items: center;
            max-height: 13rem; // 208px
            overflow: auto; // Make it scrollable
            gap: $spacing-0;
            padding: 7px 0 6px; // Specific padding for the tokens in multiple lines

            &:hover,
            &:active,
            &.p-focus {
                border: none;
            }

            .p-autocomplete-token {
                @extend #field-chip;

                .p-autocomplete-token-label {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            .p-autocomplete-token-icon {
                .pi {
                    width: $icon-sm-box;
                    font-size: $icon-sm;
                }
            }

            .p-autocomplete-input-token {
                input {
                    font-family: $font-default;
                    font-size: $font-size-md;
                    color: $black;
                    padding: 0;
                    margin: 0;
                    height: 1.5rem;
                }
            }
        }

        // Disabled state for multiple autocomplete
        &.p-disabled,
        &:disabled {
            .p-autocomplete-multiple-container {
                background: $color-palette-gray-100;
                cursor: not-allowed;

                .p-autocomplete-token {
                    background: $color-palette-gray-200;
                    color: $color-palette-gray-500;

                    .p-autocomplete-token-icon {
                        color: $color-palette-gray-500;
                    }
                }

                .p-autocomplete-input-token input {
                    color: $color-palette-gray-500;
                    cursor: not-allowed;
                }
            }
        }
    }

    &.p-error > .p-inputtext,
    &.p-invalid > .p-inputtext {
        border-color: $error;
    }
}

p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
    border-color: $error;
}

.p-autocomplete-panel {
    @extend #field-panel;

    .p-autocomplete-items {
        @extend #field-panel-items;

        .p-autocomplete-item {
            @extend #field-panel-item;

            &:hover {
                @extend #field-panel-item-hover;
            }

            &.p-highlight {
                @extend #field-panel-item-highlight;
            }

            &.p-focus {
                background-color: $color-palette-primary-300;
            }
        }
    }
}

.p-autocomplete-dropdown.p-element.p-button {
    @extend #field-trigger;
    grid-column-start: 4;
    height: 100%;
    min-height: 2.5rem;

    .p-button-icon {
        @extend #field-trigger-icon;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &:hover,
    &:active,
    &.p-focus {
        outline: none;
    }
}

.p-button-icon-only.p-autocomplete-dropdown:not(.p-splitbutton-menubutton) {
    height: 100%;
    min-height: 2.5rem;
}
