@use 'sass:map';
@use 'sass:meta';
@use 'sass:color';
@use '@angular/material' as mat;
@use '@angular/cdk' as cdk;
@use "src/app/styles/variables" as *;
@use "src/app/styles/palettes" as *;
@use "src/app/styles/font" as *;
@use "src/app/styles/header" as *;
@use "src/app/styles/sidebar" as *;
@use "src/app/styles/settings" as *;
@use "src/app/styles/footer" as *;
@use "src/app/styles/themes" as *;
@use "src/app/styles/scrollbar" as *;
@use "src/app/styles/calendar" as *;
@use "src/app/styles/mat-tab" as *;
@use "src/app/styles/mat-card" as *;
@use "src/app/styles/mat-form-field" as *;
@use "src/app/styles/mat-carousel" as *;
@use "src/app/styles/typography" as *;
@use "src/app/styles/notification" as *;
@use "src/app/styles/full-calendar" as *;

// Compatibility layer for legacy theme API used across old styles.
$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

@function mat-palette(
  $base-palette,
  $default: 500,
  $lighter: 100,
  $darker: 700,
  $text: $default
) {
  @return mat.m2-define-palette($base-palette, $default, $lighter, $darker, $text);
}

@function mat-light-theme($primary, $accent: null, $warn: null) {
  @if $warn == null {
    $warn: mat.m2-define-palette(mat.$m2-red-palette);
  }

  $theme: mat.m2-define-light-theme(
    (
      color: (
        primary: $primary,
        accent: $accent,
        warn: $warn,
      ),
    )
  );
  $color-config: mat.m2-get-color-config($theme);

  @if $color-config != null {
    @return map.merge($theme, $color-config);
  }

  @return $theme;
}

@function mat-color($palette, $hue: default, $opacity: null) {
  $color: null;

  @if meta.type-of($palette) == map {
    @if map.has-key($palette, $hue) {
      $color: map.get($palette, $hue);
    } @else if $hue == default-contrast and map.has-key($palette, contrast) {
      $contrast-palette: map.get($palette, contrast);

      @if meta.type-of($contrast-palette) == map and map.has-key($contrast-palette, default) {
        $color: map.get($contrast-palette, default);
      }
    }
  }

  @if $color == null {
    $color: mat.m2-get-color-from-palette($palette, $hue);
  }

  @if $opacity != null and meta.type-of($color) == color {
    @return rgba($color, $opacity);
  }

  @return $color;
}

@mixin mat-core() {
  @include mat.elevation-classes();
  @include mat.app-background();
}

@mixin angular-material-theme($theme) {
  @include mat.all-component-themes($theme);
}

@mixin mat-elevation($z-value, $color: null, $opacity: null) {
  @if $color == null {
    @include mat.elevation($z-value);
  } @else if $opacity == null {
    @include mat.elevation($z-value, $color);
  } @else {
    @include mat.elevation($z-value, $color, $opacity);
  }
}

@mixin cdk-high-contrast($target: active, $encapsulation: off) {
  @include cdk.high-contrast($target, $encapsulation) {
    @content;
  }
}
@include mat-core();

$ama-primary: mat-palette($ama-blue);
$ama-primary-light: mat-palette($ama-light-blue);
$ama-accent: mat-palette($ama-yellow);
$ama-warn: mat-palette($ama-pink);
$ama-success: mat-palette($ama-green);
$ama-info: mat-palette($ama-violet);

@function ama-light-theme(
  $primary,
  $accent,
  $warn,
  $success,
  $info,
  $primary-light
) {
  @return map.merge(
    mat-light-theme($primary, $accent, $warn),
    (
      success: $success,
      info: $info,
      primary-light: $primary-light,
    )
  );
}

/***********************************/
/** Angular Material Admin THEME **/
/**********************************/

$ama-theme: ama-light-theme(
  $ama-primary,
  $ama-accent,
  $ama-warn,
  $ama-success,
  $ama-info,
  $ama-primary-light
);

@include angular-material-theme($ama-theme);

/***********************************/
/**            Badge             **/
/**********************************/

$ama-badge-theme: ama-light-theme(
  $ama-primary,
  $ama-accent,
  $ama-warn,
  $ama-success,
  $ama-info,
  $ama-primary-light
);

@mixin mat-badge-theme($theme) {
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $primary: map.get($theme, primary);
  $primary-light: map.get($theme, primary-light);
  $success: map.get($theme, success);
  $info: map.get($theme, info);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  .mat-badge-content {
    color: mat-color($primary, default-contrast);
    background: mat-color($primary);

    @include cdk-high-contrast(active, off) {
      outline: solid 1px;
      border-radius: 0;
    }
  }

  .mat-badge-accent {
    .mat-badge-content {
      background: mat-color($accent);
      color: mat-color($accent, default-contrast);
    }
  }

  .mat-badge-warn {
    .mat-badge-content {
      color: mat-color($warn, default-contrast);
      background: mat-color($warn);
    }
  }

  .mat-badge-success {
    .mat-badge-content {
      color: mat-color($success, default-contrast);
      background: mat-color($success);
    }
  }

  .mat-badge-info {
    .mat-badge-content {
      color: mat-color($info, default-contrast);
      background: mat-color($info);
    }
  }

  .mat-badge-primary-light {
    .mat-badge-content {
      color: mat-color($primary-light, default-contrast);
      background: mat-color($primary-light);
    }
  }

  .mat-badge {
    position: relative;
  }

  .mat-badge-hidden {
    .mat-badge-content {
      display: none;
    }
  }

  .mat-badge-disabled {
    .mat-badge-content {
      $app-background: mat-color($background, 'background');
      $badge-color: mat-color($foreground, disabled-button);

      // The disabled color usually has some kind of opacity, but because the badge is overlayed
      // on top of something else, it won't look good if it's opaque. If it is a color *type*,
      // we convert it into a solid color by taking the opacity from the rgba value and using
      // the value to determine the percentage of the background to put into foreground when
      // mixing the colors together.
      @if (
        meta.type-of($badge-color) == color and meta.type-of($app-background) == color
      ) {
        $badge-opacity: color.opacity($badge-color);
        background: color.mix(
          $app-background,
          rgba($badge-color, 1),
          (1 - $badge-opacity) * 100%
        );
      } @else {
        background: $badge-color;
      }

      color: mat-color($foreground, disabled-text);
    }
  }

  .mat-badge-content {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform 200ms ease-in-out;
    transform: none;
    overflow: hidden;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .ng-animate-disabled .mat-badge-content,
  .mat-badge-content._mat-animation-noopable {
    transition: none;
  }

  // The active class is added after the element is added
  // so it can animate scale to default
  .mat-badge-content.mat-badge-active {
    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
    transform: none;
  }

  //.mat-badge-small {
  //  @include _mat-badge-size($mat-badge-small-size);
  //}
  //.mat-badge-medium {
  //  @include _mat-badge-size($mat-badge-default-size);
  //}
  //.mat-badge-large {
  //  @include _mat-badge-size($mat-badge-large-size);
  //}
}

@include mat-badge-theme($ama-badge-theme);

/***********************************/
/**          Radio Button        **/
/**********************************/

$ama-radio-button-theme: ama-light-theme(
  $ama-primary,
  $ama-accent,
  $ama-warn,
  $ama-success,
  $ama-info,
  $ama-primary-light
);

@mixin _mat-radio-color($palette) {
  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
  &.mat-radio-checked .mat-radio-outer-circle {
    border-color: mat-color($palette);
  }
  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
  .mat-radio-inner-circle,
  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
  &.mat-radio-checked .mat-radio-persistent-ripple,
  &:active .mat-radio-persistent-ripple {
    background-color: mat-color($palette);
  }
}

@mixin mat-radio-theme($theme) {
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $success: map.get($theme, success);
  $info: map.get($theme, info);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);
  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
  .mat-radio-outer-circle {
    border-color: mat-color($foreground, secondary-text);
  }

  .mat-mdc-radio-button {
    &.mat-primary {
      @include _mat-radio-color($primary);
    }

    &.mat-accent {
      @include _mat-radio-color($success);
    }

    &.mat-warn {
      @include _mat-radio-color($warn);
    }

    // This needs extra specificity, because the classes above are combined
    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.
    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).
    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &.mat-radio-disabled {
      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      &.mat-radio-checked .mat-radio-outer-circle,
      .mat-radio-outer-circle {
        border-color: mat-color($foreground, disabled);
      }
      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      .mat-radio-ripple .mat-ripple-element,
      .mat-radio-inner-circle {
        background-color: mat-color($foreground, disabled);
      }
      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      .mat-radio-label-content {
        color: mat-color($foreground, disabled);
      }
    }

    // Switch this to a solid color since we're using `opacity`
    // to control how opaque the ripple should be.
    .mat-ripple-element {
      background-color: map.get($foreground, base);
    }
  }
}

@include mat-radio-theme($ama-radio-button-theme);

/***********************************/
/**             Chip             **/
/**********************************/

@mixin custom-mat-chips-color($foreground, $background) {
  background-color: $background;
  color: $foreground;
  /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
  .mat-chip-remove {
    color: $foreground;
    opacity: 0.4;
  }
}

@mixin _mat-theme-elevation($zValue, $theme, $opacity: null) {
  $foreground: map.get($theme, foreground);
  $elevation-color: map.get($foreground, elevation);

  @if $elevation-color == null {
    @include mat-elevation($zValue);
  } @else if $opacity == null {
    @include mat-elevation($zValue, $elevation-color);
  } @else {
    @include mat-elevation($zValue, $elevation-color, $opacity);
  }
}

@mixin mat-chips-theme-color($palette) {
  @include custom-mat-chips-color(
    mat-color($palette, default-contrast),
    mat-color($palette)
  );

  //.mat-ripple-element {
  //  @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
  //}
}

$ama-chip-theme: ama-light-theme(
  $ama-primary,
  $ama-accent,
  $ama-warn,
  $ama-success,
  $ama-info,
  $ama-primary-light
);

@mixin mat-chips-theme($theme) {
  $is-dark-theme: map.get($theme, is-dark);
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $success: map.get($theme, success);
  $info: map.get($theme, info);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  $unselected-background: mat-color($background, unselected-chip);
  $unselected-foreground: mat-color($foreground, text);

  .mat-mdc-chip.mat-mdc-standard-chip {
    @include custom-mat-chips-color(
      $unselected-foreground,
      $unselected-background
    );
    /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
    /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
    &:not(.mat-chip-disabled) {
      &:active {
        @include _mat-theme-elevation(3, $theme);
      }
      /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
      .mat-chip-remove:hover {
        opacity: 0.54;
      }
    }
    /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
    &.mat-chip-disabled {
      opacity: 0.4;
    }

    &::after {
      background: map.get($foreground, base);
    }
  }
  /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
  .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-selected,
  .mat-mdc-chip.mat-mdc-standard-chip.mat-chip-selected {
    &.mat-primary {
      @include mat-chips-theme-color($primary);
    }

    &.mat-warn {
      @include mat-chips-theme-color($warn);
    }

    &.mat-accent {
      @include mat-chips-theme-color($accent);
    }

    &.mat-success {
      @include mat-chips-theme-color($success);
    }

    &.mat-info {
      @include mat-chips-theme-color($info);
    }
  }
}

@include mat-chips-theme($ama-chip-theme);

/***********************************/
/**           Buttons            **/
/**********************************/

$ama-button-theme: ama-light-theme(
  $ama-primary,
  $ama-accent,
  $ama-warn,
  $ama-success,
  $ama-info,
  $ama-primary-light
);

@mixin _mat-button-theme-property($theme, $property, $hue) {
  $success: map.get($theme, success);
  $info: map.get($theme, info);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  &.mat-success {
    #{$property}: mat-color($success, $hue);
    border-color: mat-color($success, $hue) !important;
  }
  &.mat-info {
    #{$property}: mat-color($info, $hue);
    border-color: mat-color($info, $hue) !important;
  }

  &.mat-success,
  &.mat-info {
    &[disabled] {
      $palette: $background;

      @if $property == "color" {
        $palette: $foreground;
      }

      #{$property}: mat-color($palette, disabled-button);
    }
  }
}

@mixin _mat-button-theme-extra-colors($theme) {
  .mat-mdc-button,
  .mat-mdc-icon-button,
  .mat-mdc-outlined-button {
    @include _mat-button-theme-property($theme, color, default);
  }

  .mat-mdc-unelevated-button,
  .mat-mdc-raised-button,
  .mat-mdc-fab,
  .mat-mdc-mini-fab {
    @include _mat-button-theme-property($theme, background-color, default);

    &.mat-success {
      color: mat-color(map.get($theme, success), default-contrast);
    }

    &.mat-info {
      color: mat-color(map.get($theme, info), default-contrast);
    }
  }
}

@mixin _mat-button-theme-extra-color-variables($theme) {
  $success: map.get($theme, success);
  $info: map.get($theme, info);

  .mat-mdc-button {
    &.mat-success {
      --mat-button-text-label-text-color: #{mat-color($success)};
      --mat-button-text-state-layer-color: #{mat-color($success)};
    }

    &.mat-info {
      --mat-button-text-label-text-color: #{mat-color($info)};
      --mat-button-text-state-layer-color: #{mat-color($info)};
    }
  }

  .mat-mdc-outlined-button {
    &.mat-success {
      --mat-button-outlined-label-text-color: #{mat-color($success)};
      --mat-button-outlined-outline-color: #{mat-color($success)};
      --mat-button-outlined-state-layer-color: #{mat-color($success)};
    }

    &.mat-info {
      --mat-button-outlined-label-text-color: #{mat-color($info)};
      --mat-button-outlined-outline-color: #{mat-color($info)};
      --mat-button-outlined-state-layer-color: #{mat-color($info)};
    }
  }

  .mat-mdc-unelevated-button {
    &.mat-success {
      --mat-button-filled-container-color: #{mat-color($success)};
      --mat-button-filled-label-text-color: #{mat-color(
          $success,
          default-contrast
        )};
      --mat-button-filled-state-layer-color: #{mat-color(
          $success,
          default-contrast
        )};
    }

    &.mat-info {
      --mat-button-filled-container-color: #{mat-color($info)};
      --mat-button-filled-label-text-color: #{mat-color($info, default-contrast)};
      --mat-button-filled-state-layer-color: #{mat-color($info, default-contrast)};
    }
  }

  .mat-mdc-raised-button {
    &.mat-success {
      --mat-button-protected-container-color: #{mat-color($success)};
      --mat-button-protected-label-text-color: #{mat-color(
          $success,
          default-contrast
        )};
      --mat-button-protected-state-layer-color: #{mat-color(
          $success,
          default-contrast
        )};
    }

    &.mat-info {
      --mat-button-protected-container-color: #{mat-color($info)};
      --mat-button-protected-label-text-color: #{mat-color(
          $info,
          default-contrast
        )};
      --mat-button-protected-state-layer-color: #{mat-color(
          $info,
          default-contrast
        )};
    }
  }

  .mat-mdc-fab {
    &.mat-success {
      --mat-fab-container-color: #{mat-color($success)};
      --mat-fab-foreground-color: #{mat-color($success, default-contrast)};
      --mat-fab-state-layer-color: #{mat-color($success, default-contrast)};
    }

    &.mat-info {
      --mat-fab-container-color: #{mat-color($info)};
      --mat-fab-foreground-color: #{mat-color($info, default-contrast)};
      --mat-fab-state-layer-color: #{mat-color($info, default-contrast)};
    }
  }

  .mat-mdc-mini-fab {
    &.mat-success {
      --mat-fab-small-container-color: #{mat-color($success)};
      --mat-fab-small-foreground-color: #{mat-color($success, default-contrast)};
      --mat-fab-small-state-layer-color: #{mat-color(
          $success,
          default-contrast
        )};
    }

    &.mat-info {
      --mat-fab-small-container-color: #{mat-color($info)};
      --mat-fab-small-foreground-color: #{mat-color($info, default-contrast)};
      --mat-fab-small-state-layer-color: #{mat-color($info, default-contrast)};
    }
  }
}

@include _mat-button-theme-extra-colors($ama-button-theme);
@include _mat-button-theme-extra-color-variables($ama-button-theme);

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

@include notification;
@include typography;
@include scrollbar();
@include mat-form-field();
@include calendar();
@include full-calendar;
@include blueTheme();
@include pinkTheme();
@include greenTheme();
@include darkMode();
@include mat-tab-label;
@include mat-card;

.mat-select-panel .mat-mdc-option.mat-selected:not(.mat-mdc-option-multiple),
.mat-option:hover:not(.mat-option-disabled) {
  background-color: $blue-white;
}

.mat-mdc-select-panel {
  & .mat-mdc-option {
    font-size: 16px !important;
  }
}

.mat-mdc-menu-panel.settings-theme-menu {
  margin-right: 64px;
  margin-top: -55px;
}

.mat-mdc-menu-panel.notification-menu {
  --mat-menu-item-label-text-color: #{$grey};

  .notification-menu__button {
    color: $grey;
  }

  .notification-menu__icon_yellow {
    color: $yellow;
  }

  .notification-menu__icon_green {
    color: $green;
  }

  .notification-menu__icon_pink {
    color: $pink;
  }

  .notification-menu__icon_blue {
    color: $blue;
  }
}

.mat-mdc-menu-panel.add-section-menu-panel {
  background-color: $light-blue;
  overflow: hidden;

  .mat-mdc-menu-content {
    background-color: $light-blue;
    padding: 0;
  }
}

.chat-dialog-panel .mat-mdc-dialog-container {
  padding: 0;
}

.chat-dialog-panel .mat-mdc-dialog-surface {
  border-radius: 12px;
  overflow: hidden;
}

.ng-select .ng-select-container {
  min-width: 150px;
  min-height: 40.5px;
}
