@import "../../settings/settings.colors";
@import "../../tools/tools.all";

.mat-form-field.text {
  .mat-form-field-wrapper {
    padding-bottom: 23px;
  }

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

  .mat-form-field-flex {
    position: relative;
    padding: 0;
    border: none;
    margin-top: 14px;
  }

  .mat-form-field-outline {
    background: $white;
  }

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

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

  .mat-input-element {
    height: 126px;
    padding: 10px;
    border: none;
    margin: 4px 0 0;
    animation: none !important;
    color: $licorice;
    font-size: 15px;
    resize: none;
  }

  .mat-form-field-flex::after {
    display: none;
  }

  .mat-form-field-label-wrapper {
    display: block;
    height: 16px;
    padding: 0;
    font-size: 13px;
    line-height: 16px;
    transform: translateY(-5px);

    .mat-form-field-label {
      top: 4px !important;
      overflow: visible;
      width: 100%;
      border-radius: 0;
      color: $licorice;
      font-weight: 500;
      transform: translateY(0) scale(1);
    }
  }

  &.ng-invalid:not(.ng-untouched) .mat-form-field-label,
  .mat-error {
    color: $error-default;
  }

  .mat-form-field-label,
  .mat-error {
    font-size: 12px;
  }

  .mat-form-field-subscript-wrapper {
    padding: 0;
    margin-top: 3px;
    margin-bottom: 8px;
  }

  &:hover,
  &:focus,
  &:active,
  &.mat-focused {
    .mat-form-field-outline-start,
    .mat-form-field-outline-end {
      border-width: $active-border-width !important;
      border-color: $licorice;
      border-radius: 0;
    }
  }

  &.mat-focused {
    .mat-form-field-outline-start,
    .mat-form-field-outline-end {
      border-color: $cerulean;
    }

    &.ng-invalid:not(.ng-untouched) .mat-placeholder-required {
      color: $error-default;
    }

    .mat-placeholder-required {
      color: $licorice;
    }
  }

  &.mat-form-field-invalid {
    .mat-form-field-outline-start,
    .mat-form-field-outline-end {
      border-color: $error-default !important;
    }
  }

  &:hover .mat-error::before,
  &:hover .mat-hint::before,
  &:focus-within .mat-error::before,
  &:focus-within .mat-hint::before {
    background: none;
  }
}
