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

.p-treeselect {
    @extend #form-field-base;
    padding: 0;
    transition:
        background-color $basic-speed,
        border-color $basic-speed,
        box-shadow $basic-speed;

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

        &.p-focus {
            @extend #form-field-focus;
            outline-offset: 0;
            box-shadow: $shadow-xs;
        }
    }

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

        .p-treeselect-trigger {
            color: $color-palette-gray-500;
        }
    }

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

    .p-treeselect-label {
        padding: $spacing-1 $spacing-2;
        line-height: $spacing-4;
        transition:
            background-color $basic-speed,
            border-color $basic-speed,
            box-shadow $basic-speed;

        &.p-placeholder {
            color: $color-palette-gray-500;
        }
    }

    .p-treeselect-trigger {
        @extend #field-trigger;
    }
}

.p-inputwrapper-filled {
    .p-treeselect {
        &.p-treeselect-chip {
            .p-treeselect-label {
                padding: $spacing-0 $spacing-1;
            }
        }
    }
}

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

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

        .p-treeselect-filter-container {
            .p-treeselect-filter {
                @extend #field-panel-filter;
            }

            .p-treeselect-filter-icon {
                @extend #field-panel-filter-icon;
            }
        }

        .p-treeselect-close {
            @extend #field-panel-icon-close;
        }
    }

    .p-treeselect-items-wrapper {
        .p-tree {
            border: 0 none;
            padding: 0;
        }

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

p-treeselect {
    &.ng-invalid {
        &.ng-dirty {
            .p-treeselect {
                border-color: $error;
            }
        }
    }

    &.p-treeselect-clearable {
        .p-treeselect-label-container {
            padding-right: $spacing-5;
        }

        .p-treeselect-clear-icon {
            color: $color-palette-gray-500;
            right: $spacing-7;
        }
    }
}
