.#{$n}-suggestions {
  width: 100%;
  height: fit-content;
  overscroll-behavior: contain;
}

.#{$n}-suggestions--aside {
  flex-direction: column;
  gap: $spacer * 0.5;
  max-height: $chat-suggestions-maxheight;
  padding: $spacer;
  overflow: hidden;
  transition:
    max-height $transition,
    padding $transition,
    transform $transition,
    opacity $transition;
  opacity: 0;

  &.#{$n}-transition--visible {
    display: flex;
  }

  &.#{$n}-transition--in {
    transition:
      padding $transition-delay,
      transform $transition-delay,
      opacity $transition-delay;
    opacity: 1;

    @include media('>phablet-l') {
      transform: translateX(0);
    }
  }

  @include media('>phablet-l') {
    flex: 0 0 50%;
    width: 50%;
    height: $chat-inline-height;
    min-height: 100%;
    max-height: $chat-inline-maxheight;
    transform: translateX(-100%);
  }

  @include media('>desktop') {
    flex: 0 0 33%;
    width: 33%;
  }
}

.#{$n}-suggestions__heading {
  flex: 0 0 auto;
  color: $brand1;
  font-size: $fontsize-large;
  font-weight: $fontweight-bold;
}

.#{$n}-suggestions__list {
  @include unList;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: $spacer * 0.25;
  width: 100%;
  height: auto;
  overscroll-behavior: contain;
}

.#{$n}-suggestions--aside .#{$n}-suggestions__list {
  flex: 1 1 100%;
  flex-flow: column nowrap;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.#{$n}-suggestions__item {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
}

.#{$n}-suggestions--aside .#{$n}-suggestions__item {
  width: 100%;
  margin-right: 0;
}

.#{$n}-suggestions__item .#{$n}-icon {
  display: none;
}

.#{$n}-suggestions__footer.#{$n}-suggestions__footer {
  display: block;
  width: 100%;
  margin: $spacer * 0.25 0 0;
  color: $brand1;
  font-size: $fontsize-default;
  font-weight: $fontweight-bold;
}