.ca-read-more {
  $block: &;

  &__text {
    overflow: hidden;
    position: relative;
    color: var(--body-text-color, $c-text-primary);

    &::after {
      content: '';
      display: block;
      height: 50%;
      width: 100%;
      background-image: linear-gradient(hex-to-rgba($c-white, 0), $c-white);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 1;
      transition: opacity 200ms ease;
    }
  }

  &__button {
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    margin-top: $px8;
  }

  &--visible & {
    &__text::after {
      opacity: 0;
    }
  }

  &--ready {
    #{$block}__text {
      transition: height 200ms ease;
    }
  }
}