@use '@angular/material' as mat;
@use 'sass:map';
@use '../../colors' as colors;
@use '../../utilities/elevations' as elevations;
// Material chip mixin
@mixin mat-chip-override($theme, $secondary) {
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $is-dark: map.get($theme, is-dark);

  .mat-icon-container {
    height: 18px;
    width: 34px;
    margin: 8px;
    padding-top: 1px;
  }

  .mat-mdc-chip {
    line-height: 25px;
    overflow: hidden;

    .mat-mdc-chip-action-label {
      display: flex;
      align-items: center;
      letter-spacing: normal;
    }

    // Simple tags
    &.mat-mdc-standard-chip:not(.mic-chip-outline) {
      white-space: nowrap;
      transition: none;

      &.mat-secondary {
        // Secondary
        @if $is-dark {
          background-color: colors.$mic-brand-colors-grey;
        } @else {
          background-color: map.get($secondary, 300);
        }
      }

      &.mat-primary {
        background-color: map.get($primary, A400);
        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing {
          @if $is-dark {
            color: mat.m2-get-contrast-color-from-palette($primary, A100);
          } @else {
            color: mat.m2-get-contrast-color-from-palette($primary, A400);
          }
        }
      }

      &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
      &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg {
        @if $is-dark {
          color: map.get(colors.$mic-grey, A100);
        } @else {
          color: mat.m2-get-contrast-color-from-palette($secondary, 300);
        }
      }

      &:focus,
      &.mat-chip-selected.mat-primary {
        &::after {
          opacity: 0;
        }
      }

      .mat-icon {
        margin: 0 8px 0 0;
      }

      .mat-mdc-chip-trailing-icon .mat-icon {
        margin: 0px;
      }

      // Accent
      &.mat-accent,
      &.mat-accent:hover {
        background-color: map.get($accent, A400);
        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing {
          color: mat.m2-get-contrast-color-from-palette($accent, A400);
        }
      }

      // Warn
      &.mat-warn,
      &.mat-warn:hover {
        background-color: map.get($warn, A400);
        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing {
          color: mat.m2-get-contrast-color-from-palette($warn, A400);
        }
      }
    }

    // Outline tags
    &.mic-chip-outline {
      &.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
        background-color: transparent;
      }

      .mat-icon {
        margin: 0 8px 0 0;
      }

      .mat-mdc-chip-trailing-icon .mat-icon {
        margin: 0px;
      }

      @if $is-dark {
        border: solid 2px map.get(colors.$mic-grey, A100);
      } @else {
        border: solid 2px map.get($secondary, 300);
      }

      &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
      &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg {
        @if $is-dark {
          color: map.get(colors.$mic-grey, A100);
        } @else {
          color: mat.m2-get-contrast-color-from-palette($secondary, 300);
        }
      }

      &:focus {
        background-color: map.get($secondary, 300);
        outline: map.get($secondary, 300) solid 2px;
        outline-offset: 2px;
      }

      &:disabled {
        color: colors.$mic-layout-colors-white-disabled;
        background-color: transparent;
        border: solid 2px colors.$mic-layout-colors-white-disabled;
      }

      // Primary
      &.mat-primary,
      &.mat-primary:hover {
        border: 2px map.get($primary, A400) solid;

        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg,
        .mat-icon,
        .mat-icon.mat-chip-remove {
          color: map.get($primary, A400);
        }
      }

      // Accent
      &.mat-accent,
      &.mat-accent:hover {
        border: 2px map.get($accent, A400) solid;

        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg,
        .mat-icon,
        .mat-icon.mat-chip-remove {
          @if $is-dark {
            color: map.get($accent, A400);
          } @else {
            color: mat.m2-get-contrast-color-from-palette($accent, A400);
          }
        }
      }

      // warn
      &.mat-warn,
      &.mat-warn:hover {
        border: 2px map.get($warn, A400) solid;

        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg,
        .mat-icon,
        .mat-icon.mat-chip-remove {
          color: map.get($warn, A400);
        }
      }
    }

    &.mat-mdc-chip-option {
      cursor: pointer;

      &.cdk-focused {
        outline: 2px solid map.get($secondary, 400);
        outline-offset: 2px;

        &.mat-primary {
          outline-color: map.get($primary, A400);
        }

        &.mat-accent {
          outline-color: map.get($accent, A400);
        }
      }

      &:hover {
        @include elevations.mic-elevation(1);

        &:not(.mdc-evolution-chip--disabled) .mat-mdc-chip-action-label,
        &:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark-svg {
          color: map.get($accent, A100-contrast);
          @if $is-dark {
            color: colors.$mic-text-colors-normal-light;
          }
        }

        @if $is-dark {
          color: colors.$mic-text-colors-normal-light;
        }
        background-color: map.get($secondary, 300);

        .mat-icon,
        .mat-icon.mat-chip-remove {
          color: map.get($accent, A100-contrast);
          @if $is-dark {
            color: colors.$mic-text-colors-normal-light;
          }
        }
      }

      &.mat-accent {
        outline-color: map.get($accent, A400);
      }
    }

    // links
    &[routerlink],
    > a {
      cursor: pointer;
    }
  }

  .mat-mdc-chip-row.cdk-focused {
    outline: 2px solid map.get($secondary, 400);
    outline-offset: 2px;

    &.mat-primary {
      outline-color: map.get($primary, A400);
    }

    &.mat-accent {
      outline-color: map.get($accent, A400);
    }

    &.mat-warn {
      outline-color: map.get($warn, A400);
    }
  }
}
