@reference "#styles/assets/tailwind.css";

.js-text-expand {
  .js-text-expand__text {
    @apply max-h-40 transition-all duration-300 ease-in-out overflow-hidden relative border-b-2 border-b-button-border-default;

    .overlay {
      @apply visible opacity-100 transition-default;
    }

    &.open {
      .overlay {
        @apply invisible opacity-0;
      }
    }
  }

  .js-text-expand__button {
    .close {
      @apply hidden;
    }
    .open {
      @apply block;
    }

    &.open {
      .open {
        @apply hidden;
      }
      .close {
        @apply block;
      }
    }
  }
}