_textField.scss

form {
}

label {
  display: block;
  font-size: $tff-font-size;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  display: block;
  border-width: 0 0 1px 0;
  line-height: $tff-line-height;
  font-size: $tff-font-size;

  &:focus {
    outline: 0;
  }
}

input, textarea {
  @include input-placeholder($tff-placeholder-color);
  background: none;
}

// Light-Theme
material-input-group,
.material-input-group {
  margin: $tff-margin;

  position: relative;
  display:  block;

  label {
    z-index: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;

    &:hover {
      cursor: text;
    }
  }

  @include text-hint( $tff-hint-normal, large, $tff-transition );
  @include text-field( $tff-input-normal, $tff-line-normal, $tff-transition );


  &.material-input-focused {
    @include text-hint( $tff-hint-focused, small );
    @include text-field( $tff-input-normal,$tff-line-focused, false, $tff-line-focused-width );
  }

  &.material-input-has-value {
    @include text-hint( $tff-hint-focused, small );

    &:not(.material-input-focused) {
      @include text-hint( $tff-hint-normal, small );
    }
  }

  &[disabled] {

    @include text-field( $tff-input-disabled, $tff-line-disabled, false, $tff-line-disabled-width );
    input, textarea {
      @include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed, bottom );
      pointer-events: none;
      tabindex : -1;
    }

    @include text-hint( $tff-hint-disabled, small );

    *:not(.material-input-has-value) {
      @include text-hint( $tff-hint-disabled, large );
    }

  }

}


// Dark Theme
.dark material-input-group,
.dark .material-input-group {

  @include text-hint( $tff-hint-normal-dark, large, $tff-transition );
  @include text-field( $tff-input-normal-dark, $tff-line-normal-dark, $tff-transition );


  &.material-input-focused {
    @include text-hint( $tff-hint-focused-dark, small );
    @include text-field( $tff-input-focused-dark,$tff-line-focused-dark, false, $tff-line-focused-width );
  }

  &.material-input-has-value {
    @include text-hint( $tff-hint-focused-dark, small );

    &:not(.material-input-focused) {
      @include text-hint( $tff-hint-normal-dark, small );
    }
  }

  &[disabled] {

    @include text-field( $tff-input-disabled-dark, $tff-line-disabled-dark, false, $tff-line-disabled-width );
    input, textarea {
      @include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed-dark, bottom );
      pointer-events: none;
      tabindex : -1;
    }

    @include text-hint( $tff-hint-disabled-dark, small );

    *:not(.material-input-has-value) {
      @include text-hint( $tff-hint-disabled-dark, large );
    }

  }

}


.theme-dark-tff { @include theme-bg-and-color(#333, #999); }