@mixin k-TextAreaWrapper {
  // Same as variable from _text_input.scss
  $vertical-padding: k-px-to-rem(10px);
  $border-width: k-px-to-rem(2px);

  .k-TextAreaWrapper {
    position: relative;

    display: flex;
  }

  .k-TextAreaWrapper__input {
    &.k-TextInput { height: initial; }

    resize: vertical;

    &.is-disabled {
      resize: none;
    }
  }

  .k-TextAreaWrapper__gradient {
    position: absolute;
    left: $vertical-padding;
    right: $vertical-padding;
    bottom: $border-width;

    height: $vertical-padding;

    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      #fff
    );

    pointer-events: none;

    .k-TextAreaWrapper__input.is-disabled + & {
      display: none;
    }
  }
}