@ellipsisScope: ~'@{prefixCls}Ellipsis';

.@{ellipsisScope} {
  display: inline-flex;
  cursor: pointer;
  overflow: hidden;
  &-text {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    word-break: break-all;
    overflow-wrap: break-word;
    // display: -webkit-box;
    // -webkit-line-clamp: 1;
    // -webkit-box-orient: vertical;
    // position: relative;
    position: relative;
    line-height: 1.5;
    max-height: var(--baseHeight);
    // max-height: 4.5em;
  }
  &-text::before {
    content: '';
    height: calc(100% - 22px);
    float: right;
  }
  &-text.isCheck::before {
    height: calc(100% - 21px);
  }
  &-text::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    // box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
    pointer-events: none;
  }
  &-suffix-container{
    position: relative;
    float: right;
    clear: both;
    // margin-left: 10px;
    font-size: 12px;
    // padding: 0 4px;
    // background: #3F51B5;
    line-height: var(--baseHeight);
    height: 22px;
    border-radius: 4px;
    // color:  @primary-color;
    color: @text-color;
    cursor: pointer;
    user-select: none;
    /* margin-top: -30px; */
  }
  
  &-btn {
    color: @primary-color;
  }
  &-suffix{
    &:hover {
      color: @primary-color;
    }
  }
  &-btn::after{
    content:'展开'
  }
  &-exp{
    display: none;
  }
  &-exp:checked + &-text::after{
    visibility: hidden;
  }
  &-exp:checked + &-text &-btn::after{
    content:'收起'
  }
  .showEllipsisTxt{
    margin-left: 12px;
    &::before{
      content: '...';
      position: absolute;
      left: -2px;
      color: inherit;
      transform: translateX(-100%);
      white-space: nowrap;
      // background: #fff;
    }
  }
  &-hoverSuffix {
    .@{ellipsisScope}-suffix {
      visibility: hidden;
    }
    &:hover {
      .@{ellipsisScope}-suffix {
        visibility: visible;
      }
    }
  }
  &-actives {
    padding-top: 16px;
    .scbutton + .scbutton {
      margin-left: 8px;
    }
  }
  &-popover {
    // pointer-events: none;
    z-index: 400;
    .ant-popover-inner-content {
      padding: 8px;
      width: 240px;
    }
    &.ant-popover-placement-bottom, 
    &.ant-popover-placement-bottomLeft, 
    &.ant-popover-placement-bottomRight {
      padding-top: 0;
    }
    .ant-popover-arrow {
      display: none;
    }
    .ant-form-item {
      margin-bottom: 0;
      .scInput {
        width: 100%;
      }
    }
    .input-describe {
      margin-top: 4px;
    }
  }
  &-edit--describe {
    padding-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: @text-color-secondary;
  }
  &-href--link {
    color: @primary-color;
    .scEllipsis-text {
      .scEllipsis-text-default:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }
    .showEllipsisTxt {
      &::before {
        color: @primary-color;
      }
    }
  }
  &-text-default {
    display: block;
    overflow: hidden;
    line-height: 22px;
    line-break: anywhere;
  }
}
.scEllipsis-isOnlyTips {
  .ant-form-item-has-error + .input-describe {
    display: none;
  }
}