/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/input.less';
@import '../mixins/common.less';
@import '../custom.less';
@import '../transition/icon.less';

@textarea-prefix-cls: ~'@{css-prefix}textarea';
@input-prefix-cls: ~'@{css-prefix}input';

.@{textarea-prefix-cls} {
  @apply relative;
  @apply inline-block;
  @apply w-full;
  @apply align-bottom;
  @apply text-sm;


  &.is-disabled &__inner {
    @apply bg-color-bg-6;
    @apply border-color-border-separator;
    @apply text-color-text-secondary;
    @apply cursor-not-allowed;
    .placeholder(@color: theme('colors.color.text.disabled'));
  }

  &.is-exceed {
    .@{textarea-prefix-cls}__inner {
      @apply border-color-error;
    }

    .@{input-prefix-cls}__count {
      @apply border-color-error;
    }
  }

  .@{input-prefix-cls}__count {
    @apply text-color-text-placeholder;
    @apply text-xs;
    @apply absolute;
    @apply bottom-0;
    @apply right-4;
    @apply leading-5;
  }

  &__inner {
    @apply block;
    @apply w-full;
    @apply ~"min-h-[theme(spacing.16)]";
    @apply text-color-text-primary;
    @apply border border-solid border-color-border;
    @apply rounded;
    @apply bg-color-bg-1;
    @apply py-2 px-3;
    @apply leading-normal;
    font-size: inherit;
    @apply resize-y;
    @apply box-border;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    .placeholder(theme('colors.color.text.disabled'));

    &:hover,
    &:focus {
      @apply outline-0;
      @apply border-color-border-hover;
    }

    &:focus {
      @apply border-color-border-focus;
      @apply caret-color-brand;
    }

    &:active {
      @apply border-color-border-focus;
    }

    &.@{textarea-prefix-cls}__fix-height{
      @apply h-7;
      @apply ~"min-h-[theme(spacing.7)]";
      @apply py-0 px-2;
      @apply leading-7;
      @apply overflow-hidden;
    }
  }

  .@{textarea-prefix-cls}__inner{
    &::-webkit-scrollbar {
      @apply w-3;
    }
  
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      @apply bg-clip-content;
      @apply border-x-4;
      @apply border-y-2;
      @apply border-solid;
      @apply border-transparent;
    }
  }

  .@{textarea-prefix-cls}__inner-con{
    @apply relative;
    @apply block;
    @apply h-7;
    @apply w-full;

    .@{textarea-prefix-cls}__inner{
      @apply ~"min-w-[theme(spacing.40)]";
      @apply absolute;
      @apply h-7;
      @apply top-0;
      @apply left-0;

      &:hover{
        @apply ~'z-[2000]';
      }
    }
  }

  ::-webkit-scrollbar {
    @apply w-1;

    &:horizontal {
      @apply h-1;
    }
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-sm;
    @apply w-1;
    @apply bg-color-text-disabled;
  }
  &.is-display-only {
    .@{textarea-prefix-cls}-display-only.@{textarea-prefix-cls}__inner-con .@{textarea-prefix-cls}-display-only__content{
      @apply relative;
      @apply left-0;
      @apply max-w-full;
      @apply leading-normal;
      @apply line-clamp-1;
    }

    .@{textarea-prefix-cls}__inner-con{
      @apply h-auto;

      .@{textarea-prefix-cls}__inner {
        @apply hidden;
      }
    }

    .@{textarea-prefix-cls}-display-only {
      .@{textarea-prefix-cls}-display-only__wrap {
        @apply flex;
      }

      .@{textarea-prefix-cls}-display-only__content {
        @apply left-0;
        @apply max-w-full;
        @apply text-ellipsis;
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        @apply overflow-hidden;
        @apply break-words;
        @apply whitespace-pre-wrap;
        @apply leading-5;

        &::before {
          @apply content-[''];
          @apply float-right;
          @apply h-full;
          @apply ~'-mb-3.5';
        }
 
        .more-btn {
          @apply float-right;
          @apply clear-both;
          @apply text-color-brand;
          @apply text-xs;
          @apply cursor-pointer;
          @apply leading-3;
          @apply relative;
          @apply ~'-top-0.5';
        }
      }
    }
    
    .@{textarea-prefix-cls}__inner {
      @apply h-0;
      @apply p-0;
      @apply border-none;
      @apply invisible;
    }
  }
}