@mixin chat-messagebubble(
  $padding,
  $border-radius,
  $color-secondary,
  $background-color-secondary,
  $color-primary,
  $background-color-primary,
  $bubble-container-gap,
  $bubble-delete-gap,
  $bubble-delete-icon-size,
  $chat-bubble-gap,
) {
  .dx-chat-messagegroup-content {
    row-gap: $bubble-container-gap;
  }

  .dx-chat-messagebubble {
    padding: $padding;
    border-radius: $border-radius;
    gap: $chat-bubble-gap;

    &.dx-chat-messagebubble-deleted {
      .dx-chat-messagebubble-content {
        gap: $bubble-delete-gap;
        line-height: $bubble-delete-icon-size;

        .dx-icon {
          font-size: $bubble-delete-icon-size;
        }
      }
    }
  }

  .dx-chat-messagegroup-alignment-start {
    .dx-chat-messagebubble {
      color: $color-secondary;
      background-color: $background-color-secondary;

      &:first-child {
        border-start-start-radius: $border-radius;
      }

      &:last-child {
        border-end-start-radius: $border-radius;
      }
    }
  }

  .dx-chat-messagegroup-alignment-end {
    .dx-chat-messagebubble {
      color: $color-primary;
      background-color: $background-color-primary;

      &:first-child {
        border-start-end-radius: $border-radius;
      }

      &:last-child {
        border-end-end-radius: $border-radius;
      }
    }
  }
}