// Bubble style mixins for message type components.
// These mixins were extracted from MessageBubble to allow each message type
// to own its visual appearance, enabling custom messageRenderers to have
// full control over their styles.
@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

// Layer 1a: Base bubble appearance for self (outgoing) messages.
// Includes background, overflow, border-radius with top-right corner sharp.
@mixin bubble-base-self() {
  overflow: hidden;
  border-radius: 8px;
  border-top-right-radius: 0;

  @include theme() {
    background-color: get(bg-color-bubble-own);
    color: get(text-color-anti-primary);
  }
}

// Layer 1b: Base bubble appearance for other (incoming) messages.
// Includes background, overflow, border-radius with top-left corner sharp.
@mixin bubble-base-other() {
  overflow: hidden;
  border-radius: 8px;
  border-top-left-radius: 0;

  @include theme() {
    background-color: get(bg-color-bubble-reciprocal);
    color: get(text-color-primary);
  }
}

// Layer 2: Media message style (Image / Video).
// Transparent background with larger border-radius, no directional override.
@mixin bubble-media() {
  background: none;
  border-radius: 20px;
  overflow: hidden;

  @include theme() {
    border: 1.5px solid get(bg-color-bubble-own);
  }
}