@import "typography";
@import "colors";

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

.mat-form-field {
  &.qms-form {
    font-family: Open Sans;

    .mat-form-field-underline {
      opacity: 0;
    }

    .mat-form-field-label {
      font-weight: 600;
      font-size: 1rem;
      line-height: 22px;
    }

    &.mat-form-field-can-float.mat-form-field-should-float {
      .mat-form-field-label {
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 16px;
      }
    }

    // DATE PICKER

    &.form-datepicker {
      &.mat-focused {
        .mat-form-field-flex {
          padding: $padding-field-flex-datepicker;
        }
      }

      .mat-form-field-flex {
        padding: 0.9rem 1rem 1rem 1rem;
        align-items: center;
        height: 52px;
      }

      .mat-form-field-infix {
        padding: 0.15em 0 0.85em 0;
      }

      .mat-form-field-suffix {
        margin-top: 1px;
      }

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

      .mat-form-field-type-mat-date-range-input {
        .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: -4px;
        margin-left: 7px;
      }
    }

    // BEGIN TEXTAREA STYLE
    &.form-textarea {
      padding: 4px;

      .mat-form-field-flex {
        height: auto;
      }

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

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

        mat-icon,
        .material-icons {
          color: $primary;
        }
      }

      &.mat-form-field-invalid {
        .mat-form-field-label {
          color: $error;
        }
      }

      &:not(.mat-form-field-disabled):focus {
        border-bottom: 2px solid $primary;
        padding: 2px;

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

        mat-icon,
        .material-icons {
          color: $primary;
        }

        .mat-form-field-flex {
          border: none;
          padding: $padding-field-flex;
        }
      }
    }

    // END TEXTAREA STYLE

    &:not(.mat-form-field-disabled):focus {
      .mat-form-field-label {
        color: $primary;
      }

      mat-icon,
      .material-icons {
        color: $primary;
      }

      .mat-form-field-flex {
        background-color: black(0.08);
        border-bottom: 2px solid $primary;
        padding: $padding-field-flex;
      }
    }

    &:not(.mat-form-field-disabled):hover {
      .mat-form-field-flex {
        background-color: black(0.08);
      }
    }

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


      .mat-form-field-flex {
        background-color: black(0.08);

        border-bottom: 2px solid $primary;
        padding: $padding-field-flex;
      }
    }

    &.mat-form-field-invalid {
      .mat-form-field-label {
        color: $error;
      }

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

      .mat-form-field-ripple {
        height: 2px;
        background-color: $error;
        transform: scaleX(1);
      }

      .mat-form-field-flex {
        border-bottom: 2px solid $error;
      }
    }

    &.mat-form-field-disabled {
      .mat-form-field-flex {
        background-color: $disabled;

        &:hover {
          background-color: $disabled;
        }
      }

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

      button {
        pointer-events: none;
      }

      .mat-select-min-line {
        color: black(0.38);
      }
    }

    .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);
      }
    }

    .mat-form-field-ripple {
      height: 1px;
      background-color: black(0.04);
    }

    .mat-form-field-prefix {
      margin-right: 0.75rem;
      color: black(0.6);

      mat-icon > svg {
        margin-bottom: 0.5em;
      }
    }

    .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-input-element {
      font-weight: 600;
      color: $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;
      }
    }

    .mat-form-field-label-wrapper {
      top: -0.5375em;
    }

    .mat-error {
      color: $error;
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      font-style: normal;
      line-height: 16px;
    }

    .mat-hint {
      font-size: 0.75rem;
      line-height: 16px;
      font-style: normal;
    }

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

    .clear {
      cursor: pointer;
      margin-left: 10px;
      display: block;
    }


    .mat-select-min-line, mat-select-trigger {
      font-weight: 600;
      color:$default-color;
      font-size: 16px;
      line-height: 22px;
      font-family: 'Open Sans', sans-serif;
    }

    .mat-select-arrow {
      margin-top: 15px;
    }

    .mat-select.mat-select-invalid .mat-select-arrow {
      color: $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{
    .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{
    .mat-form-field-flex:active {
       .mat-form-field-prefix mat-icon > svg{
          fill:black(0.38);
       }
    }
    .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;
    
    .mat-form-field-wrapper {
      border-radius: 0.25em;
    }

    .mat-form-field-flex{
      align-items: center;
    }

    .mat-form-field-underline {
      margin-left: 0.125em;
      margin-right: 0.125em;
      width: calc(100% - 0.25em);
    }

    .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;
    }
    .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-error{
      font-weight: 400;
    }
  }
}
