.textarea__suggestions {
  @extend .card;
  background-color: var(--color-card-background);
  max-height: 30vh;
  overflow-y: scroll;
  text-overflow: ellipsis;
  box-shadow: var(--card-box-shadow);

  > .icon {
    top: 0;
    left: var(--spacing-m);
    height: 100%;
    position: absolute;
    z-index: 1;
    stroke: var(--color-input-placeholder);
  }

  @media (min-width: $breakpoint-small) {
    padding: 0;
  }

  .textareaSuggestions__label:first-of-type {
    margin-top: var(--spacing-xs);
  }
}

.textareaSuggestion {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-xxs);
  margin-left: var(--spacing-xxs);
  overflow: hidden;
  text-overflow: ellipsis;

  .channel-thumbnail {
    @include handleChannelGif(2.1rem);
    position: absolute;

    @media (min-width: $breakpoint-small) {
      @include handleChannelGif(2.1rem);
    }
  }
}

.textareaSuggestions__row {
  &:last-child hr {
    display: none;
  }
}

.textareaSuggestions__topSeparator {
  @extend .wunderbar__top-separator;
}

.textareaSuggestion__label {
  @extend .wunderbar__suggestion-label;
  margin-left: var(--spacing-m);
  display: block;
  position: relative;
}

.textareaSuggestions__label {
  @extend .wunderbar__label;
}

.textareaSuggestions__topSeparator {
  @extend .wunderbar__top-separator;
}

.textareaSuggestion__value {
  @extend .wunderbar__suggestion-name;
  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
}

.textareaSuggestion__title {
  @extend .wunderbar__suggestion-title;
  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
}