@import '../../style/mixins/index';
@import '../../style/themes/default';

@listPrefixCls: am-list;
@textareaPrefixCls: am-textarea;

.@{listPrefixCls} .@{listPrefixCls}-item {

  &.@{textareaPrefixCls}-item {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    min-height: @list-item-height;
    padding-left: @h-spacing-lg;
    .hairline('bottom');
    .@{listPrefixCls}-content {
      flex: initial;
      align-self: flex-start;
      color: #000;
      font-size: 17px;
      margin-left: 0;
      margin-right: 5px;
      overflow: hidden;
      text-align: left;
      white-space: nowrap;
    }

    &.@{textareaPrefixCls}-item-single-line {
      align-items: center;

      .@{textareaPrefixCls}-label {
        align-self: center;
      }

      .@{textareaPrefixCls}-control {
        padding-bottom: 0;
        padding-top: 0;

        textarea {
          line-height: @line-height-paragraph * @font-size-heading;
        }
      }

      .@{textareaPrefixCls}-clear {
        margin-top: 0;
      }

      &.@{textareaPrefixCls}-error {

        .@{textareaPrefixCls}-error-extra {
          margin-top: 0;
        }
      }
    }

    .@{textareaPrefixCls}-label {
      margin-left: 0;
      margin-right: @h-spacing-sm;
      overflow: hidden;
      padding: 2 * @hd 0;
      text-align: left;
      white-space: nowrap;

      &.@{textareaPrefixCls}-label-2 {
        width: 2 * @input-label-width;
      }

      &.@{textareaPrefixCls}-label-3 {
        width: 3 * @input-label-width;
      }

      &.@{textareaPrefixCls}-label-4 {
        width: 4 * @input-label-width;
      }

      &.@{textareaPrefixCls}-label-5 {
        width: 5 * @input-label-width;
      }

      &.@{textareaPrefixCls}-label-6 {
        width: 6 * @input-label-width;
      }

      &.@{textareaPrefixCls}-label-7 {
        width: 7 * @input-label-width;
      }
    }
  }
}

.@{textareaPrefixCls}-control {
  flex: 1;

  textarea {
    appearance: none;
    background-color: transparent;
    border: 0;
    color: @color-text-base;
    display: block;
    font-size: @font-size-heading;
    line-height: @line-height-paragraph * @font-size-heading;
    overflow: visible;
    padding: 0;
    resize: none;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;

    &::placeholder {
      color: @color-text-placeholder;
    }

    &:disabled {
      background-color: #fff;
      color: @color-text-disabled;
    }
  }
}

.@{textareaPrefixCls}-clear {
  background-color: @input-color-icon;
  background-repeat: no-repeat;
  background-size: @icon-size-sm auto;
  border-radius: @radius-circle;
  color: #fff;
  display: none;
  font-style: normal;
  height: @icon-size-sm;
  margin-top: 12 * @hd;
  overflow: hidden;
  width: @icon-size-sm;
  .encoded-svg-background('textarea_item_delete');

  &-active {
    background-color: @input-color-icon-tap;
  }
}

&.@{textareaPrefixCls}-focus {

  .@{textareaPrefixCls}-clear {
    display: block;
  }
}

.@{textareaPrefixCls}-has-count {
  padding-bottom: 14px;
}

.@{textareaPrefixCls}-count {
  bottom: @v-spacing-sm;
  color: @color-text-placeholder;
  font-size: @font-size-base;
  position: absolute;
  right: @h-spacing-sm;

  span {
    color: @color-text-base;
  }
}

&.@{textareaPrefixCls}-error {

  .@{textareaPrefixCls}-control {

    textarea {
      color: #f50;
    }
  }

  .@{textareaPrefixCls}-error-extra {
    background-size: @icon-size-sm @icon-size-sm;
    height: @icon-size-sm;
    margin-left: @h-spacing-md;
    margin-top: 12 * @hd;
    width: @icon-size-sm;
    .encoded-svg-background('error');
  }
}

&.@{textareaPrefixCls}-disabled {

  .@{textareaPrefixCls}-label {
    color: @color-text-disabled;
  }
}

.@{listPrefixCls} {

  &-body {

    .@{listPrefixCls}-item {

      &:last-child {
        .hairline-remove('bottom');
      }
    }
  }
}