Mat form field value alignment issue when density is -3

I'm having trouble centering the value of the input vertically.

When the density is -3 and the font size is 1em the value of the input is not centered correctly.

Also the label alignment when there's no value inside the input is not exactly ok as its a bit lower.

Does anyone know which is the best approach to handle this issue ?

I know I can set a top positioning for the input but I'm not sure if its the best approach. Does anyone else has a better idea?

See example: https://stackblitz.com/edit/b328rv-mayvac?file=package.json

For 16px the line-height of 23px can be specified in the typography config.

$font-family: Calibri, sans-serif;
$config: mat.define-typography-config(
  $font-family: $font-family,
  $headline-1:
    mat.define-typography-level(
      $font-size: 22px,
      $line-height: 22px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
    ...

Full SCSS:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

$font-family: Calibri, sans-serif;
$config: mat.define-typography-config(
  $font-family: $font-family,
  $headline-1:
    mat.define-typography-level(
      $font-size: 22px,
      $line-height: 22px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $headline-2:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $headline-3:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: normal,
      $font-family: $font-family,
    ),
  $button:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $subtitle-1:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $body-1:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: normal,
      $font-family: $font-family,
    ),
);

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography: $config,
    density: -3,
  )
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($theme);

Stackblitz Demo