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

.p-multiselect {
    @extend #form-field-base;
    min-width: 14rem;
    padding-right: 0;
    min-height: $field-height-md;
    height: 2.5em;
    width: 100%;

    &.p-multiselect-sm {
        @extend #form-field-sm;
        min-height: $field-height-sm;

        .p-multiselect-trigger {
            @extend #field-trigger-sm;
        }

        &.p-multiselect-chip {
            .p-multiselect-token {
                @extend #field-chip-sm;

                .p-icon-wrapper,
                .p-icon-wrapper svg {
                    height: 0.75rem;
                    width: 0.75rem;
                }
            }
        }
    }

    &:not(.p-multiselect-open):hover {
        @extend #form-field-hover;
    }

    &:not(.p-disabled).p-focus,
    &.p-multiselect-open {
        @extend #form-field-focus;
    }

    .p-multiselect-label-container {
        display: flex;
        align-items: center;
        padding-right: $spacing-1;

        .p-multiselect-label:not(.p-placeholder) {
            color: $black;
            @include truncate-text;

            &:has(> .p-multiselect-token) {
                padding: $spacing-1 0;
                height: auto;
                flex-wrap: wrap;
                overflow: hidden;
            }
        }
    }

    .p-multiselect-trigger {
        @extend #field-trigger;
        height: auto;

        .p-multiselect-trigger-icon {
            @extend #field-trigger-icon;
        }
    }

    &.p-disabled {
        @extend #form-field-disabled;

        .p-multiselect-label-container .p-multiselect-label {
            color: $color-palette-gray-700;
        }

        .p-multiselect-trigger {
            .p-multiselect-trigger-icon {
                color: $color-palette-gray-700;
            }
        }
    }

    &.p-multiselect-chip {
        color: $color-palette-gray-800;

        .p-multiselect-label {
            gap: $spacing-0;
            display: block;
            cursor: pointer;
            overflow: hidden;
            // max-width: 10.70em;
        }

        .p-multiselect-token {
            @extend #field-chip;
        }
    }
}

.p-multiselect-panel {
    @extend #field-panel;
    min-width: 20rem;
    padding: 0;

    .p-multiselect-header {
        @extend #field-panel-header;

        .p-multiselect-filter-container {
            .p-multiselect-filter {
                @extend #field-panel-filter;
                padding-left: $spacing-6;
                padding-right: $spacing-1;
            }

            .p-multiselect-filter-icon {
                @extend #field-panel-filter-icon;
                left: $spacing-2;
                right: unset;
            }
        }

        .p-checkbox {
            margin-right: $spacing-1;
        }

        .p-multiselect-close {
            @extend #field-panel-icon-close;
            display: none;
        }
    }

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

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

            &[data-p-highlight="true"] {
                @extend #field-panel-item-highlight;
            }

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

            &:not(.p-highlight):not(.p-disabled):hover {
                @extend #field-panel-item-hover;
            }

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

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

        .p-multiselect-empty-message {
            @extend #field-panel-empty-message;
        }
    }
}
