/* Text Inputs + Textarea

========================================================================== */

/* Style Placeholders */

::placeholder {

color: $placeholder-text-color;

}

/* Text inputs */

input:not(), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), textarea.materialize-textarea {

// General Styles
background-color: transparent;
border: none;
border-bottom: $input-border;
border-radius: 0;
outline: none;
height: $input-height;
width: 100%;
font-size: $input-font-size;
margin: $input-margin;
padding: $input-padding;
box-shadow: none;
box-sizing: content-box;
transition: $input-transition;

// Disabled input style
&:disabled,
&[readonly="readonly"] {
  color: $input-disabled-color;
  border-bottom: $input-disabled-border;
}

// Disabled label style
&:disabled+label,
&[readonly="readonly"]+label {
  color: $input-disabled-color;
}

// Focused input style
&:focus:not([readonly]) {
  border-bottom: 1px solid $input-focus-color;
  box-shadow: 0 1px 0 0 $input-focus-color;
}

// Focused label style
&:focus:not([readonly])+label {
  color: $input-focus-color;
}

// Valid Input Style
&.valid,
&:focus.valid {
  @extend %valid-input-style;
}

// Custom Success Message
&.valid + label:after,
&:focus.valid + label:after {
  @extend %custom-success-message;
}

// Invalid Input Style
&.invalid,
&:focus.invalid {
  @extend %invalid-input-style;
}

// Custom Error message
&.invalid + label:after,
&:focus.invalid + label:after {
  @extend %custom-error-message;
}

// Full width label when using validate for error messages
&.validate + label {
  width: 100%;
}

// Form Message Shared Styles
& + label:after {
  @extend %input-after-style;
}

// TODO: Remove once input fields are reworked to support validation messages better
&.invalid + label:after,
&.valid + label:after{
  display: none;
}

&.invalid + label.active:after,
&.valid + label.active:after{
  display: block;
}

}

/* Validation Sass Placeholders */ %valid-input-style {

border-bottom: 1px solid $input-success-color;
box-shadow: 0 1px 0 0 $input-success-color;

} %invalid-input-style {

border-bottom: $input-invalid-border;
box-shadow: 0 1px 0 0 $input-error-color;

} %custom-success-message {

content: attr(data-success);
color: $input-success-color;
opacity: 1;
transform: translateY(9px);

} %custom-error-message {

content: attr(data-error);
color: $input-error-color;
opacity: 1;
transform: translateY(9px);

} %input-after-style {

display: block;
content: "";
position: absolute;
top: 100%;
left: 0;
opacity: 0;
transition: .2s opacity ease-out, .2s color ease-out;

}

// Styling for input field wrapper .input-field {

// Inline styles
&.inline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;

  input,
  .select-dropdown {
    margin-bottom: 1rem;
  }
}

// Gutter spacing
&.col {
  label {
    left: $gutter-width / 2;
  }

  .prefix ~ label,
  .prefix ~ .validate ~ label {
    width: calc(100% - 3rem - #{$gutter-width});
  }
}

position: relative;
margin-top: 1rem;

label {
  color: $input-border-color;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  font-size: 1rem;
  cursor: text;
  transition: transform .2s ease-out;
  transform-origin: 0% 100%;
  text-align: initial;
  transform: translateY(12px);
  pointer-events: none;

  &:not(.label-icon).active {
    transform: translateY(-14px) scale(.8);
    transform-origin: 0 0;
  }
}

// Prefix Icons
.prefix {
  position: absolute;
  width: $input-height;
  font-size: 2rem;
  transition: color .2s;

  &.active { color: $input-focus-color; }
}

.prefix ~ input,
.prefix ~ textarea,
.prefix ~ label,
.prefix ~ .validate ~ label,
.prefix ~ .autocomplete-content {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.prefix ~ label { margin-left: 3rem; }

@media #{$medium-and-down} {
  .prefix ~ input {
    width: 86%;
    width: calc(100% - 3rem);
  }
}

@media #{$small-and-down} {
  .prefix ~ input {
    width: 80%;
    width: calc(100% - 3rem);
  }
}

}

/* Search Field */

.input-field input {

display: block;
line-height: inherit;

.nav-wrapper & {
  height: inherit;
  padding-left: 4rem;
  width: calc(100% - 4rem);
  border: 0;
  box-shadow: none;
}

&:focus {
  background-color: $input-background;
  border: 0;
  box-shadow: none;
  color: #444;

  & + label i,
  & ~ .mdi-navigation-close,
  & ~ .material-icons {
    color: #444;
  }
}

& + label {
  left: 1rem;
}

& ~ .mdi-navigation-close,
& ~ .material-icons {
  position: absolute;
  top: 0;
  right: 1rem;
  color: transparent;
  cursor: pointer;
  font-size: 2rem;
  transition: .3s color;
}

}

/* Textarea */

// Default textarea textarea {

width: 100%;
height: $input-height;
background-color: transparent;

&.materialize-textarea {
  // Fixes validation messages for dynamic textareas
  &.validate + label {
    &::after {
      top: calc(100% - 12px);
    }
    &:not(.label-icon).active {
      transform: translateY(-25px);
    }
    height: 100%;
  }

  overflow-y: hidden; /* prevents scroll bar flash */
  padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
  resize: none;
  min-height: $input-height;
}

}

// For textarea autoresize .hiddendiv {

display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
padding-top: 1.2rem; /* prevents text jump on Enter keypress */

// Reduces repaints
position: absolute;
top: 0;

}

/* Autocomplete */ .autocomplete-content {

margin-top: -1 * $input-margin-bottom;
margin-bottom: $input-margin-bottom;
display: block;
opacity: 1;
position: static;

li {
  .highlight { color: #444; }

  img {
    height: $dropdown-item-height - 10;
    width: $dropdown-item-height - 10;
    margin: 5px 15px;
  }
}

}