@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.message-input {
  position: relative;
  display: flex;

  @include responsive((
    "mobile": (
      gap: 4px,
      padding: 12px 10px,
    ),
    "desktop": (
      gap: 8px,
      padding: 12px 20px,
    ),
  ));

  @include theme() {
    background-color: get(bg-color-operate);
  }

  &__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    min-height: 42px;
    gap: 8px;
  }

  &__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  }

  &__leftInline,
  &__rightInline {
    display: flex;
    align-items: center;
    height: 100%;
  }

  &__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
}