@use '@angular/material' as mat;
@import "scss/sc-mat-overrides-theme";
@import "scss/sc-utilities/sc-background";
@import "scss/sc-utilities/sc-fill";
@import "scss/sc-utilities/sc-text-theme";
@import "scss/sc-utilities/sc-borders-theme";
@import "scss/sc-input-group-theme";
@import "scss/sc-links-theme";
@import "scss/sc-buttons-theme";
@import "scss/sc-alert-theme";
@import "scss/sc-lists-theme";
@import "scss/sc-inner-layout-theme";
@import "scss/sc-custom-table-theme";
@import "scss/sc-progress-theme";
@import "scss/sc-flex-table-theme";
@import "./sc-card/sc-card-theme";
@import "./sc-table/sc-table-theme";
@import "./sc-document-viewer/sc-document-viewer-theme";
@import "./sc-document-categories/sc-document-categories-theme";
@import "./sc-wysiwyg/sc-wysiwyg-theme";
@import "./sc-documents-manager/sc-documents-manager-theme";
@import "./sc-select/sc-select-theme";
@import "./sc-scheduling-timeline/sc-scheduling-timeline-theme";
@import "./sc-maps/sc-maps-theme";
@import "./sc-scheduling-timeline/sc-scheduling-timeline-controls/sc-scheduling-timeline-controls.theme";
@import "./sc-document-categories/sc-document-versions-dialog/sc-document-versions-dialog-theme";
@import "./sc-wysiwyg/sc-wysiwyg-theme";
@import "./sc-menu/sc-menu.theme";
@import "./sc-sidetabs/sc-sidetabs-theme";
@import "./sc-image/sc-image-theme";
@import "./sc-toast/sc-toast-theme";
@import "./sc-sidenav/sc-sidenav-theme";
@import "./sc-quickactions/sc-quickactions-button-theme";
@import "./sc-notifications/sc-notifications-button-theme";
@import "./sc-shell/sc-shell-theme";
@import "./sc-smart-breadcrumbs/sc-smart-breadcrumbs-theme";
@import "./sc-page-indicator/sc-page-indicator.theme";
@import "./sc-image-card/sc-image-card-theme";
@import "./sc-image-viewer/sc-image-viewer-theme";
@import "./sc-comments/sc-comments-theme";
@import "./sc-image-comparison/sc-image-comparison-theme";
@import "./sc-documents-manager-viewer/sc-documents-manager-viewer-theme";
@import "./sc-manual/sc-manual-theme";
@import "./sc-slide-button-toggle-group/sc-slide-button-toggle-group.theme";
@import "./sc-loader/sc-loader.theme.scss";
@import "./sc-semi-circle-progress/sc-semi-circle-progress.theme.scss";
@import "./sc-status-timeline/sc-status-timeline.theme.scss";
@import "./sc-gradient-progress/sc-gradient-progress.theme.scss";
@import "./sc-history-timeline/sc-history-timeline.theme.scss";
@import "./sc-color-select/sc-color-select.theme.scss";
@import "@angular/material/theming";



/*
 * Global application theme.
 * Framework overrides and customization goes here.
 */

/// Map deep get
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

//Functions to generate foreground/background maps
@function foreground-light($pallet: $grey) {
  @return (
    nav-section-title: map-get($pallet, 400),
    nav-leading-icon: map-get($pallet, 400),
    nav-trailing-icon: map-get($pallet, 300),
    nav-trailing-icon-hover: map-get($pallet, 400),
    nav-trailing-icon-active-hover: map-get($pallet, 400),
    nav-link: map-get($pallet, 600),
    nav-link-hover: map-get($pallet, 800),
    nav-list-expanded-link-expanded: map-get($pallet, 600),
    nav-list-expanded-leading-icon: map-get($pallet, 600),
    nav-list-expanded-trailing-icon: map-get($pallet, 300),
    nav-list-expanded-link-expanded-hover: map-get($pallet, 800),
    nav-list-expanded-trailing-icon-hover: map-get($pallet, 400),
    text-inverted: $light-primary-text
  );
}

@function foreground-dark($pallet: $grey) {
  @return (
    nav-section-title: map-get($pallet, 600),
    nav-leading-icon: map-get($pallet, 600),
    nav-trailing-icon: map-get($pallet, 700),
    nav-trailing-icon-hover: map-get($pallet, 600),
    nav-trailing-icon-active-hover: map-get($pallet, 600),
    nav-link: map-get($pallet, 400),
    nav-link-hover: map-get($pallet, 500),
    nav-list-expanded-link-expanded: map-get($pallet, 400),
    nav-list-expanded-leading-icon: map-get($pallet, 400),
    nav-list-expanded-trailing-icon: map-get($pallet, 700),
    nav-list-expanded-link-expanded-hover: map-get($pallet, 200),
    nav-list-expanded-trailing-icon-hover: map-get($pallet, 600),
    text-inverted: $dark-primary-text
  );
}

@function background-dark($pallet: $grey, $primary) {
  @return (
    nav-link-hover: map-get($pallet, 900),
    nav-list-expanded-background: #303030,
    nav-list-expanded-link-expanded: #303030,
    nav-list-expanded-link-expanded-hover: map-get($pallet, 900),
    main-bg: #303030,
    card-inverted: white,
    slider-bar: map-get($pallet, 600),
    table-row-hover: desaturate(darken(map-get($primary, 900), 30%), 90%)
      // table-row-hover-odd: #494949,
    // table-row-hover-even: #383838
  );
}

@function background-light($pallet: $grey, $primary) {
  @return (
    nav-link-hover: map-get($pallet, 100),
    nav-list-expanded-background: map_get(mat.$grey-palette, 50),
    nav-list-expanded-link-expanded: map-get($pallet, 50),
    nav-list-expanded-link-expanded-hover: map-get($pallet, 100),
    main-bg: #eee,
    card-inverted: #323232,
    slider-bar: map-get($pallet, 300),
    table-row-hover: map-get($primary, 50)
      // table-row-hover-even: map-get($primary, 50),
    // table-row-hover-odd: map-get($primary, 50)
  );
}

// Functions to generate theme maps
@function ng-symblcrowd-light-theme(
  $primary,
  $accent,
  $success: mat.define-palette(mat.$green-palette),
  $warning: mat.define-palette(mat.$amber-palette),
  $danger: mat.define-palette(mat.$red-palette)
) {
  $matTheme: mat.define-light-theme($primary, $accent, $danger);
  $grey: mat.define-palette(mat.$grey-palette);
  $themeVariables: map-merge(
    $matTheme,
    (
      grey: $grey,
      sc-foreground: foreground-light($grey),
      sc-background: background-light($grey, $primary),
    )
  );
  @return map-merge(
    $themeVariables,
    (
      success: $success,
      danger: $danger,
      warning: $warning,
    )
  );
}

@function ng-symblcrowd-dark-theme(
  $primary,
  $accent,
  $success: mat.define-palette(mat.$green-palette),
  $warning: mat.define-palette(mat.$amber-palette),
  $danger: mat.define-palette(mat.$red-palette)
) {
  $matTheme: mat.define-dark-theme($primary, $accent, $danger);
  $grey: mat.define-palette(mat.$grey-palette);
  $themeVariables: map-merge(
    $matTheme,
    (
      grey: $grey,
      sc-foreground: foreground-dark($grey),
      sc-background: background-dark($grey, $primary),
    )
  );
  @return map-merge(
    $themeVariables,
    (
      success: $success,
      danger: $danger,
      warning: $warning,
    )
  );
}

@mixin ng-symblcrowd-theme($theme) {
  @include ng-symblcrowd-component-theme($theme);
  @include ng-symblcrowd-theme-theme($theme);
  @include ng-symblcrowd-shell-theme($theme);
}

@mixin ng-symblcrowd-component-theme($theme) {
  @include mat.all-component-themes($theme);
  @include sc-card-theme($theme);
  @include sc-table-theme($theme);
  @include sc-document-viewer-theme($theme);
  @include sc-document-categories-theme($theme);
  @include sc-documents-manager-theme($theme);
  @include sc-document-versions-theme($theme);
  @include wysiwyg-theme($theme);
  @include sc-menu-theme($theme);
  @include sidetabs-theme($theme);
  @include sc-select-theme($theme);
  @include sc-scheduling-timeline-theme($theme);
  @include sc-maps-theme($theme);
  @include sc-scheduling-timeline-controls-theme($theme);
  @include wysiwyg-theme($theme);
  @include sc-image-theme($theme);
  @include sc-toast-theme($theme);
  @include sc-smart-breadcrumbs-theme($theme);
  @include sc-sidenav-theme($theme);
  @include sc-page-indicator-theme($theme);
  @include sc-quickactions-button-theme($theme);
  @include sc-notifications-button-theme($theme);
  @include sc-comments-theme($theme);
  @include sc-invalid-theme($theme);
  @include sc-image-comparison-viewer-theme($theme);
  @include sc-documents-manager-viewer-theme($theme);
  @include sc-manual-theme($theme);
  @include sc-slide-button-toggle-group-theme($theme);
  @include sc-semi-circle-progress-theme($theme);
  @include sc-loader-theme($theme);
  @include sc-status-timeline-theme($theme);
  @include sc-gradient-progress-theme($theme);
  @include sc-history-timeline-theme($theme);
  @include sc-color-select-theme($theme);
}

@mixin ng-symblcrowd-theme-theme($theme) {
  @include sc-mat-overrides-theme($theme);
  @include sc-text-theme($theme);
  @include sc-borders-theme($theme);
  @include sc-background-theme($theme);
  @include sc-fill-theme($theme);
  @include sc-links-theme($theme);
  @include sc-buttons-theme($theme);
  @include sc-alert-theme($theme);
  @include sc-lists-theme($theme);
  @include sc-inner-layout-theme($theme);
  @include sc-custom-table-theme($theme);
  @include sc-image-card-theme($theme);
  @include sc-image-viewer-theme($theme);
  @include sc-input-group-theme($theme);
  @include sc-progress-theme($theme);
  @include sc-flex-table-theme($theme);
}

@mixin ng-symblcrowd-shell-theme($theme) {
  @include sc-shell-theme($theme);
}

@mixin sc-invalid-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  $label-disabled-color: mat.get-color-from-palette($foreground, disabled-text);
  $outline-color: mat.get-color-from-palette(
    $foreground,
    divider,
    if($is-dark-theme, 0.3, 0.12)
  );
  
  $outline-color-hover: mat.get-color-from-palette(
    $foreground,
    divider,
    if($is-dark-theme, 1, 0.87)
  );
  
  $outline-color-primary: mat.get-color-from-palette($primary);
  $outline-color-accent: mat.get-color-from-palette($accent);
  $outline-color-warn: mat.get-color-from-palette($warn);
  $outline-color-disabled: mat.get-color-from-palette(
    $foreground,
    divider,
    if($is-dark-theme, 0.15, 0.06)
  );

  .mat-form-field-appearance-outline {
    // Class repeated so that rule is specific enough to override focused accent color case.
    &.sc-form-field-invalid {
      .mat-form-field-outline-thick {
        color: $outline-color-warn;
        opacity: 1;
      }
    }
  }

  .mat-form-field-appearance-standard {
    // Class repeated so that rule is specific enough to override focused accent color case.
    &.sc-form-field-invalid {
      .mat-form-field-ripple {
        background-color: $outline-color-warn;
        opacity: 1;
        transform: scaleX(1);
      }
    }
  }

  .mat-form-field-appearance-fill {
    &.sc-form-field-invalid {
      .mat-form-field-ripple {
        background-color: $outline-color-warn;
        opacity: 1;
        transform: scaleX(1);
      }
    }
  }

  .mat-form-field-disabled {
    .mat-form-field-type-mat-chip-list {
      opacity: 0.60;
      
      .mat-form-field-outline {
        color: $outline-color-disabled !important;
      }
    }
  }
}