/* stylelint-disable value-keyword-case */
@use '@angular/material' as mat;
/* stylelint-disable value-list-max-empty-lines */
/* stylelint-disable scss/no-global-function-names */
/* stylelint-disable scss/at-import-partial-extension */
@import './default-class';
@import './theming';
@import '../form/components/widgets/form.theme';
@import '../clipboard/clipboard.theme';
@import './snackbar.theme';
@import './material.theme';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';

@mixin alfresco-material-theme($theme) {
    @include adf-core-theme($theme);
}

@mixin adf-core-theme($theme, $custom-css-variables: $adf-custom-theme-sizes) {
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    $warn: map-get($theme, warn);
    $accent: map-get($theme, accent);
    $primary: map-get($theme, primary);

    // map SCSS variables to expose as CSS variables
    $defaults: (
        // material colors
        --theme-primary-color: mat.get-color-from-palette($primary),
        --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
        --theme-warn-color: mat.get-color-from-palette($warn),
        --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
        --theme-accent-color: mat.get-color-from-palette($accent),
        --theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
        --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),

        // component themes
        --adf-snackbar-error-bg-color: mat.get-color-from-palette($warn),
        --adf-snackbar-error-action-color: white,
        --adf-snackbar-warning-bg-color: mat.get-color-from-palette($accent),
        --adf-snackbar-warning-action-color: white,
        --adf-snackbar-info-bg-color: mat.get-color-from-palette($primary),
        --adf-snackbar-info-action-color: white,
        --adf-breadcrumb-item-active-color: mat.get-color-from-palette($foreground, text, 0.87),
        --adf-breadcrumb-item-active-hover-color: mat.get-color-from-palette($foreground, text, 0.64),
        --adf-node-selector-icon-color: mat.get-color-from-palette($foreground, icon, 0.54),
        --adf-node-selector-base-color: mat.get-color-from-palette($foreground, base, 0.45),
        --adf-node-selector-base-bold-color: mat.get-color-from-palette($foreground, base, 0.65),
        --adf-datatable-cell-link-hover-color: mat.get-color-from-palette($accent, 500),
        --adf-datatable-selected-color: mat.get-color-from-palette($primary, 100),
        --adf-user-info-color: mat.get-color-from-palette($primary, 300),
        --adf-comment-list-primary-color: mat.get-color-from-palette($primary, 100),
        --adf-comment-list-ripple-color: mat.get-color-from-palette($primary, 300),
        --adf-search-input-bg-color: mat.get-color-from-palette($primary, 50),
        --adf-search-input-highlight-color: mat.get-color-from-palette($primary, 900),
        --adf-tooltip-card-color: mat.get-color-from-palette($foreground, text, 0.75),
        --adf-card-view-text-color: mat.get-color-from-palette($foreground, text, 0.25),
        --adf-card-view-label-color: mat.get-color-from-palette($foreground, text, 0.4),
        --adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42),
        --adf-upload-border-color: mat.get-color-from-palette($foreground, text, 0.14),
        --adf-header-background-color: mat.get-color-from-palette($primary),
        --adf-header-text-color: mat.get-color-from-palette($primary, default-contrast),

        --theme-hover-bg-color: mat.get-color-from-palette($background, hover),
        --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
        --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
        --theme-background-color: mat.get-color-from-palette($background, background),
        --theme-text-fg-color: mat.get-color-from-palette($foreground, text),
        --theme-text-fg-shadow-color: mat.get-color-from-palette($foreground, text, 0.27),
        --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
        --theme-card-bg-color: mat.get-color-from-palette($background, card),
        --theme-card-bg-bold-color: mat.get-color-from-palette($background, card, 0.87),
        --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
        --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
        --theme-dialog-bg-color: mat.get-color-from-palette($background, dialog),
        --theme-bg-hover-color: mat.get-color-from-palette($background, hover),
        --theme-fg-base-color: mat.get-color-from-palette($foreground, base),
        --theme-fg-divider: mat.get-color-from-palette($foreground, divider),
        --theme-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
        --theme-selected-button-bg-color: mat.get-color-from-palette($background, selected-button),
        --theme-icon-fg-color: mat.get-color-from-palette($foreground, icon),
        --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
        --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar),
        // fonts
        --theme-font-family: mat.font-family($alfresco-typography),
        --theme-body-1-font-size: mat.font-size($alfresco-typography, body-1),
        --theme-body-2-font-size: mat.font-size($alfresco-typography, body-2),
        --theme-body-1-line-height: mat.line-height($alfresco-typography, body-1),
        --theme-display-1-font-size: mat.font-size($alfresco-typography, display-1),
        --theme-display-3-font-size: mat.font-size($alfresco-typography, display-3),
        --theme-display-4-font-size: mat.font-size($alfresco-typography, display-4),
        --theme-caption-font-size: mat.font-size($alfresco-typography, caption),
        --theme-title-font-size: mat.font-size($alfresco-typography, title),
        --theme-subheading-1-font-size: mat.font-size($alfresco-typography, subheading-1),
        --theme-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2),
        --theme-button-font-size: mat.font-size($alfresco-typography, button),
        --theme-headline-font-size: mat.font-size($alfresco-typography, headline),
        --theme-headline-line-height: mat.line-height($alfresco-typography, headline),

        --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
        --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
        --theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
        --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),

        // specific colors
        --theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200),
        --theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
        --theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50),
    );

    // propagates SCSS variables into the CSS variables scope
    :root {
        @each $name, $value in $defaults {
            #{$name}: #{$value};
        }
    }

    @include mat-datetimepicker-theme($theme);
    @include adf-snackbar-theme;
    @include adf-material-theme;
}

$adf-custom-theme-sizes: (
    'theme-adf-icon-1-font-size': 17px,
    'theme-adf-picture-1-font-size': 18px,
    'theme-adf-task-footer-font-size': 18px,
    'theme-adf-task-title-font-size': 18px
);