@use '@angular/material' as mat;
@import 'studio-theming.scss';
@import '@alfresco/adf-core/theming';

@include mat.core;

$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);
$typography: map-get($theme, typography);


body, html {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-size: mat.font-size($typography, body-1);
    font-family: mat.font-family($typography);
    line-height: mat.line-height($typography, body-1);
}

body {
    overflow: auto;
}

.adf-full-width { width: 100%; }


// map SCSS variables to expose as CSS variables
$defaults: (
  --theme-primary-color: mat.get-color-from-palette($primary),
  --theme-studio-background: mat.get-contrast-color-from-palette($primary, 50),
  --theme-studio-gray-color: mat.get-contrast-color-from-palette($primary, 100),
  --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-background-color: mat.get-color-from-palette($background, background),
  --theme-text-fg-color: mat.get-color-from-palette($foreground, text),
  --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-title-color: mat.get-color-from-palette($foreground, text, 0.87),
  --theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38),
  --theme-text-selection-color: mat.get-color-from-palette($primary, 100),
  --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
  --theme-border-color-light: mat.get-color-from-palette($foreground, text, 0.2),
  --theme-card-background-color: mat.get-color-from-palette($background, card),
  --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
  --theme-foreground-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
  --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
  --theme-divider-color: mat.get-color-from-palette($foreground, divider, 0.07),
  --theme-divider-color-light: lighten(mat.get-color-from-palette($foreground, divider, 0.07), 30),
  --theme-dialog-bg-color: mat.get-color-from-palette($background, dialog),
  --theme-app-bar-bg-color: mat.get-color-from-palette($background, app-bar),
  --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar, 0.7),
  --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
  --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-raised-button-bg-color: mat.get-color-from-palette($background, raised-button),
  --theme-icons-fg-color: mat.get-color-from-palette($foreground, icons),
  --theme-slider-off-fg-color: mat.get-color-from-palette($foreground, slider-off),
  --theme-ama-palette-header-bg-color: mat.get-color-from-palette($foreground, text, 0.08),
  --theme-ama-palette-bg-color: mat.get-color-from-palette($foreground, text, 0.03),
  --theme-ama-palette-separator-color: mat.get-color-from-palette($foreground, text, 0.05),
  --theme-ama-var-selector-bg-color: mat.get-color-from-palette($foreground, text, 0.05),
  --theme-ama-studio-bg-color: var(--adf-snackbar-info-action-color),
  --theme-ama-var-selector-selected-text-bg-color:
    mat.get-color-from-palette($foreground, text, 0.1),
  --theme-ama-form-editor-btn-color: mat.get-color-from-palette($foreground, text, 0.25),
  --theme-ama-form-editor-btn-hover-color: mat.get-color-from-palette($foreground, text, 1),
  --theme-ama-form-editor-text-drag-color:
    mat.get-color-from-palette($foreground, text, 0.4),
  --theme-ama-condition-builder-primary-text-color:
    mat.get-color-from-palette($primary, text, 0.75),
  --theme-ama-condition-builder-accent-text-color: mat.get-color-from-palette($accent, text, 0.75),
  --theme-disabled-bg-color: mat.get-color-from-palette($foreground, text, 0.05),
  --theme-hint-bg-color: mat.get-color-from-palette($foreground, text, 0.5),
  --theme-font-family: mat.font-family($typography),
  --theme-body-1-font-size: mat.font-size($typography, body-1),
  --theme-body-1-line-height: mat.line-height($typography, body-1),
  --theme-caption-font-size: mat.font-size($typography, caption),
  --theme-title-font-size: mat.font-size($typography, title),
  --theme-subheading-2-font-size: mat.font-size($typography, subheading-2),
  --theme-headline-line-height: mat.line-height($typography, headline),
  --theme-card-bg-color: mat.get-color-from-palette($background, card),
  --theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
  --adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42),
  --theme-document-color: #00953b,
  --theme-ama-log-panel-bg-color: mat.get-color-from-palette($foreground, text, 0.01),
  --theme-dark-background-color: #424242,
  --theme-dark-mat-drawer-background-color: #303030,
  --theme-dark-header-toolbar-color: #212121,
  --theme-dark-monoco-editor-color: black,
  --theme-light-monoco-editor-color: #fffffe,
  --theme-ama-border-color: #dce0e6,
  --theme-tab-unfocused: mat.get-contrast-color-from-palette($primary, 50),

  --theme-logo-circle-bg: mat.get-color-from-palette($primary),
  --theme-logo-square-bg: #ff9015,

  --theme-main-navigation-bg: #ffffff,
  --theme-main-navigation-main-title:$black-87-opacity,
  --theme-main-navigation-menu-element: #9e9e9e,
  --theme-main-navigation-menu-element-active: mat.get-color-from-palette($primary),
  --theme-main-navigation-header-title-text: $black-87-opacity,
  --theme-main-navigation-header-controls-icon: $black-87-opacity,
  --theme-main-navigation-header-controls-icon-hover: #f0f0f0,
  --theme-main-navigation-header-controls-icon-pressed: $black-12-opacity,
  --theme-main-navigation-header-controls-badge: mat.get-color-from-palette($primary),

  --theme-user-initials-bg: #ffffff,
  --theme-user-initials-bg-hover: #f6f6f6,
  --theme-user-initials-bg-pressed: #f6f6f6,
  --theme-user-initials-text: $black-87-opacity,

  // ADF components and services
  --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-header-text-color: mat.get-color-from-palette($primary, default-contrast),
  --adf-user-info-color: mat.get-color-from-palette($primary, 300),
);

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

body {
    @include mat.all-component-themes($theme);
    @include adf-core-theme($theme);
    background-color: var(--adf-snackbar-info-action-color);
    .mat-drawer-content {
      background-color: var(--adf-snackbar-info-action-color);
    }

    .monaco-editor {
      background-color: var(--theme-light-monoco-editor-color);
    }

    .ama-model-header .mat-toolbar-single-row {
      background-color: var(--theme-card-bg-color);
    }

    .ama-collaborators-dialog-container {
      .mat-dialog-container {
          border-radius: 12px;
          padding: 20px 0 24px;
      }
  }
}

body.dark-theme {
    @include mat.all-component-colors($dark-theme);
    @include adf-core-theme($dark-theme);
    background-color: var(--theme-dark-background-color);

    .mat-drawer-content {
      background-color: var(--theme-dark-mat-drawer-background-color);
    }

    .monaco-editor {
      background-color: var(--theme-dark-monoco-editor-color);

      &-background {
        background-color: var(--theme-dark-monoco-editor-color);
      }
    }

    .ama-model-header .mat-toolbar-single-row {
      background: var(--theme-dark-header-toolbar-color);
    }
}

.mat-icon {
    overflow: unset !important;
}
