.str-chat__small-message-input {
  display: flex;
  flex-wrap: wrap;
  margin: var(--xs-m);
  padding: var(--xs-m);
  position: relative;

  .rfu-file-previewer {
    flex: 1 1 100%;
  }

  .rfu-image-previewer {
    flex: 1 1 100%;
  }

  &__wrapper {
    position: relative;
    z-index: 0;
    width: 100%;
  }

  &-fileupload {
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: transparent;
  }

  &-emojiselect {
    bottom: 10px;
    right: 6px;
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: transparent;
  }

  .str-chat-angular__emojiselect {
    width: auto;
    height: auto;
    left: 15px;
    max-width: 20px;
  }

  .str-chat-angular__cooldown {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
  }

  .rfu-file-upload-button {
    bottom: 9px;
    right: 26px;
  }

  &--textarea-wrapper {
    flex-wrap: wrap;
    flex: 1 0;
    position: relative;
  }

  &-emojiselect,
  .rfu-file-upload-button {
    position: absolute;
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-size: 44px 44px;
    fill: var(--grey);

    &:hover {
      fill: var(--black);
    }
  }

  &-emojipicker {
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: scale(0.8);
    transform-origin: 100% 100%;
  }

  &-has-attachments {
    .str-chat__send-button {
      display: block;
    }
  }

  &--send-button {
    background: none;
    border: none;
    cursor: pointer;
    flex: 0 1;
    outline: 0;

    &:hover {
      opacity: 0.69;
    }

    @media screen and (min-width: 768px) {
      display: none;
    }
  }

  textarea {
    background: var(--grey-whisper);
    color: var(--black);
    min-height: 36px;
    font-size: var(--sm-font);
    padding: 10px 44px 8px 8px;

    &.str-chat__angular-textarea {
      padding: 10px 35px 8px;
    }

    &:focus {
      height: 36px;
    }
  }

  .str-chat-angular__textarea {
    position: relative;

    + .str-chat__fileupload-wrapper {
      .rfu-file-upload-button {
        right: 15px;
      }
    }
  }

  .str-chat__emojisearch {
    bottom: 100%;
  }

  .str-chat__user-item {
    font-size: var(--md-font);
  }

  .rfu-file-upload-button {
    position: absolute;
    cursor: pointer;
    right: 28px;
  }

  .rfu-dropzone .rfu-dropzone__notifier {
    z-index: 1000;
  }
}

.dark.str-chat {
  .str-chat__small-message-input {
    textarea {
      background: var(--white5);
      border: 1px solid var(--black20);
      border-radius: var(--border-radius-sm);
      color: var(--white);
    }

    .rfu-file-upload-button,
    .str-chat__small-message-input-emojiselect {
      svg {
        fill: var(--white);
      }
    }
  }
}