// Dependencies
@import 'pack/seed-control/_index';
@import 'pack/seed-dash/_index';
@import 'pack/seed-family/_index';
@import 'pack/seed-this/_index';
@import '../../configs/constants';
@import '../../mixins/input-styles';

// Component styles
.c-Input {
  $InputField: '.c-InputField';
  $block: this();
  $padding: 16px;

  @import '../../configs/color';
  @import '../../resets/base';
  @include input-styles($padding);

  // Modifiers
  // Multiline: This transforms the <input> into an auto-expanding <textarea>
  &.is-multiline {
    height: auto;
    will-change: height;

    #{$InputField} {
      line-height: normal;
      overflow: hidden;
      height: auto;
      margin-bottom: 1px;
      margin-top: 1px;
      margin-left: -($padding);
      margin-right: -($padding);
      padding: 12px $padding;
      resize: none;
      top: 1px; // to match the line-height of <input>
      width: calc(100% + #{ceil($padding * 2)});

      @each $size, $values in $seed-control-sizes {
        &.is-#{$size} {
          min-height: (_get($values, height) - 2);
        }
      }
    }

    &.has-maxHeight {
      #{$InputField} {
        margin-bottom: 2px;
        margin-left: -($padding - 2px);
        margin-right: -($padding - 2px);
        margin-top: 0;
        overflow-y: auto;
      }

      &.is-error {
        #{$InputField} {
          margin-right: -(($padding * 2) + 2);
        }
      }
    }

    &.is-seamless {
      #{$InputField} {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  // Resizable: Applicable to multiline only. Enables resizing of <textarea>.
  &.is-resizable {
    #{$InputField} {
      resize: vertical;
    }
  }

  &.is-seamless {
    padding-left: 0;
    padding-right: 0;
  }

  &.is-focused {
    z-index: 2;
  }
}