@import '~@angular/material/theming';

@mixin os-super-search-style($theme) {
    $primary: map-get($theme, primary);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .super-search-container > mat-dialog-container {
        padding: 0;
    }

    .query-container {
        display: block;

        .super-search-input {
            display: flex;
            align-items: center;
            padding: 8px;

            os-rounded-input {
                margin-right: 8px;
            }
        }
        .result-count {
            margin: 8px;
            text-align: center;
        }

        .result-view {
            position: relative;
            display: flex;
            background: mat-color($background, background);
            max-height: calc(90vh - 96px);

            .filter-count {
                margin-left: 8px;
            }

            .result-list {
                flex: 1;
                overflow-y: auto;

                .result-model-name {
                    position: sticky;
                    top: 0;
                    padding: 12px 16px;
                    background: darkgray;
                    z-index: 2;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                }

                mat-list,
                mat-selection-list {
                    padding: 0;
                }

                mat-list-item {
                    cursor: pointer;

                    &:hover {
                        background: rgba(0, 0, 0, 0.025);
                    }

                    &.selected,
                    .mat-list-item-content.selected {
                        &,
                        mat-icon {
                            color: white;
                        }
                        background: mat-color($primary);
                    }
                }

                mat-icon {
                    color: mat-color($foreground, icon);
                }
            }

            .flex-1 {
                flex: 1;
            }

            .flex-2 {
                flex: 2;
            }

            .result-preview {
                overflow-y: auto;
                transition: all 0.25s ease;
            }

            .no-results {
                padding: 8px;
            }
        }
    }
}
