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

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

    deja-select {
        [matSuffix] {
            mat-progress-spinner {
                svg path {
                    stroke: mat.get-color-from-palette($primary);
                }
            }
        }

        .actions-suffix {

            #clear-button,
            #drop-down-button {
                &:hover {
                    color: mat.get-color-from-palette($primary);
                }
            }
        }

        #select-backdrop {
            &:not([mobile]) {
                background-color: transparent !important;
            }
        }
    }

    .deja-overlay-container {
        .deja-listcontainer {
            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
            background-color: mat.get-color-from-palette($background, card) !important;
            color: mat.get-color-from-palette($foreground, text) !important;

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

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