@use '@angular/material' as mat;

@include mat.core();

$palette-ione-primary: (
        50 : #e7ecf4,
        100 : #c3cfe3,
        200 : #9bb0d0,
        300 : #7390bd,
        400 : #5578af,
        500 : #3760a1,
        600 : #315899,
        700 : #2a4e8f,
        800 : #234485,
        900 : #163374,
        A100 : #acc3ff,
        A200 : #799eff,
        A400 : #4679ff,
        A700 : #2c67ff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

// Define a theme.
$primary: mat.m2-define-palette($palette-ione-primary);
$accent: mat.m2-define-palette($palette-ione-primary, A700, A400, A200);

$theme: mat.m2-define-light-theme($primary, $accent);

// Include all theme styles for the components.
@include mat.all-component-themes($theme);

// Material custom font configuration
$mat-font-family: mat.m2-define-typography-config($font-family: "Montserrat, Arial, Helvetica, sans-serif");

@include mat.all-component-typographies($mat-font-family);

// overrides, because of changes in Angular Material > 15
.mat-mdc-tooltip {
  max-width: 300px !important;
}

.mat-mdc-card-content {
  padding: 0 !important;
}

.mat-mdc-option {
  .mdc-list-item__primary-text {
    color: #000000 !important;
  }
}
.mat-mdc-slide-toggle.mat-accent {
  @include mat.slide-toggle-overrides((
          selected-focus-handle-color: $hd-color-main,
          selected-focus-state-layer-color: $hd-color-main,
          selected-handle-color: $hd-color-main,
          selected-hover-state-layer-color: $hd-color-main,
          selected-pressed-state-layer-color: $hd-color-main,
          selected-hover-handle-color: $hd-color-main,
          selected-pressed-handle-color: $hd-color-main,
          selected-focus-track-color: $hd-color-main-accent,
          selected-hover-track-color: $hd-color-main-accent,
          selected-pressed-track-color: $hd-color-main-accent,
          selected-track-color: $hd-color-main-accent
  ));
}

:root {
  @include mat.dialog-overrides((
          content-padding: 0,
          container-color: $hd-color-dialog-background

  ));
  @include mat.slider-overrides((
          active-track-color: $hd-color-main,
          focus-handle-color: $hd-color-main,
          handle-color: $hd-color-main,
          hover-handle-color: $hd-color-main,
          focus-state-layer-color: color-mix(in srgb, $hd-color-main 12%, transparent),
          hover-state-layer-color: color-mix(in srgb, $hd-color-main 4%, transparent),
          inactive-track-color: $hd-color-main,
          ripple-color: $hd-color-main,
          with-tick-marks-active-container-color: #ffffff,
          with-tick-marks-inactive-container-color: $hd-color-main,
          disabled-active-track-color: rgba(0, 0, 0, 0.87),
          disabled-handle-color: rgba(0, 0, 0, 0.87),
          disabled-inactive-track-color: rgba(0, 0, 0, 0.87),
          label-container-color: #424242,
          label-label-text-color: white,
          value-indicator-opacity: 1,
          with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87),
          with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87)
  ));
  @include mat.tooltip-overrides((
          supporting-text-size: 10px,
          container-shape: 5px,
  ));
  @include mat.list-overrides((
          list-item-label-text-color: white,
          list-item-label-text-size: 14px,
          list-item-label-text-tracking: normal,
          list-item-hover-label-text-color: white
  ));
}

:root {
  --mat-form-field-container-height: 50px;
  --mat-form-field-filled-with-label-container-padding-top: 19px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;

  --mat-form-field-filled-label-text-size: 14px;
  --mat-form-field-filled-label-text-tracking: normal;
  --mat-form-field-filled-container-color: white;
  --mat-form-field-state-layer-color: white;

  --mat-button-protected-label-text-tracking: normal;

  --mat-dialog-supporting-text-color: #000000;
  --mat-dialog-supporting-text-size: 14px;

  --mat-button-toggle-shape: 3px;
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-selected-state-background-color: #{$hd-color-main};

  --mat-button-protected-icon-spacing: 0;
  --mat-button-protected-icon-offset: 0;
}
.mdc-button {
  .mdc-button__label {
    display: flex;
  }
}

.mat-mdc-icon-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.mat-mdc-form-field-subscript-wrapper, .mdc-line-ripple {
  display: none;
}

.mdc-text-field {
  padding: 0 !important;
}

.mat-warn {
  color: white;
}

.mat-mdc-button>.mat-icon, .mat-mdc-unelevated-button>.mat-icon, .mat-mdc-raised-button>.mat-icon, .mat-mdc-outlined-button>.mat-icon, .mat-tonal-button>.mat-icon {
  font-size: 24px !important;
  height: 24px !important;
  width: 24px !important;
}

.mat-mdc-dialog-container {
  background-color: white;
  border-radius: 4px;
  h2, h3, h4, p {
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
  .mat-mdc-dialog-surface {
    box-shadow: none;
    border-radius: 0;
    &:before {
      content: none;
    }
  }
}

.mat-mdc-dialog-content {
  .mat-mdc-list-item {
    height: 72px !important;
  }
  .mdc-list-item__primary-text {
    color: #000000 !important;
    white-space: break-spaces;
  }
}
