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

@mixin theme($theme: null) {
  .mat-form-field-appearance-outline {
    .mat-form-field-outline {
      @include fds.property(background-color, surface);
    }

    &.mat-focused {
      .mat-form-field-outline {
        @include fds.property(background-color, surface-info);
      }

      &.mat-focused.mat-form-field-invalid {
        .mat-form-field-outline {
          @include fds.property(background-color, surface-error);
        }
      }
    }
    &.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
      @include fds.color(error);
    }
  }

  .mat-form-field-appearance-fill {
    .mat-form-field-flex {
      @include fds.property(background-color, surface-info);
    }

    .mat-form-field-underline::before {
      @include fds.property(background-color, primary);
    }

    .mat-form-field-ripple {
      @include fds.property(background-color, primary);
    }

    &.mat-form-field-invalid {
      .mat-form-field-flex {
        @include fds.property(background-color, surface-error);
      }
    }
  }

  .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
      @include fds.property(caret-color, error);
    }

    .mat-icon.mat-warn,
    .mat-form-field-label,
    .mat-form-field-label .mat-form-field-required-marker,
    .mat-error {
      @include fds.color(error);
    }

    .mat-form-field-ripple {
      @include fds.property(background-color, error);
    }
  }
}

@mixin typography($config: null) {
  .mat-form-field-appearance-outline {
    &[dense] {
      .mat-mdc-input-element,
      .mat-form-field-label,
      .mat-mdc-floating-label {
        @include typo.typography(body-2);
      }
      .mat-input-element::placeholder {
        @include typo.typography(body-2);
      }
    }

    .mat-mdc-input-element,
    .mat-input-element::placeholder {
      @include typo.typography(body-1);
    }
    @include typo.typography(body-1);
  }

  .mat-form-field-appearance-fill {
    @include typo.typography(subtitle-1);

    .mat-form-field-label,
    .mat-mdc-floating-label {
      @include typo.typography(body-1);
    }

    &[dense] {
      @include typo.typography(subtitle-2);

      .mat-mdc-input-element {
        @include typo.typography(subtitle-2);
      }
      .mat-form-field-label,
      .mat-mdc-floating-label {
        @include typo.typography(body-2);
      }
    }
  }
}