@use "variables" as *;

@import "dotcms-theme/utils/theme-variables";
@import "dotcms-theme/components/form/common";
@import "mixins";

:host {
    position: relative;

    ::ng-deep .p-element.p-button:enabled {
        gap: $spacing-1;
        text-align: left;
        padding: 0;
        padding-left: $spacing-1;
        border: $field-border-size solid $color-palette-gray-400;

        .p-button-label {
            @include truncate-text;
            text-transform: none;
            color: $black;
        }

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

            &:before {
                display: flex;
                align-items: center;
                justify-content: center;
                width: $field-height-md;
                aspect-ratio: 1/1;
            }
        }

        &:hover {
            @extend #form-field-hover;
            background-color: transparent;
        }

        &:active,
        &:focus {
            @extend #form-field-focus;
            background-color: transparent;
        }
    }
}

::ng-deep {
    .p-overlaypanel.paginator {
        .p-paginator {
            justify-content: center;
        }

        .p-paginator-bottom {
            @include paginator-bottom-absolute;
        }
    }

    .searchable-dropdown .p-overlaypanel-content {
        padding: $spacing-3 0;
    }
}

.searchable-dropdown__data-list ::ng-deep {
    .site_selector__data-list {
        .p-dataview-content {
            .searchable-dropdown__data-list-item {
                padding: $spacing-2 $spacing-6;
                display: flex;
                gap: $spacing-2;

                i {
                    color: $color-palette-primary;
                }

                &.selected {
                    padding-left: $spacing-1;
                }

                &.star::after {
                    content: none;
                }
            }
        }
    }

    .p-dataview {
        position: unset;
    }

    .p-dataview-content {
        width: 100%;
        max-height: 80vh;
        overflow: auto;

        .searchable-dropdown__data-list-item {
            cursor: pointer;
            display: flex;
            line-height: normal;
            transition: background-color $basic-speed ease-in;
            width: 100%;
            padding: $spacing-1 $spacing-3;
            gap: $spacing-0;
            @include truncate-text;

            &:hover {
                background-color: $bg-hover;
            }

            &.star::after {
                content: " \2605";
                color: $color-alert-yellow;
            }
        }
    }

    .p-dataview-emptymessage {
        padding: 1em;
    }
}

.searchable-dropdown__search-section {
    flex-grow: 1;
    position: relative;

    input.searchable-dropdown__search-inputfield {
        width: 100%;
    }
}

.searchable-dropdown__search {
    display: flex;
    margin: 0 $spacing-3;
    position: relative;
}

.searchable-dropdown__search-icon {
    color: $color-palette-gray-700;
    position: absolute;
    right: $spacing-1;
    top: 9px;
}

.searchable-dropdown__search-action {
    margin-left: $spacing-3;
}
