@use '@angular/material' as mat;
@import '@angular/material';
@import './styles/mat-overrides';
@import './styles/component-themes';

@mixin dgp-normalize {

    html, body {
        height: 100%;
        width: 100%;
    }

    body {
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

}

@mixin dgp-ng-app-theme($primary, $accent, $warn: mat.m2-define-palette(mat.$m2-red-palette), $density: -3) {

    @include dgp-normalize();

    *[dgpThemeHost] {

        $app-theme: mat.m2-define-light-theme((
            color: (
                primary: $primary,
                accent: $accent,
                warn: $warn,
            ),
            density: $density
        ));
        $app-dark-theme: mat.m2-define-dark-theme((
            color: (
                primary: $primary,
                accent: $accent,
                warn: $warn,
            ),
            density: $density
        ));

        @include mat.all-component-themes($app-theme);
        @include dgp-all-component-themes($app-theme);

        .dark-theme, &.dark-theme {
            @include mat.all-component-themes($app-dark-theme);
            @include dgp-all-component-themes($app-dark-theme);
        }

        @include dgp-mat-overrides();
    }
}

.dgp-dynamic-virtual-scroll-viewport {
    height: 100%;
    width: 100%;
    display: flex;
    flex-grow: 1;
}

.--with-flex-wrap-panel {
    .cdk-virtual-scroll-content-wrapper {
        display: flex !important;
        flex-wrap: wrap;
    }
}