@mixin chat-messagebox(
  $messagebox-padding,
  $messagebox-border-color,
  $gap,
  $textarea-border-radius,
  $textarea-padding,
  $toolbar-min-height,
  $chat-file-container-width,
  $messagebox-files-container-padding,
  $messagebox-files-container-padding-top,
  $messagebox-file-background-color,
  $messagebox-file-cancel-button-secondary-color,
  $messagebox-file-box-shadow,
) {
  .dx-chat-messagebox {
    padding: $messagebox-padding;
    border-top-color: $messagebox-border-color;
    gap: $messagebox-padding;
  }

  .dx-chat-messagebox-textarea-container {
    gap: $gap;
  }

  .dx-chat-textarea.dx-textarea {
    gap: $gap;
    padding: $textarea-padding;

    &.dx-texteditor {
      border-radius: $textarea-border-radius;

      &.dx-editor-outlined::before {
        height: $textarea-border-radius;
        border-bottom-left-radius: $textarea-border-radius;
        border-bottom-right-radius: $textarea-border-radius;
      }
    }

    .dx-fileuploader-files-container {
      padding: $messagebox-files-container-padding;
      padding-top: $messagebox-files-container-padding-top;
      gap: $gap;
      grid-template-columns: repeat(auto-fit, $chat-file-container-width);

      .dx-fileuploader-file-container {
        background-color: $messagebox-file-background-color;
        box-shadow: $messagebox-file-box-shadow;

        .dx-fileuploader-cancel-button.dx-state-hover,
        .dx-fileuploader-cancel-button.dx-state-focused {
          background-color: $messagebox-file-cancel-button-secondary-color;
        }
      }
    }
  }

  .dx-chat-textarea-toolbar.dx-toolbar {
    .dx-toolbar-items-container {
      min-height: $toolbar-min-height;
    }
  }
}