.form-field {
  font-size: mat-font-size($fontConfig, input);

  @include ui-typography-reposive($fontConfig-sm, $fontConfig-m, $fontConfig-l, input);

  &__set {
    display: flex;
  }
}

.form-field--lg {
  font-size: mat-font-size($fontConfig, input-l);

  @include ui-typography-reposive($fontConfig-sm, $fontConfig-m, $fontConfig-l, input-l);
}

.form-field--sm {
  font-size: 80%;
  font-weight: 400;

  .mat-form-field-infix {
    padding: 0.5rem 0 0.5rem 0;
  }

  .mat-form-field-label-wrapper {
    top: -1.1em;
    padding-top: 1.1em;
  }

  &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.275em) scale(0.75);
    transform: translateY(-1.275em) scale(0.75);
    width: 133.3333333333%
  }

  .mat-form-field-label{
    top: 1.875em;
    margin-top: -0.25em;
  }

  @media print, (min-width: 975px) {
    .mat-form-field-label-wrapper {
      top: -1.265625em;
      padding-top: 1.265625em;
    }
    .mat-form-field-label{
      top: 1.84375em;
      margin-top: -0.25em;
    }
  }
}

.form-field__label{
  font-weight: $bold-weight;
}

.form-field__error {
  font-weight: $bold-weight;
  //font-size: mat-font-size($fontConfig, error); removed so font size wiill follow the 75% of the container font size
}

.form-field + button,
.form-field.form-field--sm + button {
  align-self: stretch;
  margin: calc(0.25rem - 1px) 0;
}

.form-field.form-field--sm + button {
  padding: 0.25rem 0.5rem !important;
}

.form-field.form-field--lg + button {
  align-self: stretch;
  margin: calc(0.25rem + 1px) 0;
  padding: 0.75rem 1.5rem !important;
}

.mat-form-field-outline-start, .mat-form-field-outline-end {
  border-radius: 0 !important;
}