@use '@angular/material' as mat;
@import '@angular/material';

// Material form field mixin
@mixin mat-form-field-override($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $is-dark: map-get($theme, is-dark);

  // Override padding for input outline
  .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 0.75em 0 0.75em 0;
  }

  .mat-mdc-option.mdc-list-item {
    border: 2px solid transparent;
  }

  .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
    outline: none;
    border: map-get($primary, A400) solid 2px;
  }

  // Override for input autocomplete (like search bar)
  .mat-mdc-autocomplete .mat-option:hover:not(.mat-option-disabled),
  .mat-autocomplete .mat-option:focus:not(.mat-option-disabled) {
    background-color: map-get($primary, A400);
    color: $mic-brand-colors-white;
  }

  .mat-mdc-autocomplete .mat-mdc-option.mat-active {
    background-color: map-get($primary, A400);
    color: $mic-brand-colors-white;
  }

  .mic-form-field-white {
    .mat-form-field-underline {
      background-color: $mic-brand-colors-white;
    }

    &.mat-mdc-form-field.mat-accent .mdc-text-field--focused,
    .mdc-text-field,
    .mdc-text-field:not(.mdc-text-field--disabled) {
      .mdc-floating-label,
      .mat-mdc-select-trigger,
      .mat-mdc-select-arrow,
      .mat-mdc-select-value,
      .mat-mdc-select-placeholder,
      input::placeholder {
        caret-color: $mic-brand-colors-white;
        color: $mic-brand-colors-white !important;
      }
    }

    .mdc-text-field--filled.mdc-text-field--focused {
      outline: white solid 2px;
    }

    .mdc-text-field--filled .mdc-line-ripple:after {
      border-bottom-color: $mic-brand-colors-white;
    }

    .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
      &.mat-mdc-text-field-wrapper,
      &.mat-mdc-text-field-wrapper:hover {
        .mdc-notched-outline__leading,
        .mdc-notched-outline__notch,
        .mdc-notched-outline__trailing {
          border-color: $mic-brand-colors-white !important;
        }

        .mdc-text-field__input,
        .mdc-text-field__input::placeholder {
          color: $mic-brand-colors-white;
        }
      }
    }
  }

  .mat-mdc-form-field-error-wrapper {
    padding: 0 !important;

    .mat-mdc-form-field-error {
      background-color: map-get($mic-warn, A700);
      border-radius: 4px;
      padding: 0 4px 5px;
      margin-top: 5px;
    }
  }

  .mat-mdc-form-field-hint-wrapper {
    padding: 0 !important;

    .mat-mdc-form-field-hint {
      width: 100%;
      border-radius: 4px;
      padding: 0 4px 5px;
      margin-top: 5px;

      &.mic-info {
        background-color: map-get($primary, A100);

        @if $is-dark {
          color: mat.m2-get-contrast-color-from-palette($primary, A100);
        } @else {
          color: map-get($primary, A400);
        }
      }

      &.mic-valid {
        display: none;
        background-color: map-get($mic-valid, A700);
        color: mat.m2-get-contrast-color-from-palette($mic-valid, A700);
      }
    }

    .mat-mdc-form-field-hint-spacer {
      display: none;
    }
  }

  .mat-mdc-form-field.ng-valid.ng-touched {
    .mat-mdc-form-field-hint.mic-valid {
      display: block;
    }
  }
}
