@use "../../libs/css/theme" as *;
@use "../../libs/css/mixin" as *;

@include b(read-more) {
  @include e(content) {
    overflow: hidden;
    font-size: 15px;
    text-align: left;
    transition: height 0.3s ease;
  }

  @include e(toggle) {
    @include flex;
    justify-content: center;
    position: relative;

    @include m(mask) {
      background-image:
              linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, $hy-background--container 80%);
      padding-top: 100px;
      margin-top: -100px;
    }

    @include m(content) {
      @include flex;
      align-items: center;
      justify-content: center;
      margin: $hy-border-margin-padding-sm 0;
      line-height: 30px;

      @include e(text) {
        color: $hy-primary;
        margin-right: $hy-border-margin-padding-sm;
      }

      :deep(.hy-icon) {
        color: $hy-primary;
      }
    }
  }
}