@import '../../base.less';

@import './_var.less';

.@{prefix}-textarea {
  display: flex;
  box-sizing: border-box;
  padding: @textarea-padding;
  background-color: @textarea-background-color;

  &--layout-vertical {
    flex-direction: column;
  }

  &__label:not(:empty) {
    font: @textarea-label-font;
    color: @textarea-label-color;
    flex-shrink: 0;
    margin-right: @spacer-2;
    width: @textarea-label-width;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .@{prefix}-textarea--layout-vertical & {
      font: @font-body-medium;
      padding-bottom: @spacer;
    }
  }

  &__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;

    &-inner {
      flex: 1 1 auto;
      box-sizing: border-box;
      width: inherit;
      min-width: 0;
      height: 100%;
      min-height: 20px;
      margin: 0;
      padding: 0;
      text-align: left;
      background-color: transparent;
      border: 0;
      outline: none;
      resize: none;
      font: @textarea-text-font;
      color: @textarea-text-color;
    }
  }

  &__placeholder {
    &::placeholder {
      color: @textarea-placeholder-color;
      font: @textarea-placeholder-font;
    }
  }

  &__indicator:not(:empty) {
    color: @textarea-indicator-text-color;
    font: @textarea-indicator-text-font;
    text-align: @textarea-indicator-text-align;
    padding-top: @textarea-indicator-text-padding-top;
  }

  &--border {
    border-radius: @textarea-border-radius;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: @textarea-border-width solid @textarea-border-color;
      border-radius: inherit;
      pointer-events: none;
    }
  }

  &--disabled {
    color: @textarea-disabled-text-color;
    cursor: not-allowed;
  }

  &--readonly {
    cursor: pointer;
  }
}