@use '../../utils/colors/colors' as colors;
@use '../../utils/mixins/mixins' as mixins;

$width-sizes: (
  'tiny': 7.875rem,
  'medium': 13.5rem,
  'large': 19.125rem,
  'extra-large': 27.75rem,
  'auto': auto,
  'full': 100%,
);

/* -- Mat form field with appearance outline styles rewrite -- */
.nfr-input.mat-mdc-form-field.mat-form-field-appearance-outline {

  @each $size, $width in $width-sizes {
    &[size='#{$size}'] {
      width: $width;
    }
  }

  .mdc-text-field--outlined {
    padding: 0 1.25rem;
  }

  .mat-mdc-form-field-infix {
    padding: 0.875rem 0;
    min-height: 3.125rem;
    border-radius: 3.125rem;

    .mat-mdc-input-element {
      @include mixins.font(600, 0.875rem, 1.25rem);
      color: colors.$nfr-primary-color;
    }

    .mat-mdc-floating-label.mdc-floating-label mat-label {
      color: colors.$nfr-primary-color;
    }
  }

  .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
    @include mixins.hide-if-empty();
    display: none;
  }
}