@use '@angular/material' as mat;
@use 'variables';

@include mat.core();

$primary-palette: (
    default: variables.$primary,
    lighter: lighten(variables.$primary, 30%),
    darker: darken(variables.$primary, 30%),
    text: variables.$primary,
    contrast: (
        default: variables.$light,
        lighter: variables.$light,
        darker: variables.$light,
    ),
);

$secondary-palette: (
    default: variables.$accent,
    lighter: lighten(variables.$accent, 30%),
    darker: darken(variables.$accent, 30%),
    text: variables.$accent,
    contrast: (
        default: variables.$light,
        lighter: variables.$light,
        darker: variables.$light,
    ),
);

$red-palette: (
    default: variables.$primary,
    lighter: lighten(variables.$primary, 30%),
    darker: darken(variables.$primary, 30%),
    text: variables.$primary,
    contrast: (
        default: variables.$light,
        lighter: variables.$light,
        darker: variables.$light,
    ),
);

$gn-next-primary: mat.define-palette($primary-palette, default, lighter, darker, text);
$gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text);
$gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text);

$light-theme: mat.define-light-theme(
    (
        color: (
            primary: $gn-next-primary,
            accent: $gn-next-secondary,
            warn: $gn-next-warning,
        ),
    )
);

$dark-theme: mat.define-dark-theme(
    (
        color: (
            primary: $gn-next-primary,
            accent: $gn-next-secondary,
            warn: $gn-next-warning,
        ),
    )
);

@include mat.core-theme($light-theme);
@include mat.all-component-themes($light-theme);

$custom-typography: mat.define-typography-config(
    $font-family: 'Inter, sans-serif',
    $body-1: mat.define-typography-level(13px, 18px, 400),
    $body-2: mat.define-typography-level(13px, 18px, 400),
    $button: mat.define-typography-level(13px, 13px, 400),
);

@include mat.all-component-typographies($custom-typography);

* {
    --mdc-theme-text-primary-on-background: var(--iqser-text);
    --mdc-theme-surface: var(--iqser-popup-background);
}

.dark {
    @include mat.all-component-colors($dark-theme);
}
