.text-expansion {
  display: flex;
  &__text {
    position: relative;
    width: 100%;
    font-size: 28rpx;
    color: var(--color);
    overflow: hidden;
    line-height: 1.5;
    max-height: 9em;
    text-align: justify;
    &::before {
      content: '';
      float: right;
      height: 100%;
      margin-bottom: -40rpx;
    }
    &::after {
      content: '';
      width: 100vw;
      height: 100vh;
      position: absolute;
      box-shadow: inset calc(120rpx - 100vw) calc(1.45em - 100vh) 0 0 #fff;
      margin-left: -120rpx;
    }
  }
  &__button {
    position: relative;
    font-size: 24rpx;
    font-weight: bold;
    float: right;
    clear: both;
    line-height: 42rpx;
    &::before {
      content: '...';
      margin-right: 8rpx;
    }
    &::after {
      content: '';
      display: inline-block;
      margin-bottom: 2rpx;
      margin-left: 4rpx;
      transition: transform 0.3s;
      border-top: 10rpx solid var(--color);
      border-left: 8rpx solid transparent;
      border-right: 8rpx solid transparent;
    }
  }
}

.text-expansion__text--expand {
  max-height: none;
  &::after {
    visibility: hidden;
  }
  .text-expansion__button::before {
    visibility: hidden;
  }
  .text-expansion__button::after {
    transform: rotate(180deg);
  }
}