@use '@angular/material'as mat;
@use '../styles/mixins/item-list-theme'as itemListTheme;

@mixin tree-list-theme($theme) {
    $primary: map-get($theme, primary);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    deja-tree-list {
        &[disabled="true"] {
            .deja-listcontainer {
                color: mat.get-color-from-palette($foreground, disabled);

                #error-hint {
                    color: mat.get-color-from-palette($foreground, disabled);
                }
            }
        }

        &.ng-invalid {
            #input {
                .mat-form-field-wrapper {
                    .mat-form-field-underline {
                        .mat-form-field-ripple {
                            background-color: mat.get-color-from-palette($warn);
                        }
                    }

                    .mat-form-field-label {
                        color: mat.get-color-from-palette($warn) !important;
                    }
                }
            }
        }

        #listheader {
            border-bottom: solid 1px rgba(mat.get-color-from-palette($primary), 0.8);
        }

        &:not([disabled="true"]) {
            .deja-listcontainer {
                background-color: mat.get-color-from-palette($background, card);

                &[keynav="false"]:not(.dragover) {
                    div.listitem:not(.unselectable):hover {
                        background-color: mat.get-color-from-palette($primary);
                        color: mat.get-color-from-palette($primary, default-contrast);
                    }
                }

                #error-hint {
                    color: mat.get-color-from-palette($warn);
                }
            }
        }

        @include itemListTheme.sub-item-list-theme($theme);
    }
}