@import '../_variables.scss';
@import '../_mixins.scss';

@include exports('forms.textareas') {
  .fui-form-control {
    .fui-control-container {
      .fui-textarea-wrapper {
        background-color: $white;

        .fui-control-label,
        .fui-control-icons {
          top: $controls-padding;
          margin-top: 0;
        }

        border: 1px solid $gray-300;
        @include border-radius(3px);
        padding: $controls-padding 0 0 0;
        transition: background-color 0.15s ease, color 0.15s ease;
        min-height: $textarea-height;

        textarea {
          display: inline-block;
          vertical-align: top;
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 100%;
          border: none;
          font-family: inherit;
          padding: 0 3rem 0 $controls-padding;
          line-height: normal;
          height: $textarea-default-height;
          min-height: $textarea-default-height;
          font-size: $font-size-base;
          font-weight: $font-weight-bold;
          background: none;
          color: $gray-900;
          resize: vertical;
          @include controls-transitions();
          @include no-placeholder();

          &[disabled] {
            background-color: $gray-200;
            color: $gray-500;
          }
        }
      }

      &:not(.fui-empty):not(.fui-no-label) {
        .fui-textarea-wrapper {
          padding: $controls-padding 0 0 0;
          textarea {
            margin-top: $textarea-margin;
            height: calc(#{$textarea-default-height} - #{$textarea-margin});
            min-height: calc(#{$textarea-default-height} - #{$textarea-margin});
          }
        }
      }

      &.fui-disabled {
        .fui-textarea-wrapper {
          background-color: $gray-200;
          color: $gray-500;
        }
      }

      &.fui-control-focus {
        .fui-textarea-wrapper {
          border-color: $gray-500;
        }
      }
    }
  }
}