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

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

.@{listPrefixCls} {
  & &-item {
    &.@{textareaPrefixCls}-item {
      display: flex;
      align-items: flex-start;
      box-sizing: border-box;
      min-height: @list-item-height;
      padding-left: @h-spacing-lg;
      padding-right: @h-spacing-lg;
      .hairline-bottom(@border-color-base, @h-spacing-lg);
      &.@{textareaPrefixCls}-item-single-line {
        align-items: center;
        .@{textareaPrefixCls}-label {
          align-self: center;
        }
        .@{textareaPrefixCls}-control {
          padding-top: 0;
          padding-bottom: 0;
          textarea {
            line-height: 1.5 * @font-size-heading;
          }
        }
        .@{textareaPrefixCls}-clear {
          margin-top: 0;
        }
        &.@{textareaPrefixCls}-error {
          .@{textareaPrefixCls}-error-extra {
            margin-top: 0;
          }
        }
      }
    }
  }
}

.@{textareaPrefixCls}-label {
  align-self: flex-start;
  color: @color-text-base;
  text-align: left;
  min-height: @list-item-height;
  font-size: @font-size-heading;
  line-height: @list-item-height;
  margin-left: 0;
  margin-right: @h-spacing-lg;
  .ellipsis();
  &.@{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 {
  .box-flex(1);
  padding-top: 22px;
  padding-bottom: 22px;
  textarea {
    color: @color-text-base;
    font-size: @font-size-heading;
    line-height: 1.3 * @font-size-heading;
    appearance: none;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: transparent;
    overflow: visible;
    display: block;
    resize: none;
    word-break: break-all;
    word-wrap: break-word;
    &::-webkit-input-placeholder {
      color: @color-text-placeholder;
      font-size: @font-size-heading;
    }
    &:disabled {
      color: @color-text-disabled;
    }
  }
}
.@{textareaPrefixCls}-clear {
  visibility: hidden;
  display: block;
  width: @icon-size-sm;
  height: @icon-size-sm;
  margin-top: 24px;
  border-radius: 50%;
  overflow: hidden;
  font-style: normal;
  color: #fff;
  background-color: @input-color-icon;
  background-repeat: no-repeat;
  .encoded-svg-background("<svg fill='#fff' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-size: @icon-size-sm auto;
  &:active {
    background-color: @input-color-icon-tap;
  }
}
&.@{textareaPrefixCls}-focus {
  .@{textareaPrefixCls}-clear {
    visibility: visible;
  }
}
.@{textareaPrefixCls}-count {
  position: absolute;
  bottom: @v-spacing-sm;
  right: @h-spacing-sm;
  color: @color-text-placeholder;
  font-size: @font-size-base;
  span {
    color: @color-text-base;
  }
}
&.@{textareaPrefixCls}-error {
  .@{textareaPrefixCls}-control {
    textarea {
      color: #f50;
    }
  }
  .@{textareaPrefixCls}-error-extra {
    margin-top: 24px;
    width: @icon-size-sm;
    height: @icon-size-sm;
    margin-left: @h-spacing-md;
    .encoded-svg-background("<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-300.000000, -1207.000000)' fill='#FF5500'><g id='exclamation-circle-o' transform='translate(300.000000, 1207.000000)'><path d='M9,16.734375 C10.0441406,16.734375 11.0566406,16.5304688 12.009375,16.1279297 C12.9304688,15.7376953 13.7566406,15.1804687 14.4685547,14.4703125 C15.1787109,13.7601563 15.7376953,12.9322266 16.1261719,12.0111328 C16.5304688,11.0566406 16.734375,10.0441406 16.734375,9 C16.734375,7.95585938 16.5304688,6.94335938 16.1279297,5.990625 C15.7376953,5.06953125 15.1804687,4.24335938 14.4703125,3.53144531 C13.7601563,2.82128906 12.9322266,2.26230469 12.0111328,1.87382813 C11.0566406,1.46953125 10.0441406,1.265625 9,1.265625 C7.95585938,1.265625 6.94335938,1.46953125 5.990625,1.87207031 C5.06953125,2.26230469 4.24335938,2.81953125 3.53144531,3.5296875 C2.82128906,4.23984375 2.26230469,5.06777344 1.87382813,5.98886719 C1.46953125,6.94335938 1.265625,7.95585938 1.265625,9 C1.265625,10.0441406 1.46953125,11.0566406 1.87207031,12.009375 C2.26230469,12.9304688 2.81953125,13.7566406 3.5296875,14.4685547 C4.23984375,15.1787109 5.06777344,15.7376953 5.98886719,16.1261719 C6.94335938,16.5304688 7.95585938,16.734375 9,16.734375 L9,16.734375 Z M9,18 C4.02890625,18 0,13.9710937 0,9 C0,4.02890625 4.02890625,0 9,0 C13.9710937,0 18,4.02890625 18,9 C18,13.9710937 13.9710937,18 9,18 L9,18 L9,18 Z M9,6.75 C8.61152344,6.75 8.296875,7.06464844 8.296875,7.453125 L8.296875,13.9394531 C8.296875,14.3279297 8.61152344,14.6425781 9,14.6425781 C9.38847656,14.6425781 9.703125,14.3279297 9.703125,13.9394531 L9.703125,7.453125 C9.703125,7.06464844 9.38847656,6.75 9,6.75 L9,6.75 Z M8.20898438,4.83398438 C8.20898438,5.27085024 8.56313413,5.625 9,5.625 C9.43686587,5.625 9.79101562,5.27085024 9.79101562,4.83398438 C9.79101562,4.39711851 9.43686587,4.04296875 9,4.04296875 C8.56313413,4.04296875 8.20898438,4.39711851 8.20898438,4.83398438 L8.20898438,4.83398438 Z' id='Shape' transform='translate(9.000000, 9.000000) scale(1, -1) translate(-9.000000, -9.000000) '></path></g></g></g></svg>");
    background-size: @icon-size-sm @icon-size-sm;
  }
}
&.@{textareaPrefixCls}-disabled {
  .@{textareaPrefixCls}-label {
    color: @color-text-disabled;
  }
}