retrospring/app/assets/stylesheets/components/_collapse.scss

@use "sass:map";

.collapsed {
  overflow: hidden;
  text-overflow: ellipsis;

  &.answerbox__answer-text {
    max-height: 18rem;

    @include media-breakpoint-up('sm') {
      max-height: 10.5rem;
    }
  }

  &.answerbox__question-text {
    max-height: 15rem;

    @include media-breakpoint-up('sm') {
      max-height: 7.5rem;
    }
  }
}

.collapser {
  $this: &;

  display: flex;
  position: sticky;
  justify-content: center;
  width: 100%;
  padding: map.get($spacers, 2);
  bottom: calc($nav-link-height + 10px);
  z-index: 0;

  @include media-breakpoint-up('sm') {
    bottom: 10px;
  }

  & .collapsed-text {
    display: none;
  }

  & .shown-text {
    display: inline-block;
  }

  .collapsed ~ & {
    position: absolute;
    bottom: 0;
    left: 0;

    &:before {
      content: "";
    }

    & .collapsed-text {
      display: inline-block;
    }

    & .shown-text {
      display: none;
    }
  }

  &:before {
    position: absolute;
    background: linear-gradient(0deg, rgba(var(--gradient-base),1) 0%, rgba(var(--gradient-base),0) 100%);
    width: 100%;
    height: 100%;
  }

  .btn {
    @extend .btn-primary;
    z-index: 1;
  }
}

.inbox-entry--new .collapser .btn {
  @extend .btn-light;
}

.inbox-entry .card-header .collapser,
.answerbox .card-header .collapser {
  --gradient-base: var(--raised-accent-rgb);
}

.question--fixed .card-body .collapser,
.answerbox .card-body .collapser {
  --gradient-base: var(--raised-bg-rgb);
}

.inbox-entry--new .card-header .collapser {
  --gradient-base: var(--primary-rgb);
}