/* Text Inputs + Textarea
   ========================================================================== */

/* Style Placeholders */

::placeholder {
  color: $placeholder-text-color;
}


input[type=submit], button {
  // @include button();
}

/* Text inputs */

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {

  // General Styles
  background-color: $input-background;
  border: none;
  border-bottom: $input-border;
  border-radius: 0;
  outline: none;
  height: $input-height;
  font-size: $input-font-size;
  margin: $input-margin;
  padding: $input-padding;
  box-shadow: none;
  box-sizing: border-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;
        border-color: $input-focus-color;

    // box-shadow: 0 0px 1px 1px $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;
}




/* Textarea */

// Default textarea
textarea {
  width: 100%;
  min-height: $input-height;
  background-color: $input-background;
  border: none;
  border-bottom: $input-border;
  overflow-y: hidden; /* prevents scroll bar flash */
  padding: $input-padding;
  padding-top: .5em;
  padding-bottom: .5em;
  box-sizing: border-box;
  // 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-color: $input-focus-color;
    // box-shadow: 0 0px 0px 2px $input-focus-color;
  }
}


