// Material Design Text Input
// --------------------------------------------------

$text-input-highlight-color:      map-get($colors, primary) !default;
$input-label-md-color:            #999 !default;


.list,
ion-card {

  [text-input] {
    margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
    padding: 0;
  }

  ion-input.item:before,
  ion-input.item:after {
    left: 0;
  }

  ion-input[inset] [text-input] {
    margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
    padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
  }

  ion-label {
    margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
    color: $input-label-md-color;
  }

  ion-input.has-focus:after {
    border-top: 2px solid $text-input-highlight-color !important;
    z-index: 1;
  }

  ion-input.has-focus + ion-input:before {
    border-top-color: $text-input-highlight-color !important;
  }

  [stacked-label] ion-label {
    font-size: 1.2rem;
    margin-bottom: 0;
  }

  [stacked-label].has-focus ion-label,
  [floating-label].has-focus ion-label {
    color: $text-input-highlight-color;
  }

  [stacked-label] [text-input],
  [floating-label] [text-input] {
    margin-bottom: 8px;
    margin-top: 8px;
  }

  [floating-label] ion-label {
    margin-bottom: 0;
    transform-origin: left top;
    transform: translate3d(0, 27px, 0);
    transition: transform 150ms ease-in-out;
  }

  [floating-label].has-focus ion-label,
  [floating-label].has-value ion-label  {
    transform: translate3d(0, 0, 0) scale(0.8);
  }
}

.list[inset] ion-input.item {
  padding-right: 0;
  padding-left: 0;
}