@use '../core/style/spacing' as *;

$mat-form-field-subscript-margin-top: 2px;

$infix-padding-top-dense: 18px;
$infix-padding-bottom-dense: 12px;

$mat-icon-button-dense-size: 40px;

.mat-mdc-form-field.mat-form-field-appearance-outline {
  .mat-mdc-text-field-wrapper {
    .mat-mdc-form-field-icon-prefix {
      .mat-icon,
      span {
        padding-left: $uxg-spacing-3;
        padding-right: $uxg-spacing-2;
      }
    }
    .mat-mdc-form-field-icon-suffix {
      span {
        padding-left: $uxg-spacing-2;
        padding-right: $uxg-spacing-3;
      }
    }
    .mat-mdc-form-field-infix {
      min-height: auto;
    }
  }

  &.mat-focused {
    .mat-form-field-outline-thick {
      .mat-form-field-outline-start.mat-form-field-outline-start,
      .mat-form-field-outline-end.mat-form-field-outline-end {
        border-width: 2px;
      }
    }
  }

  .mat-form-field-outline-thick {
    .mat-form-field-outline-start.mat-form-field-outline-start,
    .mat-form-field-outline-end.mat-form-field-outline-end {
      border-width: 1px;
    }
  }

  .mat-mdc-form-field-icon-prefix.mat-mdc-form-field-icon-prefix,
  .mat-mdc-form-field-icon-suffix.mat-mdc-form-field-icon-suffix {
    top: 2px;
  }

  .mat-form-field-outline {
    border-radius: 6px;

    .mat-form-field-outline-gap {
      display: none;
    }
  }

  &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label.mat-form-field-label {
    transform: translateY(-0.6em) scale(0.8);
  }

  .mat-form-field-subscript-wrapper {
    margin-top: 0;
  }

  &[dense] {
    .mat-mdc-text-field-wrapper {
      .mat-mdc-form-field-flex {
        .mat-mdc-icon-button.mat-mdc-button-base {
          width: $mat-icon-button-dense-size;
          height: $mat-icon-button-dense-size;
        }
        .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
          top: 20px;
        }
        .mdc-notched-outline__notch {
          width: min-content !important;
          padding-right: 0;
        }
      }
      .mat-mdc-form-field-infix {
        padding: 10px 0;
      }
    }
  }
}

.mat-form-field-appearance-fill {
  .mat-mdc-text-field-wrapper {
    .mat-form-field-subscript-wrapper {
      margin-top: $mat-form-field-subscript-margin-top;
    }
  }

  &[dense] {
    .mat-mdc-text-field-wrapper {
      .mat-mdc-form-field-flex {
        .mat-mdc-form-field-infix {
          padding-top: $infix-padding-top-dense;
          padding-bottom: $infix-padding-bottom-dense;
          min-height: auto;

          .mat-mdc-floating-label {
            top: 22px;
          }
        }
        .mat-mdc-icon-button.mat-mdc-button-base {
          width: $mat-icon-button-dense-size;
          height: $mat-icon-button-dense-size;
        }
      }
    }
  }

  .mat-mdc-form-field-icon-prefix {
    .mat-icon,
    span {
      padding-left: $uxg-spacing-3;
      padding-right: $uxg-spacing-2;
    }
  }
  .mat-mdc-form-field-icon-suffix {
    span {
      padding-left: $uxg-spacing-2;
      padding-right: $uxg-spacing-3;
    }
  }
}