// Include theming for Angular Material with `mat.theme()`.
// This Sass mixin will define CSS variables that are used for styling Angular Material
// components according to the Material 3 design spec.
// Learn more about theming and how to use it for your application's
// custom components at https://material.angular.dev/guide/theming

@use "@angular/material" as mat;
@use "./theme-colors.scss" as theme-colors;

@include mat.core();

html {
    // Default the application to a light color theme. This can be changed to
    // `dark` to enable the dark color theme, or to `light dark` to defer to the
    // user's system settings.
    color-scheme: light;

    @include mat.theme(
        (
            color: (
                theme-type: light,
                primary: theme-colors.$primary-palette,
                tertiary: theme-colors.$tertiary-palette,
            ),
            typography: (
                plain-family: Roboto,
                brand-family: Roboto,
            ),
            density: (
                scale: 0,
            ),
        )
    );

    // Define css classes like .mat-text-on-surface
    // @include mat.system-classes();

    .primary-btn {
        @include mat.button-overrides(
            (
                filled-container-color: var(--mat-sys-primary),
                filled-label-text-color: var(--mat-sys-on-primary),
                outlined-label-text-color: var(--mat-sys-primary),
                outlined-outline-color: var(--mat-sys-primary),
                protected-container-color: var(--mat-sys-primary),
                protected-label-text-color: var(--mat-sys-on-primary),
                text-label-text-color: var(--mat-sys-primary),
                tonal-label-text-color: var(--mat-sys-primary),
            )
        );
    }
    .secondary-btn {
        @include mat.button-overrides(
            (
                filled-container-color: var(--mat-sys-secondary),
                filled-label-text-color: var(--mat-sys-on-secondary),
                outlined-label-text-color: var(--mat-sys-secondary),
                outlined-outline-color: var(--mat-sys-secondary),
                protected-container-color: var(--mat-sys-secondary),
                protected-label-text-color: var(--mat-sys-on-secondary),
                text-label-text-color: var(--mat-sys-secondary),
                tonal-label-text-color: var(--mat-sys-secondary),
            )
        );
    }
    .tertiary-btn {
        @include mat.button-overrides(
            (
                filled-container-color: var(--mat-sys-tertiary),
                filled-label-text-color: var(--mat-sys-on-tertiary),
                outlined-label-text-color: var(--mat-sys-tertiary),
                outlined-outline-color: var(--mat-sys-tertiary),
                protected-container-color: var(--mat-sys-tertiary),
                protected-label-text-color: var(--mat-sys-on-tertiary),
                text-label-text-color: var(--mat-sys-tertiary),
                tonal-label-text-color: var(--mat-sys-tertiary),
            )
        );
    }
}

body {
    // Set a default background, font and text colors for the application using
    // Angular Material's system-level CSS variables. Learn more about these
    // variables at https://material.angular.dev/guide/system-variables
    background-color: var(--mat-sys-surface);
    color: var(--mat-sys-on-surface);
    // font: var(--mat-sys-body-medium);

    // Reset the user agent margin.
    margin: 0;
}
/* You can add global styles to this file, and also import other style files */

html,
body {
    height: 100%;
}

@media print {
    .no-print {
        display: none;
        visibility: hidden;
    }
}