@import './token.less';
@import './status.less';

.@{ns}-TextareaControl {
  border: 1px solid var(--color-border);
  border-radius: 2px;
  line-height: 1.42857143;
  background: var(--color-bg-1);
  padding: 6px calc(28px - 1.42857143 * 13px - 2px);
  font-size: 13px;
  outline: none;
  resize: none;
  display: block;
  width: 100%;
  &::placeholder {
    color: var(--color-text-3);
    font-weight: normal;
  }

  &.is-error {
    border-color: var(--danger-6);
  }

  &:focus,
  &.is-focused {
    border-color: var(--primary);
    box-shadow: none;
  }

  &.is-disabled,
  &[disabled] {
    background: var(--color-fill-1);
    color: var(--color-text-4);
  }
  > textarea {
    resize: vertical;
  }

  .input-status(warning);
  .input-status(error);
}