@sendbird/uikit-react/dist/index.css

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap');
.sendbird-word {
  display: inline;
  height: -moz-fit-content;
  height: fit-content;
}

.sendbird-word__url {
  display: inline;
  color: inherit;
  word-break: break-all;
}
.sendbird-openchannel-conversation-header {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
}

.sendbird-theme--light .sendbird-openchannel-conversation-header {
  border-bottom: 1px solid var(--sendbird-light-onlight-04);
}

.sendbird-theme--dark .sendbird-openchannel-conversation-header {
  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
}

.sendbird-openchannel-conversation-header .sendbird-openchannel-conversation-header__left__title {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 120px);
}

.sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
  position: absolute;
  top: 16px;
}

[dir="ltr"] .sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
  left: 20px;
}

[dir="rtl"] .sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
  right: 20px;
}

.sendbird-openchannel-conversation-header__left__title {
  position: absolute;
  top: 12px;
}

[dir="ltr"] .sendbird-openchannel-conversation-header__left__title {
  left: 60px;
}

[dir="rtl"] .sendbird-openchannel-conversation-header__left__title {
  right: 60px;
}

.sendbird-openchannel-conversation-header__left__sub-title {
  position: absolute;
  top: 36px;
}

[dir="ltr"] .sendbird-openchannel-conversation-header__left__sub-title {
  left: 60px;
}

[dir="rtl"] .sendbird-openchannel-conversation-header__left__sub-title {
  right: 60px;
}

.sendbird-openchannel-conversation-header__right {
  position: absolute;
  top: 0px;
  width: 64px;
  height: 64px;
}

[dir="ltr"] .sendbird-openchannel-conversation-header__right {
  right: 0px;
}

[dir="rtl"] .sendbird-openchannel-conversation-header__right {
  left: 0px;
}

.sendbird-openchannel-conversation-header__right__trigger {
  position: absolute;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir="ltr"] .sendbird-openchannel-conversation-header__right__trigger {
  right: 16px;
}

[dir="rtl"] .sendbird-openchannel-conversation-header__right__trigger {
  left: 16px;
}

.sendbird-openchannel-conversation-header__left__cover-image--icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.sendbird-theme--light .sendbird-openchannel-conversation-header__left__cover-image--icon {
  background-color: var(--sendbird-light-background-300);
}

.sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
  background-color: var(--sendbird-dark-background-300);
}
.sendbird-open-channel-preview {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  width: 264px;
  height: 58px;
  min-width: 264px;
  min-height: 58px;
  box-sizing: border-box;
}

.sendbird--mobile-mode .sendbird-open-channel-preview {
  width: 100%;
}

.sendbird-theme--light .sendbird-open-channel-preview {
  background-color: var(--sendbird-light-background-50);
  border-bottom: solid 1px var(--sendbird-light-onlight-04);
}

.sendbird-theme--dark .sendbird-open-channel-preview {
  background-color: var(--sendbird-dark-background-600);
  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
}

.sendbird-theme--light .sendbird-open-channel-preview:hover {
  background-color: var(--sendbird-light-background-100);
}

.sendbird-theme--dark .sendbird-open-channel-preview:hover {
  background-color: var(--sendbird-dark-background-500);
}

.sendbird-theme--light .sendbird-open-channel-preview.selected {
  background-color: var(--sendbird-light-primary-100);
}

[dir="ltr"] .sendbird-theme--light .sendbird-open-channel-preview.selected {
  border-left: solid 4px var(--sendbird-light-primary-300);
}

[dir="rtl"] .sendbird-theme--light .sendbird-open-channel-preview.selected {
  border-right: solid 4px var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-open-channel-preview.selected {
  background-color: var(--sendbird-dark-primary-300);
}

[dir="ltr"] .sendbird-theme--dark .sendbird-open-channel-preview.selected {
  border-left: solid 4px var(--sendbird-dark-primary-200);
}

[dir="rtl"] .sendbird-theme--dark .sendbird-open-channel-preview.selected {
  border-right: solid 4px var(--sendbird-dark-primary-200);
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
  position: relative;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
}

[dir="ltr"] .sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
  margin-left: 16px;
}

[dir="rtl"] .sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
  margin-right: 16px;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar,
.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar--default {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context {
  position: relative;
  margin-top: 8px;
  display: inline-flex;
  flex-direction: column;
  width: calc(100% - 100px);
  box-sizing: border-box;
}

[dir="ltr"] .sendbird-open-channel-preview .sendbird-open-channel-preview__context {
  margin-left: 16px;
}

[dir="rtl"] .sendbird-open-channel-preview .sendbird-open-channel-preview__context {
  margin-right: 16px;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 16px;
  box-sizing: border-box;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
  position: relative;
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  overflow-x: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
  overflow-y: hidden;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name.frozen {
  max-width: calc(100% - 20px);
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
  position: relative;
  display: inline-flex;
}

[dir="ltr"] .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
  margin-left: 4px;
}

[dir="rtl"] .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
  margin-right: 4px;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants {
  position: relative;
  margin-top: 8px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 14px;
  box-sizing: border-box;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
}

.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
  position: relative;
  display: inline-flex;
  width: 160px;
  max-width: 160px;
  height: 12px;
  box-sizing: border-box;
  overflow-x: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

[dir="ltr"] .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
  margin-left: 4px;
}

[dir="rtl"] .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
  margin-right: 4px;
}

.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
  overflow-y: hidden;
}
.sendbird-message-item-menu__list__menu-item:focus-visible {
  outline: none;
}
.sendbird-create-open-channel-ui {
  position: relative;
  display: inline-flex;
}

.sendbird-create-open-channel-ui__profile-input {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section {
  position: relative;
  margin-top: 16px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.sendbird-theme--light .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
  background-color: var(--sendbird-light-background-200);
}

.sendbird-theme--dark .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
  background-color: var(--sendbird-dark-background-400);
}

.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
  position: relative;
  display: inline-flex;
}

[dir="ltr"] .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
  margin-left: 18px;
}

[dir="rtl"] .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
  margin-right: 18px;
}

.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__name-section {
  position: relative;
  margin-top: 8px;
  display: inline-flex;
  flex-direction: row;
}
.sendbird-open-channel-list,
.sendbird-open-channel-list-ui {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 256px;
  min-width: 256px;
  height: 100%;
  box-sizing: border-box;
}

.sendbird--mobile-mode .sendbird-open-channel-list,
.sendbird--mobile-mode .sendbird-open-channel-list-ui {
  width: 100%;
}

[dir="ltr"] .sendbird-theme--light .sendbird-open-channel-list,
[dir="ltr"] .sendbird-theme--light .sendbird-open-channel-list-ui {
  border-right: solid 1px var(--sendbird-light-onlight-04);
}

[dir="rtl"] .sendbird-theme--light .sendbird-open-channel-list,
[dir="rtl"] .sendbird-theme--light .sendbird-open-channel-list-ui {
  border-left: solid 1px var(--sendbird-light-onlight-04);
}

[dir="ltr"] .sendbird-theme--dark .sendbird-open-channel-list,
[dir="ltr"] .sendbird-theme--dark .sendbird-open-channel-list-ui {
  border-right: solid 1px var(--sendbird-dark-ondark-04);
}

[dir="rtl"] .sendbird-theme--dark .sendbird-open-channel-list,
[dir="rtl"] .sendbird-theme--dark .sendbird-open-channel-list-ui {
  border-left: solid 1px var(--sendbird-dark-ondark-04);
}

.sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 64px;
  box-sizing: border-box;
}

.sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
.sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
  background-color: var(--sendbird-light-background-50);
  border-bottom: solid 1px var(--sendbird-light-onlight-04);
}

.sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
.sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
  background-color: var(--sendbird-dark-background-600);
  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
}

.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

[dir="ltr"] .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
[dir="ltr"] .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
  margin-left: 24px;
}

[dir="rtl"] .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
[dir="rtl"] .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
  margin-right: 24px;
}

.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
  position: absolute;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

[dir="ltr"] .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
[dir="ltr"] .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
  right: 56px;
}

[dir="rtl"] .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
[dir="rtl"] .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
  left: 56px;
}

.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
  position: absolute;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

[dir="ltr"] .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
[dir="ltr"] .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
  right: 16px;
}

[dir="rtl"] .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
[dir="rtl"] .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
  left: 16px;
}

.sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 64px);
  box-sizing: border-box;
  overflow-y: scroll;
}

.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
  position: relative;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
  background-color: var(--sendbird-light-background-100);
}

.sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
  background-color: var(--sendbird-dark-background-500);
}

:root {
  --sendbird-light-primary-500: #491389;
  --sendbird-light-primary-400: #6211c8;
  --sendbird-light-primary-300: #742ddd;
  --sendbird-light-primary-200: #c2a9fa;
  --sendbird-light-primary-100: #dbd1ff;
  --sendbird-light-secondary-500: #066858;
  --sendbird-light-secondary-400: #027d69;
  --sendbird-light-secondary-300: #259c72;
  --sendbird-light-secondary-200: #69c085;
  --sendbird-light-secondary-100: #a8e2ab;
  --sendbird-light-information-100: #adc9ff;
  --sendbird-highlight-100: #fff2b6;
  --sendbird-light-error-500: #9d091e;
  --sendbird-light-error-400: #bf0711;
  --sendbird-light-error-300: #de360b;
  --sendbird-light-error-200: #f66161;
  --sendbird-light-error-100: #fdaaaa;
  --sendbird-light-background-700: #000000;
  --sendbird-light-background-600: #161616;
  --sendbird-light-background-500: #2C2C2C;
  --sendbird-light-background-400: #393939;
  --sendbird-light-background-300: #bdbdbd;
  --sendbird-light-background-200: #e0e0e0;
  --sendbird-light-background-100: #eeeeee;
  --sendbird-light-background-50: #FFFFFF;
  --sendbird-light-overlay-01: rgba(0, 0, 0, 0.55);
  --sendbird-light-overlay-02: rgba(0, 0, 0, 0.32);
  --sendbird-light-onlight-01: rgba(0, 0, 0, 0.88);
  --sendbird-light-onlight-02: rgba(0, 0, 0, 0.50);
  --sendbird-light-onlight-03: rgba(0, 0, 0, 0.38);
  --sendbird-light-onlight-04: rgba(0, 0, 0, 0.12);
  --sendbird-light-ondark-01: rgba(255, 255, 255, 0.88);
  --sendbird-light-ondark-02: rgba(255, 255, 255, 0.50);
  --sendbird-light-ondark-03: rgba(255, 255, 255, 0.38);
  --sendbird-light-ondark-04: rgba(255, 255, 255, 0.12);
  --sendbird-light-shadow-01: 0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12);
  --sendbird-light-shadow-02: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12);
  --sendbird-light-shadow-03: 0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12);
  --sendbird-light-shadow-04: 0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12);
  --sendbird-light-shadow-05: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 6px 0 rgba(0, 0, 0, 0.12);
  --sendbird-light-shadow-message-input: 0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

:root {
  --sendbird-dark-primary-500: #491389;
  --sendbird-dark-primary-400: #6211c8;
  --sendbird-dark-primary-300: #742ddd;
  --sendbird-dark-primary-200: #c2a9fa;
  --sendbird-dark-primary-100: #dbd1ff;
  --sendbird-dark-secondary-500: #066858;
  --sendbird-dark-secondary-400: #027d69;
  --sendbird-dark-secondary-300: #259c72;
  --sendbird-dark-secondary-200: #69c085;
  --sendbird-dark-secondary-100: #a8e2ab;
  --sendbird-dark-information-100: #adc9ff;
  --sendbird-highlight-100: #fff2b6;
  --sendbird-dark-error-500: #9d091e;
  --sendbird-dark-error-400: #bf0711;
  --sendbird-dark-error-300: #de360b;
  --sendbird-dark-error-200: #f66161;
  --sendbird-dark-error-100: #fdaaaa;
  --sendbird-dark-background-700: #000000;
  --sendbird-dark-background-600: #161616;
  --sendbird-dark-background-500: #2C2C2C;
  --sendbird-dark-background-400: #393939;
  --sendbird-dark-background-300: #bdbdbd;
  --sendbird-dark-background-200: #e0e0e0;
  --sendbird-dark-background-100: #eeeeee;
  --sendbird-dark-background-50: #FFFFFF;
  --sendbird-dark-overlay-01: rgba(0, 0, 0, 0.55);
  --sendbird-dark-overlay-02: rgba(0, 0, 0, 0.32);
  --sendbird-dark-onlight-01: rgba(0, 0, 0, 0.88);
  --sendbird-dark-onlight-02: rgba(0, 0, 0, 0.50);
  --sendbird-dark-onlight-03: rgba(0, 0, 0, 0.38);
  --sendbird-dark-onlight-04: rgba(0, 0, 0, 0.12);
  --sendbird-dark-ondark-01: rgba(255, 255, 255, 0.88);
  --sendbird-dark-ondark-02: rgba(255, 255, 255, 0.50);
  --sendbird-dark-ondark-03: rgba(255, 255, 255, 0.38);
  --sendbird-dark-ondark-04: rgba(255, 255, 255, 0.12);
  --sendbird-dark-shadow-01: 0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12);
  --sendbird-dark-shadow-02: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12);
  --sendbird-dark-shadow-03: 0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12);
  --sendbird-dark-shadow-04: 0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12);
  --sendbird-light-shadow-05: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 6px 0 rgba(0, 0, 0, 0.12);
  --sendbird-dark-shadow-message-input: 0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

:root {
  --sendbird-iconbutton-color: #825eeb;
  --sendbird-message-input-border-active: #7B53EF;
  --sendbird-selected-reaction-button-border-hover: #9E8CF5;
  --sendbird-add-reaction-button-border-hover: #9E8CF5;
  --sendbird-tooltip-background: #000000;
  --sendbird-tooltip-text-color: rgba(255, 255, 255, 0.88);
  --sendbird-button-border-focus: #FFFFFF;
  --sendbird-file-message-icon-background: #FFFFFF;
  --sendbird-font-family-default: "Roboto", sans-serif;
  --sendbird-message-balloon-width: 404px;
}

.sendbird-message-content .sendbird-avatar-img {
  top: 50%;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-message-content .sendbird-avatar-img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-message-content .sendbird-avatar-img {
  right: 50%;
  transform: translate(50%, -50%);
}

.sendbird-message-content .sendbird-voice-message-item-body__playback-time {
  position: absolute;
  top: 15px;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-message-content .sendbird-voice-message-item-body__playback-time {
  right: 12px;
  left: unset;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-message-content .sendbird-voice-message-item-body__playback-time {
  left: 12px;
  right: unset;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-message-content .sendbird-reaction-badge__inner {
  padding-left: 20px;
  padding-right: 4px;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-message-content .sendbird-reaction-badge__inner {
  padding-right: 20px;
  padding-left: 4px;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-message-content .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
  left: 4px;
  right: unset;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-message-content .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
  right: 4px;
  left: unset;
}

.sendbird-thread-list-item-content .sendbird-avatar-img {
  top: 50%;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-thread-list-item-content .sendbird-avatar-img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-thread-list-item-content .sendbird-avatar-img {
  right: 50%;
  transform: translate(50%, -50%);
}

.sendbird-thread-list-item-content .sendbird-voice-message-item-body__playback-time {
  position: absolute;
  top: 15px;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-thread-list-item-content .sendbird-voice-message-item-body__playback-time {
  right: 12px;
  left: unset;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-thread-list-item-content .sendbird-voice-message-item-body__playback-time {
  left: 12px;
  right: unset;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-thread-list-item-content .sendbird-reaction-badge__inner {
  padding-left: 20px;
  padding-right: 4px;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-thread-list-item-content .sendbird-reaction-badge__inner {
  padding-right: 20px;
  padding-left: 4px;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-thread-list-item-content .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
  left: 4px;
  right: unset;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-thread-list-item-content .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
  right: 4px;
  left: unset;
}

.sendbird-parent-message-info .sendbird-avatar-img {
  top: 50%;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-parent-message-info .sendbird-avatar-img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-parent-message-info .sendbird-avatar-img {
  right: 50%;
  transform: translate(50%, -50%);
}

.sendbird-parent-message-info .sendbird-voice-message-item-body__playback-time {
  position: absolute;
  top: 15px;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-parent-message-info .sendbird-voice-message-item-body__playback-time {
  right: 12px;
  left: unset;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-parent-message-info .sendbird-voice-message-item-body__playback-time {
  left: 12px;
  right: unset;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-parent-message-info .sendbird-reaction-badge__inner {
  padding-left: 20px;
  padding-right: 4px;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-parent-message-info .sendbird-reaction-badge__inner {
  padding-right: 20px;
  padding-left: 4px;
}

.sendbird-conversation__messages[dir="ltr"] .sendbird-parent-message-info .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
  left: 4px;
  right: unset;
}

.sendbird-conversation__messages[dir="rtl"] .sendbird-parent-message-info .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
  right: 4px;
  left: unset;
}
.sendbird-experimental__rem__units .sendbird-label--h-1 {
  font-size: 1.25rem;
}

.sendbird-experimental__rem__units .sendbird-label--h-2 {
  font-size: 1.125rem;
}

.sendbird-experimental__rem__units .sendbird-label--subtitle-1 {
  font-size: 1rem;
}

.sendbird-experimental__rem__units .sendbird-label--subtitle-2 {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-label--body-1 {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-label--body-2 {
  font-size: 0.75rem;
}

.sendbird-experimental__rem__units .sendbird-label--button-1 {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-label--button-2 {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-label--caption-1 {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-label--caption-2 {
  font-size: 0.75rem;
}

.sendbird-experimental__rem__units .sendbird-label--caption-3 {
  font-size: 0.75rem;
}

.sendbird-experimental__rem__units .sendbird-message-search-pannel .sendbird-message-search-pannel__input__container__input-area {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-checkbox {
  font-size: 1.375rem;
}

.sendbird-experimental__rem__units .sendbird-mention-user-label {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-mention-user-label.purple {
  font-size: 1.125rem;
}

.sendbird-experimental__rem__units .sendbird-message-input .sendbird-message-input--textarea,
.sendbird-experimental__rem__units .sendbird-message-input .sendbird-message-input--placeholder {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-input .sendbird-input__input,
.sendbird-experimental__rem__units .sendbird-input .sendbird-input__placeholder {
  font-size: 0.875rem;
}

.sendbird-experimental__rem__units .sendbird-tooltip__text {
  font-size: 0.75rem;
}

.sendbird-experimental__rem__units .sendbird-quote-message .sendbird-quote-message__replied-to .sendbird-quote-message__replied-to__text {
  font-size: 0.75rem;
}

.sendbird-experimental__rem__units .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__text-message {
  font-size: 0.75rem;
}

.sendbird-experimental__rem__units .sendbird-quote-message .sendbird-quote-message__replied-message__file-message {
  font-size: 0.75rem;
}
.sendbird-modal--full-mobile .sendbird-modal__content {
  width: 100vw;
  max-width: 100%;
  height: 100%;
}

.sendbird-modal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir="ltr"] .sendbird-modal {
  left: 0;
}

[dir="rtl"] .sendbird-modal {
  right: 0;
}

.sendbird-modal__backdrop--clickoutside {
  cursor: pointer;
}

.sendbird-modal__content {
  width: 480px;
  border-radius: 4px;
  z-index: 10001;
  padding: 18px 24px 24px 24px;
  position: relative;
  box-sizing: border-box;
}

.sendbird-theme--light .sendbird-modal__content {
  background-color: var(--sendbird-light-background-50);
  box-shadow: var(--sendbird-light-shadow-04);
}

.sendbird-theme--dark .sendbird-modal__content {
  background-color: var(--sendbird-dark-background-500);
  box-shadow: var(--sendbird-dark-shadow-04);
}

.sendbird-modal__content .sendbird-modal__close {
  position: absolute;
  top: 16px;
  cursor: pointer;
}

[dir="ltr"] .sendbird-modal__content .sendbird-modal__close {
  right: 16px;
}

[dir="rtl"] .sendbird-modal__content .sendbird-modal__close {
  left: 16px;
}

.sendbird-theme--light .sendbird-modal__content .sendbird-modal__close path {
  fill: var(--sendbird-light-onlight-01);
}

.sendbird-theme--dark .sendbird-modal__content .sendbird-modal__close path {
  fill: var(--sendbird-dark-ondark-01);
}

.sendbird-modal__content .sendbird-modal__header {
  margin-bottom: 16px;
}

.sendbird-modal__content .sendbird-modal__body {
  height: calc(100% - 116px);
  overflow: auto;
}

.sendbird-modal__content .sendbird-modal__footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 32px;
}

[dir="ltr"] .sendbird-modal__content .sendbird-modal__footer {
  text-align: right;
}

[dir="rtl"] .sendbird-modal__content .sendbird-modal__footer {
  text-align: left;
}

.sendbird--mobile-mode .sendbird-modal__content .sendbird-modal__footer {
  position: sticky;
  bottom: 24px;
}

.sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
  min-width: 80px;
  height: 40px;
}

[dir="ltr"] .sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
  margin-left: 8px;
}

[dir="rtl"] .sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
  margin-right: 8px;
}

.sendbird-modal__backdrop {
  position: fixed;
  z-index: 10000;
  height: 100%;
  width: 100%;
  top: 0;
}

[dir="ltr"] .sendbird-modal__backdrop {
  left: 0;
}

[dir="rtl"] .sendbird-modal__backdrop {
  right: 0;
}

.sendbird-theme--light .sendbird-modal__backdrop {
  background-color: var(--sendbird-light-overlay-02);
}

.sendbird-theme--dark .sendbird-modal__backdrop {
  background-color: var(--sendbird-dark-overlay-02);
}
.sendbird-iconbutton {
  color: var(--sendbird-iconbutton-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  background-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0px;
}

.sendbird-iconbutton .sendbird-iconbutton__inner {
  height: 100%;
}

.sendbird-theme--light .sendbird-iconbutton .sendbird-iconbutton__inner svg {
  fill: var(--sendbird-light-onlight-01);
}

.sendbird-theme--dark .sendbird-iconbutton .sendbird-iconbutton__inner svg {
  fill: var(--sendbird-dark-ondark-01);
}

.sendbird-theme--light .sendbird-iconbutton:hover {
  background-color: var(--sendbird-light-background-100);
}

.sendbird-theme--dark .sendbird-iconbutton:hover {
  background-color: var(--sendbird-dark-background-500);
}

.sendbird-theme--light .sendbird-iconbutton:active {
  background-color: var(--sendbird-light-background-200);
}

.sendbird-theme--dark .sendbird-iconbutton:active {
  background-color: var(--sendbird-dark-background-400);
}

.sendbird-iconbutton:disabled {
  cursor: not-allowed !important;
}

.sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
  fill: var(--sendbird-light-onlight-02);
}

.sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
  fill: var(--sendbird-dark-ondark-02);
}

.sendbird-theme--light .sendbird-iconbutton--pressed {
  background-color: var(--sendbird-light-primary-100);
}

.sendbird-theme--dark .sendbird-iconbutton--pressed {
  background-color: var(--sendbird-dark-background-700);
}
.sendbird-button {
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--sendbird-font-family-default);
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.sendbird-button:hover {
  box-shadow: none;
}

.sendbird-button:focus {
  outline: none;
}

.sendbird-button:active {
  box-shadow: none;
}

.sendbird-button.sendbird-button__disabled {
  cursor: not-allowed;
}

.sendbird-theme--light .sendbird-button.sendbird-button__disabled {
  background-color: var(--sendbird-light-background-200);
  border: none;
}

.sendbird-theme--dark .sendbird-button.sendbird-button__disabled {
  background-color: var(--sendbird-dark-background-400);
  border: none;
}

.sendbird-theme--light .sendbird-button.sendbird-button__disabled:hover {
  background-color: var(--sendbird-light-background-200);
}

.sendbird-theme--dark .sendbird-button.sendbird-button__disabled:hover {
  background-color: var(--sendbird-dark-background-400);
}

.sendbird-button--big {
  height: 40px;
}

.sendbird-button--big .sendbird-button__text {
  margin: 10px 16px;
}

.sendbird-button--small {
  height: 32px;
}

.sendbird-button--small .sendbird-button__text {
  margin: 6px 16px;
}

.sendbird-theme--light .sendbird-button--primary {
  background-color: var(--sendbird-light-primary-300);
  border: 1px solid var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--primary {
  background-color: var(--sendbird-dark-primary-200);
  border: 1px solid var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-button--primary .sendbird-button__text {
  color: var(--sendbird-light-ondark-01);
}

.sendbird-theme--dark .sendbird-button--primary .sendbird-button__text {
  color: var(--sendbird-dark-onlight-01);
}

.sendbird-theme--light .sendbird-button--primary:hover {
  background-color: var(--sendbird-light-primary-400);
  border-color: var(--sendbird-light-primary-400);
}

.sendbird-theme--dark .sendbird-button--primary:hover {
  background-color: var(--sendbird-dark-primary-300);
  border-color: var(--sendbird-dark-primary-300);
}

.sendbird-theme--light .sendbird-button--primary:focus {
  border: 1px solid var(--sendbird-button-border-focus);
  box-shadow: 0 0 0 2px var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--primary:focus {
  border: 1px solid var(--sendbird-button-border-focus);
  box-shadow: 0 0 0 2px var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-button--primary:active {
  background-color: var(--sendbird-light-primary-500);
}

.sendbird-theme--dark .sendbird-button--primary:active {
  background-color: var(--sendbird-dark-primary-400);
}

.sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:hover {
  box-shadow: 0 0 0 2px var(--sendbird-light-primary-400);
}

.sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:hover {
  box-shadow: 0 0 0 2px var(--sendbird-dark-primary-300);
}

.sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:active {
  box-shadow: 0 0 0 2px var(--sendbird-light-primary-500);
}

.sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:active {
  box-shadow: 0 0 0 2px var(--sendbird-dark-primary-400);
}

.sendbird-button--secondary {
  background-color: transparent;
}

.sendbird-theme--light .sendbird-button--secondary {
  border: 1px solid var(--sendbird-light-onlight-03);
}

.sendbird-theme--dark .sendbird-button--secondary {
  border: 1px solid var(--sendbird-dark-ondark-03);
}

.sendbird-theme--light .sendbird-button--secondary .sendbird-button__text {
  color: var(--sendbird-light-onlight-01);
}

.sendbird-theme--dark .sendbird-button--secondary .sendbird-button__text {
  color: var(--sendbird-dark-ondark-01);
}

.sendbird-button--secondary:hover {
  background-color: transparent;
}

.sendbird-theme--light .sendbird-button--secondary:hover {
  border: 1px solid var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--secondary:hover {
  border: 1px solid var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button__text {
  color: var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button__text {
  color: var(--sendbird-dark-primary-200);
}

.sendbird-button--secondary.sendbird-button__disabled {
  border: none;
  cursor: not-allowed;
}

.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled {
  background-color: var(--sendbird-light-background-200);
}

.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled {
  background-color: var(--sendbird-dark-background-400);
}

.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
  color: var(--sendbird-light-onlight-02);
}

.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
  color: var(--sendbird-dark-ondark-02);
}

.sendbird-button--secondary.sendbird-button__disabled:hover {
  border: none;
}

.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover {
  background-color: var(--sendbird-light-background-200);
}

.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover {
  background-color: var(--sendbird-dark-background-400);
}

.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
  color: var(--sendbird-light-onlight-02);
}

.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
  color: var(--sendbird-dark-ondark-02);
}

.sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
  color: var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
  color: var(--sendbird-dark-primary-200);
}

.sendbird-button--secondary:focus {
  background-color: transparent;
  border: 1px solid transparent;
}

.sendbird-theme--light .sendbird-button--secondary:focus {
  box-shadow: var(--sendbird-light-primary-300) 0 0 0 2px;
}

.sendbird-theme--dark .sendbird-button--secondary:focus {
  box-shadow: var(--sendbird-dark-primary-200) 0 0 0 2px;
}

.sendbird-theme--light .sendbird-button--secondary:focus .sendbird-button__text {
  color: var(--sendbird-light-onlight-01);
}

.sendbird-theme--dark .sendbird-button--secondary:focus .sendbird-button__text {
  color: var(--sendbird-dark-ondark-01);
}

.sendbird-button--secondary:active {
  box-shadow: none;
}

.sendbird-theme--light .sendbird-button--secondary:active {
  border: 1px solid var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--secondary:active {
  border: 1px solid var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-button--secondary:active .sendbird-button__text {
  color: var(--sendbird-light-primary-300);
}

.sendbird-theme--dark .sendbird-button--secondary:active .sendbird-button__text {
  color: var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-button--warning {
  background-color: transparent;
  border: 1px solid var(--sendbird-light-error-300);
}

.sendbird-theme--dark .sendbird-button--warning {
  background-color: transparent;
  border: 1px solid var(--sendbird-dark-error-200);
}

.sendbird-theme--light .sendbird-button--warning .sendbird-button__text {
  color: var(--sendbird-light-error-300);
}

.sendbird-theme--dark .sendbird-button--warning .sendbird-button__text {
  color: var(--sendbird-dark-error-200);
}

.sendbird-theme--light .sendbird-button--warning:hover {
  border-color: var(--sendbird-light-error-400);
}

.sendbird-theme--dark .sendbird-button--warning:hover {
  border-color: var(--sendbird-dark-error-100);
}

.sendbird-theme--light .sendbird-button--warning:hover .sendbird-button__text {
  color: var(--sendbird-light-error-400);
}

.sendbird-theme--dark .sendbird-button--warning:hover .sendbird-button__text {
  color: var(--sendbird-dark-error-100);
}

.sendbird-theme--light .sendbird-button--warning:focus {
  border-color: var(--sendbird-light-primary-300);
}

.sendbird-theme--light .sendbird-theme--light .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-light-error-300);
}

.sendbird-theme--dark .sendbird-theme--light .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-dark-error-200);
}

.sendbird-theme--dark .sendbird-button--warning:focus {
  border-color: var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-theme--dark .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-light-error-300);
}

.sendbird-theme--dark .sendbird-theme--dark .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-dark-error-200);
}

.sendbird-theme--light .sendbird-button--warning:hover .sendbird-button--warning:focus {
  border-color: var(--sendbird-light-primary-300);
}

.sendbird-theme--light .sendbird-theme--light .sendbird-button--warning:hover .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-light-error-400);
}

.sendbird-theme--dark .sendbird-theme--light .sendbird-button--warning:hover .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-dark-error-100);
}

.sendbird-theme--dark .sendbird-button--warning:hover .sendbird-button--warning:focus {
  border-color: var(--sendbird-dark-primary-200);
}

.sendbird-theme--light .sendbird-theme--dark .sendbird-button--warning:hover .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-light-error-400);
}

.sendbird-theme--dark .sendbird-theme--dark .sendbird-button--warning:hover .sendbird-button--warning:focus .sendbird-button__text {
  color: var(--sendbird-dark-error-100);
}

.sendbird-theme--light .sendbird-button--danger {
  background-color: var(--sendbird-light-error-300);
  border: 1px solid var(--sendbird-light-error-300);
}

.sendbird-theme--dark .sendbird-button--danger {
  background-color: var(--sendbird-dark-error-200);
  border: 1px solid var(--sendbird-dark-error-200);
}

.sendbird-theme--light .sendbird-button--danger .sendbird-button__text {
  color: var(--sendbird-light-ondark-01);
}

.sendbird-theme--dark .sendbird-button--danger .sendbird-button__text {
  color: var(--sendbird-dark-onlight-01);
}

.sendbird-theme--light .sendbird-button--danger:hover {
  background-color: var(--sendbird-light-error-400);
  border-color: var(--sendbird-light-error-400);
}

.sendbird-theme--dark .sendbird-button--danger:hover {
  background-color: var(--sendbird-dark-error-400);
  border-color: var(--sendbird-dark-error-400);
}

.sendbird-theme--light .sendbird-button--danger:focus {
  border-color: var(--sendbird-button-border-focus);
  box-shadow: 0 0 0 2px var(--sendbird-light-error-300);
}

.sendbird-theme--dark .sendbird-button--danger:focus {
  border-color: var(--sendbird-button-border-focus);
  box-shadow: 0 0 0 2px var(--sendbird-dark-error-300);
}

.sendbird-button--danger:active {
  box-shadow: none;
}

.sendbird-theme--light .sendbird-button--danger:active {
  background-color: var(--sendbird-light-error-500);
}

.sendbird-theme--dark .sendbird-button--danger:active {
  background-color: var(--sendbird-dark-error-500);
}

.sendbird-theme--light .sendbird-button--danger:hover .sendbird-button--danger:focus {
  box-shadow: 0 0 0 2px var(--sendbird-light-error-400);
}

.sendbird-theme--dark .sendbird-button--danger:hover .sendbird-button--danger:focus {
  box-shadow: 0 0 0 2px var(--sendbird-dark-error-400);
}

.sendbird-theme--light .sendbird-button--danger:active .sendbird-button--danger:focus {
  box-shadow: 0 0 0 2px var(--sendbird-light-error-500);
}

.sendbird-theme--dark .sendbird-button--danger:active .sendbird-button--danger:focus {
  box-shadow: 0 0 0 2px var(--sendbird-dark-error-500);
}

.sendbird-button--disabled {
  border: 1px solid transparent;
  cursor: not-allowed;
}

.sendbird-theme--light .sendbird-button--disabled {
  background-color: var(--sendbird-light-background-200);
  color: var(--sendbird-light-ondark-01);
}

.sendbird-theme--dark .sendbird-button--disabled {
  background-color: var(--sendbird-dark-background-400);
  color: var(--sendbird-dark-onlight-01);
}
.sendbird--mobile-mode .sendbird-label {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

[class*=sendbird-label] {
  font-family: var(--sendbird-font-family-default);
}

.sendbird-label--h-1 {
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.sendbird-label--h-2 {
  font-size: 18px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.2px;
}

.sendbird-label--subtitle-1 {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: -0.2px;
}

.sendbird-label--subtitle-2 {
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: -0.2px;
}

.sendbird-label--body-1 {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
}

.sendbird-label--body-2 {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
}

.sendbird-label--button-1 {
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
}

.sendbird-label--button-2 {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
}

.sendbird-label--button-3 {
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
}

.sendbird-label--caption-1 {
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
}

.sendbird-label--caption-2 {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
}

.sendbird-label--caption-3 {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
}

.sendbird-theme--light .sendbird-label--color-onbackground-1 {
  color: var(--sendbird-light-onlight-01);
}

.sendbird-theme--dark .sendbird-label--color-onbackground-1 {
  color: var(--sendbird-dark-ondark-01);
}

.sendbird-theme--light .sendbird-label--color-onbackground-2 {
  color: var(--sendbird-light-onlight-02);
}

.sendbird-theme--dark .sendbird-label--color-onbackground-2 {
  color: var(--sendbird-dark-ondark-02);
}

.sendbird-theme--light .sendbird-label--color-onbackground-3 {
  color: var(--sendbird-light-onlight-03);
}

.sendbird-theme--dark .sendbird-label--color-onbackground-3 {
  color: var(--sendbird-dark-ondark-03);
}

.sendbird-theme--light .sendbird-label--color-onbackground-4 {
  color: var(--sendbird-light-onlight-04);
}

.sendbird-theme--dark .sendbird-label--color-onbackground-4 {
  color: var(--sendbird-dark-ondark-04);
}

.s