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

.mat-form-field.input {
  $input-margin-button: $form-field-margin-button;

  position: relative;
  margin-bottom: $input-margin-button;

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

    .mat-form-field-wrapper {
      padding: 1.25rem 0 1.625rem;
      margin-top: -0.125rem;
      margin-bottom: 0;
    }

    .mat-input-element {
      overflow: hidden;
      padding-left: 0.675rem;
      margin-left: 0.1rem;
      color: $licorice;
      font-size: 0.9375rem;
      font-weight: 400;
      text-overflow: ellipsis;

      &::placeholder {
        color: $ash;
      }
    }

    .mat-form-field-outline-start {
      border-width: $border-width;
      border-bottom-left-radius: $border-radius-base;
      border-top-left-radius: $border-radius-base;
    }

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

    .mat-form-field-outline-end {
      border-width: $border-width;
      border-bottom-right-radius: $border-radius-base;
      border-top-right-radius: $border-radius-base;
    }

    .mat-form-field-flex {
      padding: 0 2.075rem 0 0;
    }

    .mat-form-field-infix {
      height: 2.5rem;
      padding: 0.563rem 0;
      border-top-width: 0.25rem;
    }

    .mat-form-field-suffix {
      position: relative;
      top: 0.125rem;
    }
  }

  &.mat-form-field-appearance-outline.mat-form-field-can-float {
    .mat-form-field-label-wrapper {
      top: 0;
      overflow: unset;
      height: 0.8125rem;
      padding-top: 0;

      .mat-form-field-label {
        top: -0.875rem;
        width: auto;
        height: 1rem;
        font-size: 0.75rem;
        font-weight: 500;
        transform: none;
      }
    }

    &.mat-focused:not(.mat-form-field-disabled),
    &:hover:not(.mat-form-field-disabled) {
      .mat-form-field-outline-start {
        border-width: $active-border-width;
      }

      .mat-form-field-outline-end {
        border-width: $active-border-width;
      }
    }

    &:hover {
      .mat-form-field-outline-start {
        border-color: $licorice !important;
      }

      .mat-form-field-outline-end {
        border-color: $licorice !important;
      }
    }

    &.mat-focused:hover {
      .mat-form-field-outline-start {
        border-color: inherit !important;
      }

      .mat-form-field-outline-end {
        border-color: inherit !important;
      }
    }

    &.mat-focused {
      .mat-form-field-label {
        color: $licorice;
      }
    }

    &:not(.mat-focused) {
      .mat-form-field-outline-start {
        border-color: $smoke;
      }

      .mat-form-field-outline-end {
        border-color: $smoke;
      }

      .mat-form-field-label-wrapper {
        .mat-form-field-label {
          color: $licorice;
        }
      }
    }

    &.input.mat-input-element {
      &:hover {
        .mat-form-field-outline-start {
          color: $licorice;
        }

        .mat-form-field-outline-end {
          color: $licorice;
        }
      }
    }
  }

  &.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
    position: absolute;
    top: 3.375rem;
    padding: 0;
    margin: 0;

    .mat-form-field-hint-wrapper,
    .mat-error {
      margin-top: 0.4375rem;
      margin-bottom: 0.5rem;
      font-size: 0.75rem;
      font-weight: 300;

      .mat-form-field:hover,
      .mat-hint::before {
        background: transparent;
      }
    }
  }

  &.mat-form-field-disabled.mat-form-field-appearance-outline.mat-form-field-can-float {
    .mat-form-field-outline {
      background: $smoke;
    }

    .mat-form-field-label-wrapper {
      .mat-form-field-label {
        color: $ash;
      }
    }

    .mat-form-field-outline-start {
      border-color: $ash;
    }

    .mat-form-field-outline-end {
      border-color: $ash;
    }

    .mat-input-element::placeholder {
      color: $ash;
    }

    &:hover {
      .mat-form-field-outline-start {
        border-color: $ash !important;
      }

      .mat-form-field-outline-end {
        border-color: $ash !important;
      }
    }
  }

  &.mat-form-field-invalid.mat-form-field-appearance-outline.mat-form-field-can-float {
    .mat-form-field-label {
      color: $error-default !important;
    }

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

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

    .mat-form-field-flex::after {
      position: absolute;
      right: 0.75rem;
      bottom: 0.5625rem;
      color: $error-default;
    }

    .mat-error {
      color: $error-default;
    }
  }

  &.mat-form-field-appearance-outline.mat-form-field-can-float:not(.mat-focused) .mat-form-field-outline-start,
  &.mat-form-field-appearance-outline.mat-form-field-can-float:not(.mat-focused) .mat-form-field-outline-end {
    border-color: $ash;
  }

  &.mat-form-field-appearance-outline.mat-form-field-can-float:not(.mat-focused):hover .mat-form-field-outline-start,
  &.mat-form-field-appearance-outline.mat-form-field-can-float:not(.mat-focused):hover .mat-form-field-outline-end {
    border-color: $licorice;
  }

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

.mat-form-field.input:not(.date-picker) {
  .mat-form-field-label {
    top: -0.90625rem;
  }
}

.mat-form-field.mat-form-field-appearance-outline {
  .mat-form-field-infix {
    padding: 0.25em 0 0.5em;
  }
}
