@use './m3-form-field';
@use '../core/tokens/token-utils';

$fallbacks: m3-form-field.get-tokens();

// Mixin that includes the density styles for form fields. MDC provides their own density
// styles for MDC text-field which we cannot use. MDC relies on input elements to stretch
// vertically when the height is reduced as per density scale. This doesn't work for our
// form field since we support custom form field controls without a fixed height. Instead, we
// provide spacing that makes arbitrary controls align as specified in the Material Design
// specification. In order to support density, we need to adjust the vertical spacing to be
// based on the density scale.
@mixin private-text-field-density-overrides() {
  $height: token-utils.slot(form-field-container-height, $fallbacks);

  .mat-mdc-form-field-infix {
    // We add a minimum height to the infix container to ensure that custom controls have the
    // same default vertical space as text-field inputs (with respect to the vertical padding).
    min-height: #{$height};

    padding-top: token-utils.slot(form-field-filled-with-label-container-padding-top, $fallbacks);
    padding-bottom: token-utils.slot(
        form-field-filled-with-label-container-padding-bottom, $fallbacks);

    .mdc-text-field--outlined &,
    .mdc-text-field--no-label & {
      padding-top: token-utils.slot(form-field-container-vertical-padding, $fallbacks);
      padding-bottom: token-utils.slot(form-field-container-vertical-padding, $fallbacks);
    }
  }

  // By default, MDC aligns the label using percentage. This will be overwritten based
  // on whether a textarea is used. This is not possible in our implementation of the
  // form-field because we do not know what type of form-field control is set up. Hence
  // we always use a fixed position for the label. This does not have any implications.
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
    top: calc(#{$height} / 2);
  }

  // We need to conditionally hide the floating label based on the height of the form field.
  .mdc-text-field--filled .mat-mdc-floating-label {
    display: token-utils.slot(form-field-filled-label-display, $fallbacks, $fallback: block);
  }

  // For the outline appearance, we re-create the active floating label transform. This is
  // necessary because the transform for docked floating labels can be updated to account for
  // the width of prefix container.
  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
  .mdc-floating-label--float-above {
    // Needs to be in a string form to work around an internal check that incorrectly flags this
    // interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
    $offset: 'calc(6.75px + #{$height} / 2)';
    $translate: 'calc(#{$offset} * -1)';
    --mat-mdc-form-field-label-transform: translateY(#{$translate})
      scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
    transform: var(--mat-mdc-form-field-label-transform);
  }
}
