@import '~@angular/material/_theming.scss';
@import './../_variables.scss';

@mixin ai-form-field-theme($theme) {
  $warn: map-get($theme, warn);
  $primary: map-get($theme, primary);
  $foreground: map-get($theme, foreground);
  $label-color: mat-color($foreground, secondary-text);
  .mat-form-field:not(.ai-clear) {

    .mat-form-field-wrapper {
      padding: 4px;
      border: 1px solid black;
      border-radius: 3px;
      background-color: white;
    }

    .mat-form-field-prefix, .mat-form-field-suffix {
      font-size: $default-font-size;
    }

    .mat-form-field-subscript-wrapper {
      top: 100%;
    }

    .mat-form-field-underline {
      background-color: transparent;
      background-image: none;
      bottom: 0;
      left: 0;
      .mat-form-field-ripple {
        display: none;
      }
    }

    &.mat-focused {
      .mat-form-field-label {
        color: $label-color;

        &.mat-accent {
          color: $label-color;
        }

        &.mat-warn {
          color: $label-color;
        }
      }

      &.mat-primary .mat-select-arrow {
        color: $label-color;
      }

      &.mat-accent .mat-select-arrow {
        color: $label-color;
      }

      &.mat-warn .mat-select-arrow {
        color: $label-color;
      }
    }

    &.mat-focused .mat-form-field-required-marker {
      color: $label-color;
    }

    &.mat-form-field-invalid {
      .mat-form-field-wrapper, .mat-form-field-wrapper {
        border-color: mat-color($warn);
      }

      .mat-form-field-label {
        color: $label-color;

        &.mat-accent,
        .mat-form-field-required-marker {
          color: $label-color;
        }
      }
    }

    .mat-input-element {
      caret-color: $label-color;
    }

    &.mat-form-field-disabled {
      opacity: 0.6;
    }
  }
}