---
id: component-variables
sidebar_position: 3
title: Component variables
keywords: [v2, theme-v2, theming-v2, theming, component variables]
---

import SDKSpecific from './SDKSpecific';
import V2Warning from './V2Warning';

:::info

<SDKSpecific name='angular'>
  <V2Warning themingAndCSSPath='../../concepts/themeing' />
</SDKSpecific>

<SDKSpecific name='react'>
  <V2Warning themingAndCSSPath='../../customization/css_and_theming' />
</SDKSpecific>

:::

CSS variables are the easiest way to customize the theme. The variables are organized into two layers:

- Global
- Component

This page contains information about the component variables.

## AttachmentList

### Theme variables

| Name                                                                    | Value(s)                                                                                                                                                   | Description                                                                                                                |
| ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `--str-chat__attachment-list-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for the borders of the component                                                                    |
| `--str-chat__attachment-list-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of the component                                                                                       |
| `--str-chat__attachment-list-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of the component                                                                                      |
| `--str-chat__attachment-list-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of the component                                                                                                |
| `--str-chat__attachment-list-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of the component                                                                                             |
| `--str-chat__attachment-list-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of the component                                                                         |
| `--str-chat__attachment-list-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of the component                                                                         |
| `--str-chat__attachment-list-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to the component                                                                                        |
| `--str-chat__image-attachment-border-radius`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-color`                                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                    |
| `--str-chat__image-attachment-background-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                   |
| `--str-chat__image-attachment-border-block-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                             |
| `--str-chat__image-attachment-border-block-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                          |
| `--str-chat__image-attachment-border-inline-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)      |
| `--str-chat__image-attachment-border-inline-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)      |
| `--str-chat__image-attachment-box-shadow`                               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs)                     |
| `--str-chat__image-gallery-attachment-border-radius`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of image gallery attachments                                                        |
| `--str-chat__image-gallery-attachment-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of image gallery attachments                                                                           |
| `--str-chat__image-gallery-attachment-background-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of image gallery attachments                                                                          |
| `--str-chat__image-gallery-attachment-border-block-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of image gallery attachments                                                                                    |
| `--str-chat__image-gallery-attachment-border-block-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of image gallery attachments                                                                                 |
| `--str-chat__image-gallery-attachment-border-inline-start`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of image gallery attachments                                                             |
| `--str-chat__image-gallery-attachment-border-inline-end`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of image gallery attachments                                                             |
| `--str-chat__image-gallery-attachment-box-shadow`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to image gallery attachments                                                                            |
| `--str-chat__image-gallery-attachment-overlay`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table>                                                   | Overlay color applied to image gallery attachments                                                                         |
| `--str-chat__image-gallery-attachment-overlay-text-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-overlay-text-color )`</td></tr></table>                                            | Text colors used on overlay applied to image gallery attachments                                                           |
| `--str-chat__card-attachment-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for the borders of card attachments                                                                 |
| `--str-chat__card-attachment-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of card attachments                                                                                    |
| `--str-chat__card-attachment-link-color`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                                                             | The text color of links inside card attachments                                                                            |
| `--str-chat__card-attachment-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of card attachments                                                                                   |
| `--str-chat__card-attachment-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of card attachments                                                                                             |
| `--str-chat__card-attachment-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of card attachments                                                                                          |
| `--str-chat__card-attachment-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of card attachments                                                                      |
| `--str-chat__card-attachment-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of card attachments                                                                      |
| `--str-chat__card-attachment-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to card attachments                                                                                     |
| `--str-chat__file-attachment-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of file attachments                                                                 |
| `--str-chat__file-attachment-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of file attachments                                                                                    |
| `--str-chat__file-attachment-secondary-color`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | The text/icon color of file attachments for low emphasis texts (for example file size)                                     |
| `--str-chat__file-attachment-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>                                                | The background color of file attachments                                                                                   |
| `--str-chat__file-attachment-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of file attachments                                                                                             |
| `--str-chat__file-attachment-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of file attachments                                                                                          |
| `--str-chat__file-attachment-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of file attachments                                                                      |
| `--str-chat__file-attachment-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of file attachments                                                                      |
| `--str-chat__file-attachment-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to file attachments                                                                                     |
| `--str-chat__audio-attachment-widget-border-radius`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | Border radius applied audio widget                                                                                         |
| `--str-chat__audio-attachment-widget-color`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | Text color used in audio widget                                                                                            |
| `--str-chat__audio-attachment-widget-secondary-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | Border radius applied audio widget                                                                                         |
| `--str-chat__audio-attachment-widget-background-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>                                                | The text/icon color for low emphasis texts (for example file size) in audio widget                                         |
| `--str-chat__audio-attachment-widget-border-block-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of audio widget                                                                                                 |
| `--str-chat__audio-attachment-widget-border-block-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of audio widget                                                                                              |
| `--str-chat__audio-attachment-widget-border-inline-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of audio widget                                                                          |
| `--str-chat__audio-attachment-widget-border-inline-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of audio widget                                                                          |
| `--str-chat__audio-attachment-widget-box-shadow`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to audio widget                                                                                         |
| `--str-chat__audio-attachment-controls-button-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>                                                      | Border radius applied to the play / pause button of audio widget                                                           |
| `--str-chat__audio-attachment-controls-button-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | Text color applied to audio widget's play / pause button                                                                   |
| `--str-chat__audio-attachment-controls-button-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table>                                              | Background color applied to audio widget's play / pause button                                                             |
| `--str-chat__audio-attachment-controls-button-pressed-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__surface-color )`</td></tr></table>                                                           | Background color applied to audio widget's play / pause button when in pressed (active) state                              |
| `--str-chat__audio-attachment-controls-button-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of audio widget's play / pause button                                                                           |
| `--str-chat__audio-attachment-controls-button-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of audio widget's play / pause button                                                                        |
| `--str-chat__audio-attachment-controls-button-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of audio widget's play / pause button                                                    |
| `--str-chat__audio-attachment-controls-button-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of audio widget's play / pause button                                                    |
| `--str-chat__audio-attachment-controls-button-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-box-shadow)`</td></tr></table>                                                     | Box shadow applied to audio widget's play / pause button                                                                   |
| `--str-chat__attachment-actions-border-radius`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for attachment actions                                                                              |
| `--str-chat__attachment-actions-color`                                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of attachment actions                                                                                  |
| `--str-chat__attachment-actions-background-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of attachment actions                                                                                 |
| `--str-chat__attachment-actions-border-block-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of attachment actions                                                                                           |
| `--str-chat__attachment-actions-border-block-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of attachment actions                                                                                        |
| `--str-chat__attachment-actions-border-inline-start`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of attachment actions                                                                    |
| `--str-chat__attachment-actions-border-inline-end`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of attachment actions                                                                    |
| `--str-chat__attachment-actions-box-shadow`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to attachment actions                                                                                   |
| `--str-chat__attachment-action-border-radius`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for an attachment action                                                                            |
| `--str-chat__attachment-action-color`                                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | The text/icon color of an attachment action                                                                                |
| `--str-chat__attachment-action-background-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>                                                | The background color of an attachment action                                                                               |
| `--str-chat__attachment-action-border-block-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Top border of an attachment action                                                                                         |
| `--str-chat__attachment-action-border-block-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Bottom border of an attachment action                                                                                      |
| `--str-chat__attachment-action-border-inline-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Left (right in RTL layout) border of an attachment action                                                                  |
| `--str-chat__attachment-action-border-inline-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Right (left in RTL layout) border of an attachment action                                                                  |
| `--str-chat__attachment-action-box-shadow`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to an attachment action                                                                                 |
| `--str-chat__attachment-action-active-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                                                             | The text/icon color of an attachment action while in pressed state                                                         |

Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)

### Layout variables

| Name                               | Value(s)                                                                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--str-chat__attachment-margin`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__spacing-0_5)`</td></tr><tr><th>`.str-chat__quoted-message-preview`</th></tr><tr><td>`0px`</td></tr></table>   | The margin applied to every attachment in the attachment list                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `--str-chat__gif-height`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 200)`</td></tr></table>                                                                    | The height of GIFs                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `--str-chat__attachment-max-width` | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc( var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)) )`</td></tr></table> | The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). |
| `--str-chat__video-height`         | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`var(--str-chat__attachment-max-width)`</td></tr></table>                                                     | The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio                                                                                                                                                                                                                                                                                                                                                      |
| `--str-chat__scraped-image-height` | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91))`</td></tr></table>                              | The height of scraped images, the default value is optimized for 1.91:1 aspect ratio                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `--str-chat__scraped-video-height` | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc(var(--str-chat__attachment-max-width) * calc(9 / 16))`</td></tr></table>                                | The height of scraped videos, the default value is optimized for 16:9 aspect ratio                                                                                                                                                                                                                                                                                                                                                                                                                                  |

Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss)

## AttachmentPreviewList

### Theme variables

| Name                                                       | Value(s)                                                                                                      | Description                                                                                      |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `--str-chat__attachment-preview-list-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>             | The border radius used for the borders of the component                                          |
| `--str-chat__attachment-preview-list-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                                                             |
| `--str-chat__attachment-preview-list-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the component                                                            |
| `--str-chat__attachment-preview-list-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                                                                      |
| `--str-chat__attachment-preview-list-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                                                                   |
| `--str-chat__attachment-preview-list-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component                                               |
| `--str-chat__attachment-preview-list-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component                                               |
| `--str-chat__attachment-preview-list-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                                                              |
| `--str-chat__attachment-preview-close-icon-background`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table>      | Background color of the preview delete icon                                                      |
| `--str-chat__attachment-preview-close-icon-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-text-color)`</td></tr></table> | Foreground color of the preview delete icon                                                      |
| `--str-chat__attachment-preview-retry-icon-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                | Color of the upload retry icon                                                                   |
| `--str-chat__attachment-preview-download-icon-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>      | Color of the preview download icon                                                               |
| `--str-chat__attachment-preview-overlay-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__overlay-color)`</td></tr></table>                | Overlay color applied to attachment previews during upload and if an error occured during upload |
| `--str-chat__attachment-preview-image-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>             | The border radius used for the borders of the image preview                                      |
| `--str-chat__attachment-preview-image-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the image preview                                                         |
| `--str-chat__attachment-preview-image-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the image preview                                                        |
| `--str-chat__attachment-preview-image-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the image preview                                                                  |
| `--str-chat__attachment-preview-image-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the image preview                                                               |
| `--str-chat__attachment-preview-image-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the image preview                                           |
| `--str-chat__attachment-preview-image-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the image preview                                           |
| `--str-chat__attachment-preview-image-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the image preview                                                          |
| `--str-chat__attachment-preview-file-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>             | The border radius used for the borders of the file preview                                       |
| `--str-chat__attachment-preview-file-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the file preview                                                          |
| `--str-chat__attachment-preview-file-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the file preview                                                         |
| `--str-chat__attachment-preview-file-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Top border of the file preview                                                                   |
| `--str-chat__attachment-preview-file-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Bottom border of the file preview                                                                |
| `--str-chat__attachment-preview-file-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Left (right in RTL layout) border of the file preview                                            |
| `--str-chat__attachment-preview-file-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Right (left in RTL layout) border of the file preview                                            |
| `--str-chat__attachment-preview-file-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the file preview                                                           |

Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)

## Autocomplete

### Theme variables

| Name                                                          | Value(s)                                                                                                      | Description                                                                                  |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `--str-chat__autocomplete-menu-border-radius`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>             | The border radius used for the borders of the component                                      |
| `--str-chat__autocomplete-menu-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                                                         |
| `--str-chat__autocomplete-menu-background-color`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>   | The background color of the component                                                        |
| `--str-chat__autocomplete-menu-border-block-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                                                                  |
| `--str-chat__autocomplete-menu-border-block-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                                                               |
| `--str-chat__autocomplete-menu-border-inline-start`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component                                           |
| `--str-chat__autocomplete-menu-border-inline-end`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component                                           |
| `--str-chat__autocomplete-menu-box-shadow`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px rgba(0, 0, 0, 0.15)`</td></tr></table>                   | Box shadow applied to the component                                                          |
| `--str-chat__autocomplete-active-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                | The background color of a selected autocomplete item                                         |
| `--str-chat__suggestion-list-container-border-radius`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>             | The border radius used for the borders of the component (ReactSDK)                           |
| `--str-chat__suggestion-list-container-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component (ReactSDK)                                              |
| `--str-chat__suggestion-list-container-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component (ReactSDK)                                             |
| `--str-chat__suggestion-list-container-border-block-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component (ReactSDK)                                                       |
| `--str-chat__suggestion-list-container-border-block-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component (ReactSDK)                                                    |
| `--str-chat__suggestion-list-container-border-inline-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component (ReactSDK)                                |
| `--str-chat__suggestion-list-container-border-inline-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component (ReactSDK)                                |
| `--str-chat__suggestion-list-container-box-shadow`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px rgba(0, 0, 0, 0.15)`</td></tr></table>                   | Box shadow applied to the component (ReactSDK)                                               |
| `--str-chat__suggestion-list-item--selected-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                | The background color of a selected autocomplete item (ReactSDK)                              |
| `--str-chat__slash-command-border-radius`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                             | The border radius used for the borders of the slash command item in the autocomplete list    |
| `--str-chat__slash-command-color`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the slash command item in the autocomplete list                       |
| `--str-chat__slash-command-background-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the slash command item in the autocomplete list                      |
| `--str-chat__slash-command-border-block-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the slash command item in the autocomplete list                                |
| `--str-chat__slash-command-border-block-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the slash command item in the autocomplete list                             |
| `--str-chat__slash-command-border-inline-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the slash command item in the autocomplete list         |
| `--str-chat__slash-command-border-inline-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the slash command item in the autocomplete list         |
| `--str-chat__slash-command-box-shadow`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the slash command item in the autocomplete list                                |
| `--str-chat__slash-command-args-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>      | Text color of the arguments of a slash command item in the autocomplete list                 |
| `--str-chat__mention-list-user-item-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                             | The border radius used for the borders of the user mention item in the autocomplete list     |
| `--str-chat__mention-list-user-item-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the user mention item in the autocomplete list                        |
| `--str-chat__mention-list-user-item-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the user mention item in the autocomplete list                       |
| `--str-chat__mention-list-user-item-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the user mention item in the autocomplete list                                 |
| `--str-chat__mention-list-user-item-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the user mention item in the autocomplete list                              |
| `--str-chat__mention-list-user-item-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the user mention item in the autocomplete list          |
| `--str-chat__mention-list-user-item-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the user mention item in the autocomplete list          |
| `--str-chat__mention-list-user-item-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the user mention item in the autocomplete list                                 |
| `--str-chat__mention-list-user-item-at-sign-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                | The text color of the at sign inside a user mention itome in the autocomplete list           |
| `--str-chat__mention-list-emoji-item-border-radius`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                             | The border radius used for the borders of the emoji suggestion item in the autocomplete list |
| `--str-chat__mention-list-emoji-item-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the emoji suggestion item in the autocomplete list                    |
| `--str-chat__mention-list-emoji-item-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the emoji suggestion item in the autocomplete list                   |
| `--str-chat__mention-list-emoji-item-border-block-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the emoji suggestion item in the autocomplete list                             |
| `--str-chat__mention-list-emoji-item-border-block-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the emoji suggestion item in the autocomplete list                          |
| `--str-chat__mention-list-emoji-item-border-inline-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list      |
| `--str-chat__mention-list-emoji-item-border-inline-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list      |
| `--str-chat__mention-list-emoji-item-box-shadow`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the emoji suggestion item in the autocomplete list                             |

Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)

### Layout variables

| Name                                              | Value(s)                                                                                     | Description                                                         |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| `--str-chat__mention-list-emoji-item-font-family` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__font-family)`</td></tr></table> | The font used in the emoji suggestion item in the autocomplete list |

Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Autocomplete/Autocomplete-layout.scss)

## Avatar

### Theme variables

| Name                                     | Value(s)                                                                                              | Description                                             |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__avatar-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table> | The border radius used for the borders of the component |
| `--str-chat__avatar-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table>     | The text/icon color of the component                    |
| `--str-chat__avatar-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>        | The background color of the component                   |
| `--str-chat__avatar-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Top border of the component                             |
| `--str-chat__avatar-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Bottom border of the component                          |
| `--str-chat__avatar-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Left (right in RTL layout) border of the component      |
| `--str-chat__avatar-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Right (left in RTL layout) border of the component      |
| `--str-chat__avatar-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Box shadow applied to the component                     |

Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Avatar/Avatar-theme.scss)

## Channel

### Theme variables

| Name                                        | Value(s)                                                                                                 | Description                                             |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__channel-border-radius`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                        | The border radius used for the borders of the component |
| `--str-chat__channel-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>              | The text/icon color of the component                    |
| `--str-chat__channel-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>        | The background color of the component                   |
| `--str-chat__channel-box-shadow`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                     |
| `--str-chat__channel-border-block-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Top border of the component                             |
| `--str-chat__channel-border-block-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Bottom border of the component                          |
| `--str-chat__channel-border-inline-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Left (right in RTL layout) border of the component      |
| `--str-chat__channel-border-inline-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component      |
| `--str-chat__channel-empty-indicator-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>          | The icon color used when no channel is selected         |
| `--str-chat__channel-empty-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text color used when no channel is selected         |
| `--str-chat__channel-loading-state-color`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>          | The color of the loading indicator                      |

Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Channel/Channel-theme.scss)

## ChannelHeader

### Theme variables

| Name                                             | Value(s)                                                                                                    | Description                                                              |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `--str-chat__channel-header-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of the component                  |
| `--str-chat__channel-header-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The text/icon color of the component                                     |
| `--str-chat__channel-header-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                    |
| `--str-chat__channel-header-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                              |
| `--str-chat__channel-header-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                           |
| `--str-chat__channel-header-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                       |
| `--str-chat__channel-header-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                       |
| `--str-chat__channel-header-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                      |
| `--str-chat__channel-header-info-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used to display member information about the channel |

Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss)

## ChannelList

### Theme variables

| Name                                                           | Value(s)                                                                                                                | Description                                                    |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| `--str-chat__channel-list-border-radius`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                       | The border radius used for the borders of the component        |
| `--str-chat__channel-list-color`                               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                             | The text/icon color of the component                           |
| `--str-chat__channel-list-background-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>             | The background color of the component                          |
| `--str-chat__channel-list-box-shadow`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Box shadow applied to the component                            |
| `--str-chat__channel-list-border-block-start`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Top border of the component                                    |
| `--str-chat__channel-list-border-block-end`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Bottom border of the component                                 |
| `--str-chat__channel-list-border-inline-start`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Left (right in RTL layout) border of the component             |
| `--str-chat__channel-list-border-inline-end`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>                | Right (left in RTL layout) border of the component             |
| `--str-chat__channel-list-load-more-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-border-radius)`</td></tr></table>               | The border radius used for the borders of the load more button |
| `--str-chat__channel-list-load-more-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-color)`</td></tr></table>                       | The text/icon color of the load more button                    |
| `--str-chat__channel-list-load-more-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-background-color)`</td></tr></table>            | The background color of the load more button                   |
| `--str-chat__channel-list-load-more-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-box-shadow)`</td></tr></table>                  | Box shadow applied to the load more button                     |
| `--str-chat__channel-list-load-more-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-border-block-start )`</td></tr></table>        | Top border of the load more button                             |
| `--str-chat__channel-list-load-more-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-border-block-end)`</td></tr></table>            | Bottom border of the load more button                          |
| `--str-chat__channel-list-load-more-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-border-inline-start )`</td></tr></table>       | Left (right in RTL layout) border of the load more button      |
| `--str-chat__channel-list-load-more-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-border-inline-end )`</td></tr></table>         | Right (left in RTL layout) border of the load more button      |
| `--str-chat__channel-list-load-more-pressed-background-color`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-pressed-background-color )`</td></tr></table>  | The background color of the load more button in pressed state  |
| `--str-chat__channel-list-load-more-disabled-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-disabled-background-color )`</td></tr></table> | The background color of the load more button in disabled state |
| `--str-chat__channel-list-load-more-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-disabled-color)`</td></tr></table>              | The text/icon color of the load more button in disabled state  |
| `--str-chat__channel-list-empty-indicator-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>                         | The icon color for the empty list state                        |

Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelList/ChannelList-theme.scss)

## ChannelPreview

### Theme variables

| Name                                                           | Value(s)                                                                                                   | Description                                                              |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `--str-chat__channel-preview-border-radius`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                          | The border radius used for the borders of the component                  |
| `--str-chat__channel-preview-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                | The text/icon color of the component                                     |
| `--str-chat__channel-preview-background-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                | The background color of the component                                    |
| `--str-chat__channel-preview-border-block-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the component                                              |
| `--str-chat__channel-preview-border-block-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the component                                           |
| `--str-chat__channel-preview-border-inline-start`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the component                       |
| `--str-chat__channel-preview-border-inline-end`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the component                       |
| `--str-chat__channel-preview-active-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>             | Background color used for selected channel preview components            |
| `--str-chat__channel-preview-hover-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>   | Background color used for the hover state                                |
| `--str-chat__channel-preview-latest-message-secondary-color`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__text-low-emphasis-color )`</td></tr></table> | Text color of the latest message when preview is not hovered or selected |
| `--str-chat__channel-preview-loading-state-color`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>            | The color of the loading indicator while initializing the channel list   |
| `--str-chat__channel-preview-unread-badge-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__unread-badge-color)`</td></tr></table>        | The background color of the unread badge                                 |
| `--str-chat__channel-preview-unread-badge-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-unread-badge-color)`</td></tr></table>     | The color of the unread badge                                            |
| `--str-chat__channel-preview-unread-badge-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>      | The border radius used for the borders of the unread badge               |
| `--str-chat__channel-preview-unread-badge-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the unread badge                                           |
| `--str-chat__channel-preview-unread-badge-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the unread badge                                        |
| `--str-chat__channel-preview-unread-badge-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the unread badge                    |
| `--str-chat__channel-preview-unread-badge-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the unread badge                    |

Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)

## ChannelSearch - Only available in React SDK

### Theme variables

| Name                                                                  | Value(s)                                                                                                   | Description                                                       |
| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `--str-chat__channel-search-input-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                | The text/icon color of the component                              |
| `--str-chat__channel-search-input-placeholder-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>   | The text/icon color of the component                              |
| `--str-chat__channel-search-input-icon-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>   | The text/icon color of the component                              |
| `--str-chat__channel-search-input-border-block-start`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the component                                       |
| `--str-chat__channel-search-input-border-block-end`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the component                                    |
| `--str-chat__channel-search-input-border-inline-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) borhe component                        |
| `--str-chat__channel-search-input-border-inline-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) borhe component                        |
| `--str-chat__channel-search-input-wrapper-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-lg)`</td></tr></table>          | The border radius used for the borders of the component           |
| `--str-chat__channel-search-input-wrapper-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                | The background color of the component                             |
| `--str-chat__channel-search-input-wrapper-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>   | Top border of the component                                       |
| `--str-chat__channel-search-input-wrapper-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>   | Bottom border of the component                                    |
| `--str-chat__channel-search-input-wrapper-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>   | Left (right in RTL layout) border of the component                |
| `--str-chat__channel-search-input-wrapper-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>   | Right (left in RTL layout) border of the component                |
| `--str-chat__channel-search-input-wrapper-active-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-lg)`</td></tr></table>          | The border radius used for the borders of the component           |
| `--str-chat__channel-search-input-wrapper-active-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                | The background color of the component                             |
| `--str-chat__channel-search-input-wrapper-active-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color) 1px solid`</td></tr></table>   | Top border of the component                                       |
| `--str-chat__channel-search-input-wrapper-active-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color) 1px solid`</td></tr></table>   | Bottom border of the component                                    |
| `--str-chat__channel-search-input-wrapper-active-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-color ) 1px solid`</td></tr></table> | Left (right in RTL layout) border of the component                |
| `--str-chat__channel-search-input-wrapper-active-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color) 1px solid`</td></tr></table>   | Right (left in RTL layout) border of the component                |
| `--str-chat__channel-search-result-background-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                | The background applied to channel search result                   |
| `--str-chat__channel-search-result-border-block-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the component                                       |
| `--str-chat__channel-search-result-border-block-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the component                                    |
| `--str-chat__channel-search-result-border-inline-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the component                |
| `--str-chat__channel-search-result-border-inline-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the component                |
| `--str-chat__channel-search-result-hover-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-surface-color )`</td></tr></table> | Background color used for the search result hover / focused state |
| `--str-chat__channel-search-results-header-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>   | The font color used in the search results header                  |
| `--str-chat__channel-search-results-header-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>          | The background color used in the search results header            |
| `--str-chat__channel-search-results-header-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the component                                       |
| `--str-chat__channel-search-results-header-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>   | Bottom border of the component                                    |
| `--str-chat__channel-search-results-header-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the component                |
| `--str-chat__channel-search-results-header-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the component                |
| `--str-chat__channel-search-results-empty-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>   | The font color used in the empty search results indicator         |
| `--str-chat__channel-search-results-empty-icon-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>            | The icon color used in the empty search results indicator         |
| `--str-chat__channel-search-results-empty-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>          | The background color used in the empty search results indicator   |
| `--str-chat__channel-search-results-empty-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the component                                       |
| `--str-chat__channel-search-results-empty-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the component                                    |
| `--str-chat__channel-search-results-empty-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the component                |
| `--str-chat__channel-search-results-empty-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the component                |

Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)

## CircleFAButton

### Theme variables

| Name                                              | Value(s)                                                                                                    | Description                                             |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__circle-fab-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the component |
| `--str-chat__circle-fab-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text/icon color of the component                    |
| `--str-chat__circle-fab-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                   |
| `--str-chat__circle-fab-pressed-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>              | The background color of the component in pressed state  |
| `--str-chat__circle-fab-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 2px 4px rgba(0, 0, 0, 0.25)`</td></tr></table>               | Box shadow applied to the component                     |
| `--str-chat__circle-fab-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                             |
| `--str-chat__circle-fab-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                          |
| `--str-chat__circle-fab-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component      |
| `--str-chat__circle-fab-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component      |

Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss)

## CTAButton

### Theme variables

| Name                                               | Value(s)                                                                                              | Description                                             |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__cta-button-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>     | The border radius used for the borders of the component |
| `--str-chat__cta-button-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table>     | The text/icon color of the component                    |
| `--str-chat__cta-button-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>        | The background color of the component                   |
| `--str-chat__cta-button-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Top border of the component                             |
| `--str-chat__cta-button-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Bottom border of the component                          |
| `--str-chat__cta-button-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Left (right in RTL layout) border of the component      |
| `--str-chat__cta-button-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Right (left in RTL layout) border of the component      |
| `--str-chat__cta-button-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Box shadow applied to the component                     |
| `--str-chat__cta-button-pressed-background-color`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__active-primary-color)`</td></tr></table> | The background color of the component in pressed state  |
| `--str-chat__cta-button-disabled-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>       | The background color of the component in disabled state |
| `--str-chat__cta-button-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>    | The text/icon color of the component in disabled state  |

Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/CTAButton/CTAButton-theme.scss)

## EditMessageForm

### Theme variables

| Name                                                        | Value(s)                                                                                                 | Description                                             |
| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__edit-message-modal-button-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | The border radius used for the borders of the component |
| `--str-chat__edit-message-modal-send-button-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>           | The text color used for the send button                 |
| `--str-chat__edit-message-modal-cancel-button-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text color used for the cancel button               |
| `--str-chat__edit-message-modal-button-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                              | The background color of the component                   |
| `--str-chat__edit-message-modal-button-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Top border of the component                             |
| `--str-chat__edit-message-modal-button-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Bottom border of the component                          |
| `--str-chat__edit-message-modal-button-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Left (right in RTL layout) border of the component      |
| `--str-chat__edit-message-modal-button-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component      |
| `--str-chat__edit-message-modal-button-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                     |

Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss)

## ImageCarousel - Only available in Angular SDK

### Theme variables

| Name                                       | Value(s)                                                                                    | Description                    |
| ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ |
| `--str-chat__image-carousel-stepper-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The color of the stepper icon. |

Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss)

## Message

### Theme variables

| Name                                                     | Value(s)                                                                                                    | Description                                                                                                  |
| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `--str-chat__message-border-radius`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | The border radius used for the borders of the component                                                      |
| `--str-chat__message-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                                                         |
| `--str-chat__message-error-message-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__danger-color)`</td></tr></table>               | The text/icon color used for displaying error messages                                                       |
| `--str-chat__message-secondary-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used for displaying items with less emphasis                                             |
| `--str-chat__message-link-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text color used for displaying links                                                                     |
| `--str-chat__message-mention-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text color used for displaying mentions                                                                  |
| `--str-chat__message-status-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text/icon color used for displaying message status                                                       |
| `--str-chat__message-replies-count-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text color used for displaying the number of thread replies of a message                                 |
| `--str-chat__message-background-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the component                                                                        |
| `--str-chat__message-highlighted-background-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__message-highlight-color)`</td></tr></table>    | The background color of a jumped-to message                                                                  |
| `--str-chat__message-border-block-start`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                                                  |
| `--str-chat__message-border-block-end`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                                                               |
| `--str-chat__message-border-inline-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                                                           |
| `--str-chat__message-border-inline-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                                                           |
| `--str-chat__message-box-shadow`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                                                          |
| `--str-chat__message-active-bacground-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background of the message component in active state                                                      |
| `--str-chat__message-options-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The icon color used for displaying message options                                                           |
| `--str-chat__message-options-hover-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>     | The icon color used for displaying message options if a message option is clicked                            |
| `--str-chat__message-options-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for displaying message options                                                        |
| `--str-chat__message-options-active-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The background color used if a message option is hovered                                                     |
| `--str-chat__message-bubble-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>           | The border radius used for the borders of the message bubble                                                 |
| `--str-chat__message-bubble-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon of the message bubble                                                                          |
| `--str-chat__message-bubble-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>    | The background of the message bubble                                                                         |
| `--str-chat__own-message-bubble-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-surface-color)`</td></tr></table>      | The background of the message bubble, if the message was sent by the user                                    |
| `--str-chat__quoted-message-bubble-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background of the message bubble, if it's a quoted message                                               |
| `--str-chat__message-bubble-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the message bubble                                                                             |
| `--str-chat__message-bubble-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the message bubble                                                                          |
| `--str-chat__message-bubble-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the message bubble                                                      |
| `--str-chat__message-bubble-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the message bubble                                                      |
| `--str-chat__message-bubble-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the message bubble                                                                     |
| `--str-chat__deleted-message-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>           | The border radius used for the borders of a deleted message                                                  |
| `--str-chat__deleted-message-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon of a deleted message                                                                           |
| `--str-chat__deleted-message-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>    | The background of a deleted message                                                                          |
| `--str-chat__deleted-message-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of a deleted message                                                                              |
| `--str-chat__deleted-message-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of a deleted message                                                                           |
| `--str-chat__deleted-message-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of a deleted message                                                       |
| `--str-chat__deleted-message-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of a deleted message                                                       |
| `--str-chat__deleted-message-box-shadow`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to a deleted message                                                                      |
| `--str-chat__system-message-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of a system message                                                   |
| `--str-chat__system-message-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon of a system message                                                                            |
| `--str-chat__system-message-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background of a system message                                                                           |
| `--str-chat__system-message-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of a system message                                                                               |
| `--str-chat__system-message-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of a system message                                                                            |
| `--str-chat__system-message-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of a system message                                                        |
| `--str-chat__system-message-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of a system message                                                        |
| `--str-chat__system-message-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to a system message                                                                       |
| `--str-chat__date-separator-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | Text color in a date separator                                                                               |
| `--str-chat__date-separator-line-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The line color applied to date separator                                                                     |
| `--str-chat__date-separator-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of a date separator                                                   |
| `--str-chat__date-separator-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of a date separator                                                                     |
| `--str-chat__date-separator-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of a date separator                                                                               |
| `--str-chat__date-separator-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of a date separator                                                                            |
| `--str-chat__date-separator-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of a date separator                                                        |
| `--str-chat__date-separator-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of a date separator                                                        |
| `--str-chat__date-separator-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to a date separator                                                                       |
| `--str-chat__translation-notice-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text color of the translation notice that is displayed if a message is translated with auto-translation  |
| `--str-chat__translation-notice-active-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>     | The hover color of the translation notice that is displayed if a message is translated with auto-translation |

Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-theme.scss)

### Layout variables

| Name                                                         | Value(s)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Description                                                                      |
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| `--str-chat__message-options-button-size`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 26)`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                  | The width/height of the message options buttons                                  |
| `--str-chat__message-max-width`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 480)`</td></tr><tr><th>`.str-chat__message.str-chat__message--has-attachment`</th></tr><tr><td>`var(--str-chat__message-with-attachment-max-width)`</td></tr><tr><th>`.str-chat__quoted-message-preview`</th></tr><tr><td>`var(--str-chat__quoted-message-max-width)`</td></tr><tr><th>`.str-chat__message-input .str-chat__quoted-message-preview`</th></tr><tr><td>`var(--str-chat__quoted-message-inside-message-input-max-width)`</td></tr></table> | The maximum allowed width of the message component                               |
| `--str-chat__message-with-attachment-max-width`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 300)`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                 | The maximum allowed width of the message component, if it has attachments        |
| `--str-chat__quoted-message-max-width`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 180)`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                 | The maximum allowed width of quoted messages inside the message component        |
| `--str-chat__quoted-message-inside-message-input-max-width`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__spacing-px) * 200 )`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                               | The maximum allowed width of quoted messages inside the message input component  |
| `--str-chat__quoted-message-inside-message-input-max-height` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__quoted-message-inside-message-input-max-width) + calc(var(--str-chat__spacing-px) * 50) )`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                         | The maximum allowed height of quoted messages inside the message input component |

Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Message/Message-layout.scss)

## MessageActionsBox

### Theme variables

| Name                                                          | Value(s)                                                                                                    | Description                                                                  |
| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `--str-chat__message-actions-box-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>           | The border radius used for the borders of the component                      |
| `--str-chat__message-actions-box-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                         |
| `--str-chat__message-actions-box-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                        |
| `--str-chat__message-actions-box-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                  |
| `--str-chat__message-actions-box-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                               |
| `--str-chat__message-actions-box-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                           |
| `--str-chat__message-actions-box-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                           |
| `--str-chat__message-actions-box-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>   | Box shadow applied to the component                                          |
| `--str-chat__message-actions-box-item-border-radius`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of an item in the message actions box |
| `--str-chat__message-actions-box-item-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of an item in the message actions box                    |
| `--str-chat__message-actions-box-item-background-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of an item in the message actions box                   |
| `--str-chat__message-actions-box-item-hover-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-surface-color )`</td></tr></table>  | The background color of an item in the message actions box when hovered      |
| `--str-chat__message-actions-box-item-border-block-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of an item in the message actions box                             |
| `--str-chat__message-actions-box-item-border-block-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of an item in the message actions box                          |
| `--str-chat__message-actions-box-item-border-inline-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of an item in the message actions box      |
| `--str-chat__message-actions-box-item-border-inline-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of an item in the message actions box      |
| `--str-chat__message-actions-box-item-box-shadow`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to an item in the message actions box                     |

Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)

## MessageInput

### Theme variables

| Name                                                  | Value(s)                                                                                                    | Description                                                                                                        |
| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `--str-chat__message-input-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius of the component                                                                                 |
| `--str-chat__message-input-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                                                               |
| `--str-chat__message-input-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                                                              |
| `--str-chat__message-input-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                                                        |
| `--str-chat__message-input-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                                                                     |
| `--str-chat__message-input-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                                                                 |
| `--str-chat__message-input-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                                                                 |
| `--str-chat__message-input-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                                                                |
| `--str-chat__dropzone-container-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table>           | The text/icon color of the dropzone container                                                                      |
| `--str-chat__dropzone-container-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-overlay-color)`</td></tr></table>      | The background color of the dropzone container                                                                     |
| `--str-chat__message-textarea-border-radius`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>           | The border radius used for the borders of the textarea                                                             |
| `--str-chat__message-textarea-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the textarea                                                                                |
| `--str-chat__message-textarea-background-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the textarea                                                                               |
| `--str-chat__message-textarea-border-block-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Top border of the textarea                                                                                         |
| `--str-chat__message-textarea-border-block-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Bottom border of the textarea                                                                                      |
| `--str-chat__message-textarea-border-inline-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Left (right in RTL layout) border of the textarea                                                                  |
| `--str-chat__message-textarea-border-inline-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Right (left in RTL layout) border of the textarea                                                                  |
| `--str-chat__message-textarea-box-shadow`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the textarea                                                                                 |
| `--str-chat__message-send-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the send button                                                          |
| `--str-chat__message-send-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text/icon color of the send button                                                                             |
| `--str-chat__message-send-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the send button                                                                            |
| `--str-chat__message-send-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the send button                                                                                      |
| `--str-chat__message-send-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the send button                                                                                   |
| `--str-chat__message-send-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the send button                                                               |
| `--str-chat__message-send-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the send button                                                               |
| `--str-chat__message-send-box-shadow`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the send button                                                                              |
| `--str-chat__message-send-disabled-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The color of the send button in disabled state                                                                     |
| `--str-chat__message-send-disabled-background-color`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the send button in disabled state                                                          |
| `--str-chat__message-input-tools-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) |
| `--str-chat__message-input-tools-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color of the tool buttons of the message input (such as attachment upload button)                    |
| `--str-chat__message-input-tools-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the tool buttons of the message input (such as attachment upload button)                   |
| `--str-chat__message-input-tools-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the tool buttons of the message input (such as attachment upload button)                             |
| `--str-chat__message-input-tools-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the tool buttons of the message input (such as attachment upload button)                          |
| `--str-chat__message-input-tools-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button)      |
| `--str-chat__message-input-tools-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button)      |
| `--str-chat__message-input-tools-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the tool buttons of the message input (such as attachment upload button)                     |
| `--str-chat__message-input-not-allowed-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | Thex text color of the message that is displayed when the use can't send messages                                  |
| `--str-chat__cooldown-border-radius`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the cooldown timer                                                       |
| `--str-chat__cooldown-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>          | The text/icon color of the cooldown timer                                                                          |
| `--str-chat__cooldown-background-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The background color of the cooldown timer                                                                         |
| `--str-chat__cooldown-border-block-start`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the cooldown timer                                                                                   |
| `--str-chat__cooldown-border-block-end`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the cooldown timer                                                                                |
| `--str-chat__cooldown-border-inline-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the cooldown timer                                                            |
| `--str-chat__cooldown-border-inline-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the cooldown timer                                                            |
| `--str-chat__cooldown-box-shadow`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the cooldown timer                                                                           |

Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-theme.scss)

### Layout variables

| Name                                             | Value(s)                                                                  | Description                                           |
| ------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------- |
| `--str-chat__dropzone-container-backdrop-filter` | <table><tr><th>`.str-chat`</th></tr><tr><td>`blur(3px)`</td></tr></table> | The backdrop filter applied to the dropzone container |

Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageInput/MessageInput-layout.scss)

## MessageList

### Theme variables

| Name                                                               | Value(s)                                                                                                                   | Description                                                                                |
| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `--str-chat__message-list-border-radius`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                          | The border radius used for the borders of the component                                    |
| `--str-chat__message-list-color`                                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                | The text/icon color of the component                                                       |
| `--str-chat__message-list-background-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>                          | The background color of the component                                                      |
| `--str-chat__message-list-box-shadow`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Box shadow applied to the component                                                        |
| `--str-chat__message-list-border-block-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Top border of the component                                                                |
| `--str-chat__message-list-border-block-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Bottom border of the component                                                             |
| `--str-chat__message-list-border-inline-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Left (right in RTL layout) border of the component                                         |
| `--str-chat__message-list-border-inline-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Right (left in RTL layout) border of the component                                         |
| `--str-chat__jump-to-latest-message-border-radius`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-border-radius)`</td></tr></table>                  | The border radius used for the borders of the jump to latest message button                |
| `--str-chat__jump-to-latest-message-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-color)`</td></tr></table>                          | The text/icon color of the jump to latest message button                                   |
| `--str-chat__jump-to-latest-message-background-color`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-background-color)`</td></tr></table>               | The background color of the jump to latest message button                                  |
| `--str-chat__jump-to-latest-message-pressed-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-pressed-background-color )`</td></tr></table>     | The background color of the jump to latest message button in pressed state                 |
| `--str-chat__jump-to-latest-message-box-shadow`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-box-shadow)`</td></tr></table>                     | Box shadow applied to the jump to latest message button                                    |
| `--str-chat__jump-to-latest-message-border-block-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-border-block-start )`</td></tr></table>           | Top border of the jump to latest message button                                            |
| `--str-chat__jump-to-latest-message-border-block-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-border-block-end)`</td></tr></table>               | Bottom border of the jump to latest message button                                         |
| `--str-chat__jump-to-latest-message-border-inline-start`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-border-inline-start )`</td></tr></table>          | Left (right in RTL layout) border of the jump to latest message button                     |
| `--str-chat__jump-to-latest-message-border-inline-end`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-border-inline-end )`</td></tr></table>            | Right (left in RTL layout) border of the jump to latest message button                     |
| `--str-chat__jump-to-latest-message-unread-count-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__jump-to-latest-message-color )`</td></tr></table>            | The background color of the unread messages count on the jump to latest message button     |
| `--str-chat__jump-to-latest-message-unread-count-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__jump-to-latest-message-background-color )`</td></tr></table> | The text/icon color of the unread messages count on the jump to latest message button      |
| `--str-chat__thread-head-start-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                   | The color used for displaying thread replies and thread separator at the start of a thread |
| `--str-chat__thread-head-start-border-block-end-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                             | The color used for the separator below the first message in a thread                       |

Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageList/MessageList-theme.scss)

## VirtualizedMessageList - Only available in React SDK

### Theme variables

| Name                                           | Value(s)                                                                                          | Description                                             |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__virtual-list-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                 | The border radius used for the borders of the component |
| `--str-chat__virtual-list-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>       | The text/icon color of the component                    |
| `--str-chat__virtual-list-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table> | The background color of the component                   |
| `--str-chat__virtual-list-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Box shadow applied to the component                     |
| `--str-chat__virtual-list-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Top border of the component                             |
| `--str-chat__virtual-list-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Bottom border of the component                          |
| `--str-chat__virtual-list-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Left (right in RTL layout) border of the component      |
| `--str-chat__virtual-list-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Right (left in RTL layout) border of the component      |

Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)

## MessageReactions

### Theme variables

| Name                                                | Value(s)                                                                                                              | Description                                                                        |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| `--str-chat__message-reactions-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | The border radius used for the borders of the component                            |
| `--str-chat__message-reactions-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                           | The text/icon color of the component                                               |
| `--str-chat__message-reactions-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                           | The background color of the component                                              |
| `--str-chat__message-reactions-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Top border of the component                                                        |
| `--str-chat__message-reactions-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Bottom border of the component                                                     |
| `--str-chat__message-reactions-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Left (right in RTL layout) border of the component                                 |
| `--str-chat__message-reactions-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Right (left in RTL layout) border of the component                                 |
| `--str-chat__message-reactions-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Box shadow applied to the component                                                |
| `--str-chat__message-reaction-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>                     | The border radius used for the borders of a message reaction                       |
| `--str-chat__message-reaction-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                           | The text/icon color of a message reaction                                          |
| `--str-chat__message-reaction-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>               | The background color of a message reaction                                         |
| `--str-chat__message-reaction-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Top border of a message reaction                                                   |
| `--str-chat__message-reaction-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Bottom border of a message reaction                                                |
| `--str-chat__message-reaction-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Left (right in RTL layout) border of a message reaction                            |
| `--str-chat__message-reaction-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Right (left in RTL layout) border of a message reaction                            |
| `--str-chat__message-reaction-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Box shadow applied to a message reaction                                           |
| `--str-chat__own-message-reaction-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                           | The text/icon color of a message reaction, if the user reacted with that reaction  |
| `--str-chat__own-message-reaction-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-surface-color-low-emphasis )`</td></tr></table> | The background color of a message reaction, if the user reacted with that reaction |

Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)

## MessageReactionsSelector

### Theme variables

| Name                                                             | Value(s)                                                                                                      | Description                                             |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__message-reactions-options-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>         | The border radius used for the borders of the component |
| `--str-chat__message-reactions-options-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                    |
| `--str-chat__message-reactions-options-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component                   |
| `--str-chat__message-reactions-options-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                             |
| `--str-chat__message-reactions-options-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                          |
| `--str-chat__message-reactions-options-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component      |
| `--str-chat__message-reactions-options-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
| `--str-chat__message-reactions-options-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>     | Box shadow applied to the component                     |
| `--str-chat__message-reactions-option-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>             | The border radius used for the borders of the component |
| `--str-chat__message-reactions-option-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                    |
| `--str-chat__message-reactions-option-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component                   |
| `--str-chat__message-reactions-option-hover-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-surface-color )`</td></tr></table>      | The background color of the component when hovered      |
| `--str-chat__message-reactions-option-selected-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-color-low-emphasis )`</td></tr></table> | The background color of the component when selected     |
| `--str-chat__message-reactions-option-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                             |
| `--str-chat__message-reactions-option-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                          |
| `--str-chat__message-reactions-option-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component      |
| `--str-chat__message-reactions-option-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
| `--str-chat__message-reactions-option-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                     |

Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)

## Modal

### Theme variables

| Name                                        | Value(s)                                                                                                    | Description                                                                                                      |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `--str-chat__modal-border-radius`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>           | The border radius used for the borders of the content area of the component of the content area of the component |
| `--str-chat__modal-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the content area of the component                                                         |
| `--str-chat__modal-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the content area of the component                                                        |
| `--str-chat__modal-overlay-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table>    | The overlay color of the component                                                                               |
| `--str-chat__modal-overlay-backdrop-filter` | <table><tr><th>`.str-chat`</th></tr><tr><td>`blur(3px)`</td></tr></table>                                   | The backdrop filter applied to the component                                                                     |
| `--str-chat__modal-border-block-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the content area of the component                                                                  |
| `--str-chat__modal-border-block-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the content area of the component                                                               |
| `--str-chat__modal-border-inline-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the content area of the component                                           |
| `--str-chat__modal-border-inline-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the content area of the component                                           |
| `--str-chat__modal-box-shadow`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the content area of the component                                                          |
| `--str-chat__modal-close-icon-background`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The background color of the close button                                                                         |
| `--str-chat__modal-close-icon-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>          | The icon color of the close button                                                                               |

Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Modal/Modal-theme.scss)

## MessageNotification - Only available in React SDK

### Theme variables

| Name                                                   | Value(s)                                                                                          | Description                                             |
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__message-notification-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>    | The background color of the component                   |
| `--str-chat__message-notification-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Top border of the component                             |
| `--str-chat__message-notification-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Bottom border of the component                          |
| `--str-chat__message-notification-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Left (right in RTL layout) border of the component      |
| `--str-chat__message-notification-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Right (left in RTL layout) border of the component      |
| `--str-chat__message-notification-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`50px`</td></tr></table>                              | The border radius used for the borders of the component |
| `--str-chat__message-notification-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Box shadow applied to the component                     |
| `--str-chat__message-notification-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table> | The text/icon color of the component                    |

Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)

## Notification

### Theme variables

| Name                                           | Value(s)                                                                                                         | Description                                             |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__notification-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>                | The border radius used for the borders of the component |
| `--str-chat__notification-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__opaque-surface-text-color)`</td></tr></table>       | The text/icon color of the component                    |
| `--str-chat__notification-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__opaque-surface-background-color)`</td></tr></table> | The background color of the component                   |
| `--str-chat__notification-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Top border of the component                             |
| `--str-chat__notification-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Bottom border of the component                          |
| `--str-chat__notification-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Left (right in RTL layout) border of the component      |
| `--str-chat__notification-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Right (left in RTL layout) border of the component      |
| `--str-chat__notification-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>        | Box shadow applied to the component                     |

Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Notification/Notification-theme.scss)

## NotificationList

### Theme variables

| Name                                                | Value(s)                                                                                                      | Description                                             |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__notification-list-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | The border radius used for the borders of the component |
| `--str-chat__notification-list-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__notification-list-text-color)`</td></tr></table> | The text/icon color of the component                    |
| `--str-chat__notification-list-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the component                   |
| `--str-chat__notification-list-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                             |
| `--str-chat__notification-list-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                          |
| `--str-chat__notification-list-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component      |
| `--str-chat__notification-list-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
| `--str-chat__notification-list-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                     |

Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/NotificationList/NotificationList-theme.scss)

## Thread

### Theme variables

| Name                                            | Value(s)                                                                                                    | Description                                                                    |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| `--str-chat__thread-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of the component                        |
| `--str-chat__thread-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                           |
| `--str-chat__thread-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                          |
| `--str-chat__thread-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                    |
| `--str-chat__thread-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                                 |
| `--str-chat__thread-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Left (right in RTL layout) border of the component                             |
| `--str-chat__thread-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                             |
| `--str-chat__thread-box-shadow`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                            |
| `--str-chat__thread-header-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of the thread header                    |
| `--str-chat__thread-header-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the thread header                                       |
| `--str-chat__thread-header-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the thread header                                      |
| `--str-chat__thread-header-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the thread header                                                |
| `--str-chat__thread-header-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the thread header                                             |
| `--str-chat__thread-header-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the thread header                         |
| `--str-chat__thread-header-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the thread header                         |
| `--str-chat__thread-header-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the thread header                                        |
| `--str-chat__thread-header-info-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used to display less emphasized text in the channel header |

Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Thread/Thread-theme.scss)

## Tooltip

### Theme variables

| Name                                      | Value(s)                                                                                                    | Description                                             |
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `--str-chat__tooltip-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>           | The border radius used for the borders of the component |
| `--str-chat__tooltip-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                    |
| `--str-chat__tooltip-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                   |
| `--str-chat__tooltip-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                             |
| `--str-chat__tooltip-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                          |
| `--str-chat__tooltip-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component      |
| `--str-chat__tooltip-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component      |
| `--str-chat__tooltip-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 20px var(--str-chat__box-shadow-color)`</td></tr></table>  | Box shadow applied to the component                     |

Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/Tooltip/Tooltip-theme.scss)

## TypingIndicator

### Theme variables

| Name                                                | Value(s)                                                                                                 | Description                                                   |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| `--str-chat__typing-indicator-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | The border radius used for the borders of the component       |
| `--str-chat__typing-indicator-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text/icon color of the component                          |
| `--str-chat__typing-indicator-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__overlay-color)`</td></tr></table>           | The background color of the component                         |
| `--str-chat__typing-indicator-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Top border of the component                                   |
| `--str-chat__typing-indicator-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Bottom border of the component                                |
| `--str-chat__typing-indicator-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Left (right in RTL layout) border of the component            |
| `--str-chat__typing-indicator-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component            |
| `--str-chat__typing-indicator-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                           |
| `--str-chat__typing-indicator-dot-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>              | Background color of the animated dots in the typing indicator |

Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v3.5.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)