@import '@angular/material';

// Status mixin
// Use theme to manage colors on status component
@mixin mic-status-override($theme) {
  $primary: map-get($theme, primary);
  $is-dark: map-get($theme, is-dark);

  .mic-status {
    .mat-mdc-chip {
      @if $is-dark {
        background-color: $mic-brand-colors-grey !important;
      } @else {
        background-color: $mic-brand-colors-white !important;
      }
      .mdc-evolution-chip__text-label {
        color: map-get($primary, A400) !important;
      }
    }

    &.primary {
      .mat-mdc-chip {
        background-color: map-get($primary, 50) !important;
        .mdc-evolution-chip__text-label {
          @if $is-dark {
            color: map-get($mic-blue, A400) !important;
          }
        }
      }
    }

    &.yellow {
      .mat-mdc-chip {
        background-color: map-get($mic-yellow, 50) !important;
        .mdc-evolution-chip__text-label {
          color: $mic-text-colors-normal !important;
        }
      }
    }

    &.valid {
      .mat-mdc-chip {
        background-color: map-get($mic-valid, A700) !important;
        .mdc-evolution-chip__text-label {
          color: map-get($mic-valid, A100) !important;
        }
      }
    }

    &.warn {
      .mat-mdc-chip {
        background-color: map-get($mic-warn, A700) !important;
        .mdc-evolution-chip__text-label {
          color: map-get($mic-warn, A100) !important;
        }
      }
    }
  }
}
