@import "../mixins/form-input";

.c-text-input {
  $self: #{&};
  $field: #{$self}__field;
  $leading: #{$self}__leading;
  $trailing: #{$self}__trailing;
  $icon: #{$self}__icon;

  @at-root {

    #{$self} {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }

    #{$field} {
      flex: 1 1 auto;
      display: block;
      width: 100%;
      max-width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background: none;
      border: none;
      outline: none;
      color: $form-input-font-color;
      resize: none;

      @include form-input-placeholder;
    }

    #{$leading},
    #{$trailing} {
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }

    #{$leading} {
      margin: auto $text-input-icon-gutter auto 0;
    }

    #{$trailing} {
      margin: auto 0 auto $text-input-icon-gutter;
    }

    #{$icon} {
      font-size: $text-input-icon-size;
      line-height: 1;
      opacity: $text-input-icon-opacity;
      transition: opacity $g-transition;
    }

  }

  &.is-multiline {
    display: block;
    height: auto;
  }

}