@use '@angular/material' as mat;
@use '@finastra/fds-theme/color' as fds;
@use '@finastra/fds-theme/typography' as typo;

@mixin theme($theme: null) {
  .mat-mdc-chip.mat-mdc-standard-chip {
    border: 1px solid;
    @include fds.property(border-color, outline);
    @include fds.color(on-surface-medium);

    &:not(.mat-mdc-chip-disabled) {
      @include fds.background(surface);

      .mat-icon {
        @include fds.color(on-surface-medium);
        opacity: 0.75;
      }

      .mat-mdc-chip-action-label {
        @include fds.color(on-background);
      }

      .mat-ripple-element {
        @include fds.background(outline-info);
      }

      &:hover {
        @include fds.color(primary);

        .mat-icon {
          @include fds.color(primary);
        }
      }

      .mat-mdc-chip-remove {
        opacity: 0.75;

        &:hover {
          opacity: 1;
        }
      }

      &[selected],
      &.mat-mdc-chip-highlighted {
        &,
        &.mat-primary {
          @include fds.background(surface-selected);
          @include fds.property(border-color, primary);

          .mat-icon {
            @include fds.color(primary);
            opacity: 1;
          }

          .mat-ripple-element {
            @include fds.background(outline-info);
            opacity: 1;
          }

          .mat-mdc-chip-action-label {
            @include fds.color(primary);
          }

          .mat-mdc-chip-remove {
            @include fds.color(primary);
            opacity: 1;
          }
        }
      }
    }

    &::after {
      @include fds.background(primary);
    }

    &.mat-mdc-chip-disabled {
      @include fds.background(surface-disabled);
      opacity: 1;

      .mat-icon {
        @include fds.color(on-surface-medium);
        opacity: 0.75;
      }

      .mat-mdc-chip-action-label {
        @include fds.color(on-surface-medium);
      }
    }
  }
}

@mixin typography($config: null) {
  .mat-mdc-chip.mat-mdc-standard-chip {
    @include typo.typography(body-3);

    &[dense] {
      @include typo.typography(body-4);
    }

    &[large] {
      @include typo.typography(body-2);
    }
  }
}