/**
 * MUI Textfield Component
 */

$xFormLabelLineHeight: floor($mui-label-font-size * 1.25);



// ============================================================================
// TEXTFIELD
// ============================================================================

.mui-textfield {
  display: block;
  padding-top: $xFormLabelLineHeight;
  margin-bottom: $mui-form-group-margin-bottom;
  position: relative;

  > label {
    // Positioning
    position: absolute;
    top: 0;

    // Display
    display: block;
    width: 100%;

    // Other
    color: $mui-label-font-color;
    font-size: $mui-label-font-size;
    font-weight: 400;
    line-height: $xFormLabelLineHeight;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  > textarea {
    padding-top: 5px;
  }

  > input,
  > textarea {
    display: block;

    &:focus ~ label {
      color: $mui-input-border-color-focus;
    }
  }
}

.mui-textfield--float-label {
  > label {
    // Layout
    position: absolute;
    transform: translate(0px, $xFormLabelLineHeight);

    // Typography
    font-size: $mui-input-font-size;
    line-height: $mui-input-height;
    color: $mui-input-placeholder-color;

    // Overflow policy
    text-overflow: clip;

    // Cursor
    cursor: text;  // for ie10
    pointer-events: none;
  }

  > input,
  > textarea {
    &:focus ~ label {
      transform: translate(0px, 0px);
      font-size: $mui-label-font-size;
      line-height: $xFormLabelLineHeight;
      text-overflow: ellipsis;
    }

    &:not(:focus) {
      &.mui--is-not-empty,
      &[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
      &:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
        ~ label {
          color: $mui-label-font-color;
          font-size: $mui-label-font-size;
          line-height: $xFormLabelLineHeight;
          transform: translate(0px, 0px);
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.mui-textfield--wrap-label {
  display: table;
  width: 100%;
  padding-top: 0px;

  &:not(.mui-textfield--float-label) > label {
    display: table-header-group;
    position: static;
    white-space: normal;
    overflow-x: visible;
  }
}

.mui-textfield > input,
.mui-textfield > textarea {
  @include mui-node-inserted();

  display: block;
  background-color: $mui-input-bg-color;
  color: $mui-input-font-color;
  border: none;
  border-bottom: 1px solid $mui-input-border-color;
  outline: none;
  width: 100%;
  font-size: $mui-input-font-size;
  padding: 0;
  box-shadow: none;
  border-radius: 0px;

  // Bugfix for firefox-android
  background-image: none;

  &:focus {
    border-color: $mui-input-border-color-focus;
    border-width: 2px;
  }

  &:disabled,
  &:read-only {
    cursor: $mui-cursor-disabled;
    background-color: $mui-input-bg-color-disabled;
    opacity: 1;  // iOS fix for unreadable disabled content
  }

  &::placeholder {
    color: $mui-input-placeholder-color;
    opacity: 1;  // Normalize firefox
  }
}

.mui-textfield > input {
  height: $mui-input-height;

  // Compensate for height change on focus
  &:focus {
    height: $mui-input-height + 1px;
    margin-bottom: -1px;
  }
}

.mui-textfield > textarea {
  min-height: $mui-textarea-height;

  // Compensate for height change on focus
  &[rows]:not([rows="2"]):focus {
    margin-bottom: -1px;
  }
}

.mui-textfield > input:focus {
  // Compensate for height change on focus
  height: $mui-input-height + 1px;
  margin-bottom: -1px;
}




// ============================================================================
// FORM VALIDATION
// ============================================================================

.mui-textfield > input:invalid:not(:focus),
.mui-textfield > textarea:invalid:not(:focus),
.mui-textfield > input:not(:focus).mui--is-invalid,
.mui-textfield > textarea:not(:focus).mui--is-invalid {
  &:not(:required),
  &:required.mui--is-not-empty,
  &:required.mui--is-empty.mui--is-dirty,
  &:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
  &:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
    border-color: $mui-danger-color;
    border-width: 2px;
  }
}

// Treat <input>'s different from <textarea>'s
.mui-textfield > input:invalid:not(:focus),
.mui-textfield > input:not(:focus).mui--is-invalid {
  &:not(:required),
  &:required.mui--is-not-empty,
  &:required.mui--is-empty.mui--is-dirty,
  &:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
  &:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
    height: $mui-input-height + 1px;
    margin-bottom: -1px;
  }
}

.mui-textfield > input:invalid:not(:focus),
.mui-textfield > textarea:invalid:not(:focus),
.mui-textfield > input:not(:focus).mui--is-invalid,
.mui-textfield > textarea:not(:focus).mui--is-invalid {
  // Set label color to danger color
  &:not(:required),
  &:required.mui--is-not-empty,
  &:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
  &:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
    ~ label {
      color: $mui-danger-color;
    }
  }
}

.mui-textfield > input:not(:focus).mui--is-invalid,
.mui-textfield > textarea:not(:focus).mui--is-invalid {

}

.mui-textfield:not(.mui-textfield--float-label) > input:invalid:not(:focus),
.mui-textfield:not(.mui-textfield--float-label) > textarea:invalid:not(:focus),
.mui-textfield:not(.mui-textfield--float-label) > input:not(:focus).mui--is-invalid,
.mui-textfield:not(.mui-textfield--float-label) > textarea:not(:focus).mui--is-invalid {
  // Set label color to danger color for dirty, empty fields
  &:required.mui--is-empty.mui--is-dirty ~ label {
    color: $mui-danger-color;
  }
}