@import "../theme/variable";
@import "../theme/mixins";
@import "typography";

$height-input: 51px;
$padding-field-flex: 0.25rem 1rem 0.25rem 1rem;
$padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;

.mat-mdc-form-field {
  &.qms-form {
    font-family: Open Sans;
    margin-bottom: 16px;
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-underline {
      opacity: 0;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-label {
      font-weight: 600;
      font-size: 1rem;
      line-height: 22px;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    &.mat-form-field-can-float.mat-form-field-should-float {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-label {
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 16px;
      }
    }

    // DATE PICKER

    &.form-datepicker {
      &.mat-focused {
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
        .mat-form-field-flex {
          padding: $padding-field-flex-datepicker;
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        padding: 0.9rem 1rem 1rem 1rem;
        align-items: center;
        height: 52px;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-infix {
        padding: 0.15em 0 0.85em 0;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-suffix {
        margin-top: 1px;
      }

      .mat-date-range-input-container {
        align-items: center;
      }

      .mat-form-field-type-mat-date-range-input {
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
        .mat-form-field-infix {
          padding: 0.15em 0 0.85em 0;
        }
      }

      .mat-date-range-input {
        width: calc(100% + 2px);
      }

      .mat-date-range-input-inner {
        font-weight: 600;
        color: #323232;
        font-size: 16px;
        line-height: 22px;

        &::placeholder {
          color: black(0.6);
          font-weight: 600;
          font-size: 16px;
        }
      }

      .mat-date-range-input-mirror {
        font-weight: 600;
        color: #323232;
        font-size: 16px;
        line-height: 22px;
      }

      .mat-date-range-input-separator {
        font-size: 16px;
        font-weight: 600;
        color: #323232;
      }

      .mat-datepicker-toggle {
        margin-right: 0px;
        margin-left: 0px;
      }
    }

    // BEGIN TEXTAREA STYLE
    &.form-textarea {
      padding: 4px;
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        height: auto;
      }

      textarea.mat-mdc-input-element {
        padding: 0;
      }

      &.mat-focused {
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
        .mat-form-field-label {
          color: theme-apply($primary);
        }

        mat-icon,
        .material-icons {
          color: theme-apply($primary);
        }
      }

      &.mat-form-field-invalid {
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
        .mat-form-field-label {
          color: theme-apply($error);
        }
      }

      &:not(.mat-form-field-disabled):focus {
        border-bottom: 2px solid theme-apply($primary);
        padding: 2px;
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
        .mat-form-field-label {
          color: theme-apply($primary);
        }

        mat-icon,
        .material-icons {
          color: theme-apply($primary);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
        .mat-form-field-flex {
          border: none;
          padding: $padding-field-flex;
        }
      }
    }

    // END TEXTAREA STYLE

    &:not(.mat-form-field-disabled):focus {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-label {
        color: theme-apply($primary);
      }

      mat-icon,
      .material-icons {
        color: theme-apply($primary);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        background-color: black(0.08);
        border-bottom: 2px solid theme-apply($primary);
        padding: $padding-field-flex;
      }
    }

    &:not(.mat-form-field-disabled):hover {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        background-color: black(0.08);
      }
    }

    &.mat-focused {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-label {
        color: theme-apply($primary);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        background-color: black(0.08);

        border-bottom: 2px solid theme-apply($primary);
        padding: $padding-field-flex;
      }
    }

    &.mat-form-field-invalid {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-label {
        color: theme-apply($error);
      }

      mat-icon,
      .material-icons {
        color: black(0.54);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-ripple {
        height: 2px;
        background-color: theme-apply($error);
        transform: scaleX(1);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        border-bottom: 2px solid theme-apply($error);
      }
    }

    &.mat-form-field-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-flex {
        background-color: theme-apply($disabled);

        &:hover {
          background-color: theme-apply($disabled);
        }
      }

      mat-icon,
      .mat-mdc-input-element {
        color: black(0.38);
      }

      button {
        pointer-events: none;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
      .mat-select-min-line {
        color: black(0.38);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-flex {
      border-radius: 4px;
      padding: $padding-field-flex;
      height: $height-input;
      border-bottom: 1px solid black(0.38);

      &:hover {
        background-color: black(0.08);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-ripple {
      height: 1px;
      background-color: black(0.04);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-prefix {
      margin-right: 0.75rem;
      color: black(0.6);

      mat-icon > svg {
        margin-bottom: 0.5em;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-suffix {
      .qms-btn-text {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: inherit;
        padding: 0;
        flex-shrink: 0;
        line-height: 40px;
        border-radius: 50%;
        color: black(0.6);
      }
    }

    .mat-mdc-input-element {
      font-weight: 600;
      color: theme-apply($default-color);
      font-size: 16px;
      line-height: 22px;
      font-family: "Open sans";

      &::placeholder {
        color: black(0.6);
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-label-wrapper {
      top: -0.5375em;
    }

    .mat-mdc-form-field-error {
      color: theme-apply($error);
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      font-style: normal;
      line-height: 16px;
    }

    .mat-mdc-form-field-bottom-align::before {
      content: none;
    }

    .mat-mdc-form-field-hint {
      font-size: 0.75rem;
      line-height: 16px;
      font-style: normal;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-subscript-wrapper {
      margin-top: 2px;
    }

    .clear {
      cursor: pointer;
      margin-left: 10px;
      display: block;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
    .mat-select-min-line,
    mat-select-trigger {
      font-weight: 600;
      color: theme-apply($default-color);
      font-size: 16px;
      line-height: 22px;
      font-family: "Open Sans", sans-serif;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
    .mat-select-arrow {
      margin-top: 15px;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
    .mat-mdc-select.mat-select-invalid .mat-select-arrow {
      color: theme-apply($error);
    }
  }

  &.qms-form.qms-search-field,
  &.qms-form.qms-file-upload,
  &.qms-form:not(.mat-form-field-disabled):focus.qms-file-upload,
  &.qms-form:not(.mat-form-field-disabled):focus.qms-search-field {
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-flex {
      padding: 0.25rem 0rem 0.25rem 1rem;
      background-color: black(0.04);
    }
    button.qms-input-clear {
      color: black(0.6);
    }

    mat-icon,
    .material-icons {
      color: black(0.6);
    }
  }

  &.qms-form.mat-form-field-disabled.qms-file-upload {
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-flex:active {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-prefix mat-icon > svg {
        fill: black(0.38);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-flex:hover {
      background-color: black(0.04);
    }
  }

  &.qms-search-field,
  &.qms-file-upload {
    font-weight: 600;
    font-family: "Open Sans";
    font-size: 1em;
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-wrapper {
      border-radius: 0.25em;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-flex {
      align-items: center;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-underline {
      margin-left: 0.125em;
      margin-right: 0.125em;
      width: calc(100% - 0.25em);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-infix {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: inherit;
      bottom: 0.5em;
      padding: 0.5em 0.5em 0 0;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-suffix {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: inherit;
      position: relative;
      min-width: 0;
      height: 2.5em;

      button {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 1rem;
      }

      .qms-input-clear::before {
        content: "";
        background: black(0.12);
        height: 34px;
        display: inline-block;
        width: 1px;
      }

      .qms-input-clear {
        padding: 0.25rem 0rem 0.25rem 0;
        display: flex;
        align-items: center;
        button {
          margin-left: 1rem;
        }
      }

      mat-progress-spinner {
        margin-right: 1.0625em;
        margin-bottom: 0.25em;
      }
    }

    .mat-mdc-form-field-error {
      font-weight: 400;
    }
  }
}
