.autosuggest-input {
  position: relative;
}

.autosuggest-textarea {
  &__suggestions-wrapper {
    position: relative;
    height: 0;
  }

  &__wrapper {
    position: relative;
  }

  &__textarea {
    display: block;
    box-sizing: border-box;
    min-height: 100px;
    border-radius: 5px 5px 0 0;
    resize: none;
    scrollbar-color: initial;
    padding: 14px 32px 13px 10px !important;
    width: 100%;
    margin: 0;
    color: $inverted-text-color;
    background: $simple-background-color;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    border: 0;
    outline: 0;

    body.theme-gabsocial-light & {
      background: $gab-background-base-light;
    }

    &:focus {
      outline: 0;
    }

    &::-webkit-scrollbar {
      all: unset;
    }

    @include breakpoint(sm) {
      max-height: 100px !important; // prevent auto-resize textarea
      resize: vertical;
      font-size: 16px;
    }
  }

  &__suggestions {
    display: none;
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 9999;
    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
    background: $ui-secondary-color;
    color: $inverted-text-color;
    border-radius: 0 0 4px 4px;
    font-size: 14px;
    padding: 6px;

    &--visible {
      display: block;
    }

    &__item {
      padding: 10px;
      cursor: pointer;
      border-radius: 4px;

      &:hover,
      &:focus,
      &:active,
      &.selected {
        background: darken($ui-secondary-color, 10%);
      }
    }
  }
}