#recommendationsContainer {
  position: relative;
  max-height: 100%;
  background-color: var(--color-bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#recommendations {
  transition: height 0.3s ease-in-out;
  overflow-y: auto;
  padding: 0 var(--padding-container);
  height: 100%;
  width: var(--width-chat);
}
@media only screen and (min-width: 992px) {
  /* Desktop view */
  #recommendations {
    width: 100%;
  }
}

#recommendationsContent {
  margin: 0.4em var(--padding-message);
}

#btnToggleRecommendations {
  display: block;
  width: 100%;
  padding: 0.5em;
  line-height: 100%;
  font-weight: 500;
  background-color: var(--color-btn-show-recommendations);
}

#btnToggleRecommendations > .chevron {
  width: 50%;
  transform: scaleX(2);
  background-size: 120svw 100%;
}

#btnToggleRecommendations > .btn-text {
  width: 100%;
  background-size: 240svw 100%;
}

#btnToggleRecommendations > div {
  background-attachment: fixed;
  background-image: linear-gradient(
    90deg,
    var(--color-text-dim) 42%,
    var(--color-new-content) 50%,
    var(--color-text-dim) 58%
  );
}

.clip-text {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.animate-wave {
  animation: wave 1s linear reverse;
}

@keyframes wave {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.recommendations-move, /* apply transition to moving elements */
.recommendations-enter-active,
.recommendations-leave-active {
  transition: all 0.5s ease;
}

.recommendations-enter-from,
.recommendations-leave-to {
  opacity: 0;
  transform: translateX(40px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.recommendations-leave-active {
  /* position: absolute; */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease-in;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}