@use '@angular/material' as mat;
@use 'sass:map';
@import 'egret.theme';

@include mat.core();

// @debug $font-family-base;

$egret-typography: mat.define-typography-config($font-family: $font-family-base,
    $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, $font-family-base),
    $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, $font-family-base),
    $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, $font-family-base),
    $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, $font-family-base),
    $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 500, $font-family-base),
    $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 500, $font-family-base),
    $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 500, $font-family-base),
    $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, $font-family-base),
    $body-1: mat.define-typography-level(0.875rem, 1.5rem, 500, $font-family-base),
    $body-2: mat.define-typography-level(0.875rem, 1.5rem, 500, $font-family-base),
    $caption: mat.define-typography-level(0.75rem, 1rem, 500, $font-family-base),
    $button: mat.define-typography-level(0.875rem, 0.875rem, 500, $font-family-base),
    $overline: mat.define-typography-level(0.75rem, 2rem, 500, $font-family-base));

/* Create style without colors */
@include mat.all-component-themes((color: null,
    density: 0,
    typography: $egret-typography,
  ));
  
  // .dense-3{
  //   // @include mat.all-component-densities(-9);
  //   --mat-form-field-container-height: 35px;
  //   --mat-form-field-filled-label-display: none;
  //   --mat-form-field-container-vertical-padding: 4px;
  //   --mat-form-field-filled-with-label-container-padding-top: 6px;
  //   --mat-form-field-filled-with-label-container-padding-bottom: 6px;
  //   --mat-select-arrow-transform: none;
  //   --mdc-checkbox-state-layer-size: 28px;
  //   --mat-checkbox-touch-target-display: none;
  //   --mdc-switch-state-layer-size: 28px;
  //   --mdc-radio-state-layer-size: 28px;
  //   --mat-radio-touch-target-display: none;
  //   --mdc-list-list-item-one-line-container-height: 24px;
  //   --mdc-list-list-item-two-line-container-height: 48px;
  //   --mdc-list-list-item-three-line-container-height: 56px;
  //   --mat-list-list-item-leading-icon-start-space: 16px;
  //   --mat-list-list-item-leading-icon-end-space: 32px;
  //   --mat-paginator-container-size: 40px;
  //   --mat-paginator-form-field-container-height: 36px;
  //   --mat-paginator-form-field-container-vertical-padding: 6px;
  //   --mdc-text-button-container-height: 24px;
  //   --mdc-filled-button-container-height: 24px;
  //   --mdc-outlined-button-container-height: 24px;
  //   --mdc-protected-button-container-height: 24px;
  //   --mat-text-button-touch-target-display: none;
  //   --mat-filled-button-touch-target-display: none;
  //   --mat-protected-button-touch-target-display: none;
  //   --mat-outlined-button-touch-target-display: none;
  //   --mat-icon-button-touch-target-display: none;
  //   --mat-fab-touch-target-display: none;
  //   --mat-fab-small-touch-target-display: none;
  //   --mat-table-header-container-height: 40px;
  //   --mat-table-footer-container-height: 36px;
  //   --mat-table-row-item-container-height: 36px;
  //   --mat-expansion-header-collapsed-state-height: 36px;
  //   --mat-expansion-header-expanded-state-height: 48px;
  //   --mat-stepper-header-height: 42px;
  //   --mat-toolbar-standard-height: 52px;
  //   --mat-toolbar-mobile-height: 44px;
  //   --mat-tree-node-min-height: 28px;
  //   --mat-standard-button-toggle-height: 24px;   
  // }

  // .dense-4{
  //   // @include mat.all-component-densities(-9);
  //   --mat-form-field-container-height: 40px;
  //   --mat-form-field-filled-label-display: none;
  //   --mat-form-field-container-vertical-padding: 4px;
  //   --mat-form-field-filled-with-label-container-padding-top: 6px;
  //   --mat-form-field-filled-with-label-container-padding-bottom: 6px;
  //   --mat-select-arrow-transform: none;
  //   --mdc-checkbox-state-layer-size: 28px;
  //   --mat-checkbox-touch-target-display: none;
  //   --mdc-switch-state-layer-size: 28px;
  //   --mdc-radio-state-layer-size: 28px;
  //   --mat-radio-touch-target-display: none;
  //   --mdc-list-list-item-one-line-container-height: 24px;
  //   --mdc-list-list-item-two-line-container-height: 48px;
  //   --mdc-list-list-item-three-line-container-height: 56px;
  //   --mat-list-list-item-leading-icon-start-space: 16px;
  //   --mat-list-list-item-leading-icon-end-space: 32px;
  //   --mat-paginator-container-size: 40px;
  //   --mat-paginator-form-field-container-height: 36px;
  //   --mat-paginator-form-field-container-vertical-padding: 6px;
  //   --mdc-text-button-container-height: 24px;
  //   --mdc-filled-button-container-height: 24px;
  //   --mdc-outlined-button-container-height: 24px;
  //   --mdc-protected-button-container-height: 24px;
  //   --mat-text-button-touch-target-display: none;
  //   --mat-filled-button-touch-target-display: none;
  //   --mat-protected-button-touch-target-display: none;
  //   --mat-outlined-button-touch-target-display: none;
  //   --mat-icon-button-touch-target-display: none;
  //   --mat-fab-touch-target-display: none;
  //   --mat-fab-small-touch-target-display: none;
  //   --mat-table-header-container-height: 40px;
  //   --mat-table-footer-container-height: 36px;
  //   --mat-table-row-item-container-height: 36px;
  //   --mat-expansion-header-collapsed-state-height: 36px;
  //   --mat-expansion-header-expanded-state-height: 48px;
  //   --mat-stepper-header-height: 42px;
  //   --mat-toolbar-standard-height: 52px;
  //   --mat-toolbar-mobile-height: 44px;
  //   --mat-tree-node-min-height: 28px;
  //   --mat-standard-button-toggle-height: 24px;   
  // }
    .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
    font-size: 1rem;
    width: 20px;
  }
  .p-toast  {
    z-index: 10000; /* Ensure this is higher than the dialog's z-index */
    opacity: 1 !important;
  }

  // .cdk-overlay-backdrop {
  //   z-index: 999 !important;
  // }
  
    .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon .p-icon-wrapper{
    width: 20px;
  }
    .p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
    margin: 0.5rem 0 0 0;
    width: 100%;
    max-width: inherit;
    /* word-wrap: break-word; */
    white-space: normal;
    overflow-wrap: break-word;
  }
  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
    margin: 0 0 0 1rem;
    width: 300px;
  }
  .dense-3 {
    // @include mat.all-component-densities(-9);
    --mat-form-field-container-height: 27px;
    --mat-form-field-filled-label-display: none;
    --mat-form-field-container-vertical-padding: 1px;
    --mat-form-field-filled-with-label-container-padding-top: 6px;
    --mat-form-field-filled-with-label-container-padding-bottom: 6px;
    --mat-select-arrow-transform: none;
    --mdc-checkbox-state-layer-size: 28px;
    --mat-checkbox-touch-target-display: none;
    --mdc-switch-state-layer-size: 28px;
    --mdc-radio-state-layer-size: 28px;
    --mat-radio-touch-target-display: none;
    --mdc-list-list-item-one-line-container-height: 24px;
    --mdc-list-list-item-two-line-container-height: 48px;
    --mdc-list-list-item-three-line-container-height: 56px;
    --mat-list-list-item-leading-icon-start-space: 16px;
    --mat-list-list-item-leading-icon-end-space: 32px;
    --mat-paginator-container-size: 40px;
    --mat-paginator-form-field-container-height: 36px;
    --mat-paginator-form-field-container-vertical-padding: 6px;
    --mdc-text-button-container-height: 24px;
    --mdc-filled-button-container-height: 24px;
    --mdc-outlined-button-container-height: 24px;
    --mdc-protected-button-container-height: 24px;
    --mat-text-button-touch-target-display: none;
    --mat-filled-button-touch-target-display: none;
    --mat-protected-button-touch-target-display: none;
    --mat-outlined-button-touch-target-display: none;
    --mat-icon-button-touch-target-display: none;
    --mat-fab-touch-target-display: none;
    --mat-fab-small-touch-target-display: none;
    --mat-table-header-container-height: 40px;
    --mat-table-footer-container-height: 36px;
    --mat-table-row-item-container-height: 36px;
    --mat-expansion-header-collapsed-state-height: 36px;
    --mat-expansion-header-expanded-state-height: 48px;
    --mat-stepper-header-height: 42px;
    --mat-toolbar-standard-height: 52px;
    --mat-toolbar-mobile-height: 44px;
    --mat-tree-node-min-height: 28px;
    --mat-standard-button-toggle-height: 24px;   
  }
  .dense-2 {
    // @include mat.all-component-densities(-9);
    --mat-form-field-container-height: 35px;
    --mat-form-field-filled-label-display: none;
    --mat-form-field-container-vertical-padding: 4px;
    --mat-form-field-filled-with-label-container-padding-top: 6px;
    --mat-form-field-filled-with-label-container-padding-bottom: 6px;
    --mat-select-arrow-transform: none;
    --mdc-checkbox-state-layer-size: 28px;
    --mat-checkbox-touch-target-display: none;
    --mdc-switch-state-layer-size: 28px;
    --mdc-radio-state-layer-size: 28px;
    --mat-radio-touch-target-display: none;
    --mdc-list-list-item-one-line-container-height: 24px;
    --mdc-list-list-item-two-line-container-height: 48px;
    --mdc-list-list-item-three-line-container-height: 56px;
    --mat-list-list-item-leading-icon-start-space: 16px;
    --mat-list-list-item-leading-icon-end-space: 32px;
    --mat-paginator-container-size: 40px;
    --mat-paginator-form-field-container-height: 36px;
    --mat-paginator-form-field-container-vertical-padding: 6px;
    --mdc-text-button-container-height: 24px;
    --mdc-filled-button-container-height: 24px;
    --mdc-outlined-button-container-height: 24px;
    --mdc-protected-button-container-height: 24px;
    --mat-text-button-touch-target-display: none;
    --mat-filled-button-touch-target-display: none;
    --mat-protected-button-touch-target-display: none;
    --mat-outlined-button-touch-target-display: none;
    --mat-icon-button-touch-target-display: none;
    --mat-fab-touch-target-display: none;
    --mat-fab-small-touch-target-display: none;
    --mat-table-header-container-height: 40px;
    --mat-table-footer-container-height: 36px;
    --mat-table-row-item-container-height: 36px;
    --mat-expansion-header-collapsed-state-height: 36px;
    --mat-expansion-header-expanded-state-height: 48px;
    --mat-stepper-header-height: 42px;
    --mat-toolbar-standard-height: 52px;
    --mat-toolbar-mobile-height: 44px;
    --mat-tree-node-min-height: 28px;
    --mat-standard-button-toggle-height: 24px;   
  }

  .dense-1 {
    @include mat.all-component-densities(-1);
  }

  .dense-2 .mdc-text-field--outlined .mdc-floating-label {
    padding-bottom: 2px;
    font-size: 12px !important
  }

  .dense-2 .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{
    font-size: 10px !important
  }

  // .dense-3 .mdc-text-field--outlined .mdc-floating-label {
  //   padding-bottom: 2px;
  //   font-size: 12px !important
  // }

  // .dense-4 .mdc-text-field--outlined .mdc-floating-label {
  //   padding-bottom: 2px;
  //   font-size: 12px !important
  // }

  // .dense-3 .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{
  //   font-size: 10px !important
  // }

  // .dense-4 .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{
  //   font-size: 10px !important
  // }

  .dense-2.date-field {
    font-size: 0.875rem; /* Reduce font size */
  }

  .dense-2.date-field .mat-form-field-wrapper {
      padding-bottom: 0px; /* Reduce padding */
  }

  .dense-2.date-field .mat-form-field-outline {
      top: -0.25em; /* Adjust the outline position */
  }

  .dense-2.date-field .mat-form-field-outline-start,
  .dense-2.date-field .mat-form-field-outline-end {
      min-height: 2.25em; /* Reduce the height */
  }

  .dense-2.date-field .mat-form-field-infix {
      padding: 0.25em 0 0.25em; /* Adjust padding inside the field */
  }

  .dense-2.date-field .mat-form-field-label {
      transform: translateY(-0.75em) scale(0.75); /* Adjust label position */
  }

  .dense-2.date-field .mat-datepicker-toggle {
      margin-top: -0.25em; /* Adjust toggle button position */
  }

  .dense-2.date-field .mat-datepicker-content {
      font-size: 0.875rem; /* Reduce font size in the calendar */
  }


@include mat.typography-hierarchy($egret-typography);

/* Generate Primary, Accent and Warn palettes */
$default-primary-palette: (
  main: #0081ff,
  lighter: #b3d9ff,
  darker: #0064ff,
  200: #0081ff,
  contrast: (main: white,
    lighter: rgba(black, 0.87),
    darker: white,
  ),
);
$default-theme-primary: mat.define-palette($default-primary-palette, main, lighter, darker);

$default-accent-palette: (
  main: #ff8a48,
  lighter: #ffdcc8,
  darker: #ff6d30,
  200: #ff8a48,
  contrast: (main: rgba(black, 0.87),
    lighter: rgba(black, 0.87),
    darker: rgba(black, 0.87),
  ),
);
$default-theme-accent: mat.define-palette($default-accent-palette, main, lighter, darker);

$default-warn-palette: (
  main: #ff3d57,
  lighter: #ffc5cd,
  darker: #ff273c,
  200: #ff3d57,
  contrast: (main: white,
    lighter: rgba(black, 0.87),
    darker: white,
  ),
);
$default-theme-warn: mat.define-palette($default-warn-palette, main, lighter, darker);

/* Create Light theme. */
.egret-navy {
  // Foreground colors
  $dark-text: #000000;
  $dark-primary-text: $body-color;
  $dark-accent-text: rgba(rgba(black, 0.87), 0.54);
  $dark-disabled-text: rgba(rgba(black, 0.87), 0.38);
  $dark-dividers: rgba(rgba(black, 0.87), 0.12);
  $dark-focused: rgba(rgba(black, 0.87), 0.12);
  // Background colors
  $light-background: #fafafa;
  $light-bg-darker-5: darken($light-background, 5%);
  $light-bg-darker-10: darken($light-background, 10%);
  $light-bg-darker-20: darken($light-background, 20%);
  $light-bg-darker-30: darken($light-background, 30%);
  $light-bg-lighter-5: lighten($light-background, 5%);
  $dark-bg-tooltip: lighten(#2c2c2c, 20%);
  $dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
  $dark-bg-alpha-12: rgba(#2c2c2c, 0.12);

  $light-theme: (color: (primary: $default-theme-primary,
      accent: $default-theme-accent,
      warn: $default-theme-warn,
      is-dark: false,
      foreground: (base: black,
        divider: rgba(black, 0.12),
        dividers: rgba(black, 0.12),
        disabled: rgba(black, 0.38),
        disabled-button: rgba($dark-text, 0.26),
        disabled-text: rgba(black, 0.38),
        elevation: black,
        secondary-text: $dark-accent-text,
        hint-text: rgba(black, 0.38),
        accent-text: $dark-accent-text,
        icon: $dark-accent-text,
        icons: $dark-accent-text,
        text: rgba(black, 0.87),
        slider-min: rgba(black, 0.87),
        slider-off: rgba($dark-text, 0.26),
        slider-off-active: rgba(black, 0.38),
      ),
      background: (background: $light-background,
        status-bar: $light-bg-darker-20,
        app-bar: $light-bg-darker-5,
        hover: $dark-bg-alpha-4,
        card: $light-bg-lighter-5,
        dialog: $light-bg-lighter-5,
        tooltip: $dark-bg-tooltip,
        disabled-button: $dark-bg-alpha-12,
        raised-button: $light-bg-lighter-5,
        focused-button: rgba(black, 0.12),
        selected-button: $light-bg-darker-20,
        selected-disabled-button: $light-bg-darker-30,
        disabled-button-toggle: $light-bg-darker-10,
        unselected-chip: $light-bg-darker-10,
        disabled-list-option: $light-bg-darker-10,
      ),
    ),
  );

  @include mat.all-component-colors($light-theme);
  @include egret-theme($light-theme);
}

/* Create Dark theme */
.egret-navy-dark {
  // Foreground Elements
  $light-text: #ffffff;
  $light-accent-text: rgba(white, 0.7);

  // Background config
  $dark-background: #1a2038;
  $dark-bg-lighter-5: lighten($dark-background, 5%);
  $dark-bg-lighter-10: lighten($dark-background, 10%);
  $dark-bg-lighter-20: lighten($dark-background, 20%);
  $dark-bg-lighter-30: lighten($dark-background, 30%);
  $light-bg-alpha-4: rgba(#fafafa, 0.04);
  $light-bg-alpha-12: rgba(#fafafa, 0.12);

  $dark-theme: (color: (primary: $default-theme-primary,
      accent: $default-theme-accent,
      warn: $default-theme-warn,
      is-dark: true,
      foreground: (base: $light-text,
        divider: rgba(white, 0.12),
        dividers: rgba(white, 0.12),
        disabled: rgba(white, 0.5),
        disabled-button: rgba($light-text, 0.3),
        disabled-text: rgba(white, 0.5),
        elevation: black,
        hint-text: rgba(white, 0.5),
        secondary-text: $light-accent-text,
        accent-text: $light-accent-text,
        icon: $light-text,
        icons: $light-text,
        text: $light-text,
        slider-min: $light-text,
        slider-off: rgba($light-text, 0.3),
        slider-off-active: rgba($light-text, 0.3),
      ),
      background: (background: $dark-background,
        status-bar: $dark-bg-lighter-20,
        app-bar: $dark-bg-lighter-5,
        hover: $light-bg-alpha-4,
        card: $dark-bg-lighter-5,
        dialog: $dark-bg-lighter-5,
        tooltip: $dark-bg-lighter-20,
        disabled-button: $light-bg-alpha-12,
        raised-button: $dark-bg-lighter-5,
        focused-button: rgba(white, 0.12),
        selected-button: $dark-bg-lighter-20,
        selected-disabled-button: $dark-bg-lighter-30,
        disabled-button-toggle: $dark-bg-lighter-10,
        unselected-chip: $dark-bg-lighter-20,
        disabled-list-option: $dark-bg-lighter-10,
      ),
    ),
  );

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

}