/**
 * MUI Textfield Component
 */

$xFormLabelLineHeight: $mui-label-font-size * 1.25;



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

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

  > label {
    @include form-label();
  }

  > textarea {
    padding-top: mui-rem(5px);
  }

  > input,
  > textarea {
    &: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 {
    // these css blocks are copied to deal with Firefox bug
    &:-webkit-autofill ~ label {
      transform: translate(0px, 0px);
      font-size: $mui-label-font-size;
      line-height: $xFormLabelLineHeight;
      text-overflow: ellipsis;
    }
    
    &: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 {
  box-sizing: border-box;
  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%;
  padding: 0;
  box-shadow: none;
  border-radius: 0px;

  // Typography
  font-size: $mui-input-font-size;
  font-family: inherit;
  line-height: inherit; 

  // 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: calc(#{$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: calc(#{$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-touched,
  &: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-touched,
  &: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: calc(#{$mui-input-height} + 1px);
    margin-bottom: -1px;
  }
}

// set label color for invalid inputs
.mui-textfield {
  // has floating label
  &.mui-textfield--float-label {
    > input:invalid:not(:focus),
    > textarea:invalid:not(:focus) {
      &: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;
        }
      }
    }
  }

  // doesn't have floating label
  &:not(.mui-textfield--float-label) {
    > input:invalid:not(:focus),
    > textarea:invalid:not(:focus) {
      &:not(:required),
      &:required.mui--is-empty.mui--is-touched,
      &:required.mui--is-not-empty {
        ~ label {
          color: $mui-danger-color;
        }
      }
    }
  }
}


// set label color for force class (mui--is-invalid)
.mui-textfield {
  // has floating label
  &.mui-textfield--float-label {
    > .mui--is-invalid.mui--is-not-empty:not(:focus) ~ label {
      color: $mui-danger-color;
    }
  }

  // doesn't have floating label
  &:not(.mui-textfield--float-label) {
    > .mui--is-invalid:not(:focus) ~ label {
      color: $mui-danger-color;
    }
  }
}