@use 'ej2-base/styles/common/mixin' as *;
@mixin chat-display-alignment($chat-display, $chat-align-items) {
  display: $chat-display;
  align-items: $chat-align-items;
}
@mixin chat-text-ellipses($chat-overflow, $chat-white-space, $chat-text-overflow) {
  overflow: $chat-overflow;
  white-space: $chat-white-space;
  text-overflow: $chat-text-overflow;
}
@mixin chat-progress-bar-display($chat-radius, $chat-cx, $chat-cy, ){
  cx: $chat-cx;
  cy: $chat-cy;
  r: $chat-radius;
}
@mixin chat-wrapper-icon-alignment($width, $height){
  position: absolute;
  width: $width;
  height: $height;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@mixin chat-center-icon($size){
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: $size;
  cursor: pointer;
  z-index: 1;
}
@include export-module('chatui-layout') {
  .e-chat-ui {
    border: $chat-ui-border solid;
    .e-chat-content {
      position: relative;
      height: $chat-content-height;
      justify-content: space-between;
      gap: $chat-content-gap;
      padding-bottom: $chat-content-padding-bottom;
    }
    .e-chat-header {
      height: $chat-header-height;
      border-bottom: $chat-header-border-bottom solid;
      .e-chat-toolbar {
        flex-grow: 1;
        &.e-toolbar {
          border: none;
        }
      }
    }
    .e-header {
      height: $header-height;
      margin-left: $chat-header-margin-left;
      font-size: $chat-header-font-size;
      font-weight: $message-header-font-weight;
      display: flex;
      gap: $chat-header-gap;
      align-items: center;
    }
    .e-message-wrapper {
      gap: $message-wrapper-gap;
      width: 100%;
      height: $message-wrapper-height;
      overflow-y: scroll;
      padding-top: $message-wrapper-padding-top;
      &.e-scroll-smooth {
        scroll-behavior: smooth;
      }
      &::-webkit-scrollbar {
        width: $chat-scrollbar-width;
        height: $chat-scrollbar-width;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: $scrollbar-thumb-border-radius;
      }
    }
    .e-message-group {
      max-width: 75%;
      margin: $message-group-margin;
    }
    .e-message-item {
      display: flex;
      flex-direction: column;
      position: relative;
      margin-bottom: $message-item-bottom;
      .e-chat-message-toolbar {
        border-radius: $chat-message-toolbar-radius;
        display: none;
        position: absolute;
        height: $chat-message-toolbar-height !important; /* stylelint-disable-line declaration-no-important */
        min-height: 32px;
        z-index: 10;
        overflow-x: scroll;
        scrollbar-width: none;
        &.e-show,
        &:hover {
          display: block;
        }
        .e-toolbar-items .e-toolbar-item {
          padding: $toolbar-item-padding;
          min-height: 28px;
          &:first-child {
            margin-left: $toolbar-first-child-margin-left;
          }
          &:last-child {
            margin-right: $toolbar-last-child-margin-right;
          }
          .e-tbar-btn {
            min-height: 28px;
            padding: $tbar-btn-padding;
          }
        }
      }
      .e-forwarded-indicator {
        font-size: $forwarded-indicator-font-size;
        display: flex;
        align-items: center;
        gap: $forwarded-indicator-gap;
        margin-bottom: $forwarded-indicator-margin-bottom;
        .e-forward-arrow {
          font-weight: normal;
          font-size: $forward-arrow-font-size;
          padding: $forward-arrow-padding;
        }
      }
    }
    .e-message-header-container {
      display: flex;
      align-items: baseline;
      gap: $message-header-container-gap;
    }
    .e-message-header {
      margin: $message-header-margin;
      font-size: $message-header-size;
      font-weight: $message-header-font-weight;
    }
    .e-time {
      font-size: $message-time-size;
      white-space: nowrap;
    }
    .e-message-content {
      white-space: pre-wrap;
      padding: $chat-text-padding;
      border-radius: $text-border-radius;
      margin-top: $text-margin-top;
      font-size: $chat-text-font-size;
      width: fit-content;
      text-align: left;
    }
    .e-right,
    .e-right .e-message-content,
    .e-right .e-time {
      align-self: flex-end;
    }
    .e-left {
      align-self: flex-start;
      position: relative;
      &:not(.e-message-item-template) {
        padding-left: $chat-left-message-item-padding-left;
      }
    }
    .e-message-icon {
      position: absolute;
      top: 20px;
      left: 0;
    }

    /* ======== Asssit Footer Styles ======== */
    .e-footer {
      position: relative;
      margin: $chat-footer-margin;
      align-self: flex-end;
      width: calc(100% - 10px); //for margin space
      .e-chat-textarea::-webkit-scrollbar-thumb {
        border-radius: $chat-textarea-border-radius;
      }
      .e-chat-textarea::-webkit-scrollbar {
        width: 4px;
      }
      .hide-scrollbar .e-chat-textarea {
        scrollbar-width: none;
      }
      .e-footer-icons-wrapper {
        display: flex;
        align-items: center;
        gap: $chat-footer-icons-gap;
        padding: $chat-footer-icons-padding;
        .e-icons {
          cursor: pointer;
        }
        .e-upload {
          display: none;
        }
      }
      .e-chat-textarea {
        height: $chat-textarea-height;
        width: 100%;
        min-height: $chat-textarea-min-height;
        outline: none;
        overflow-y: auto;
        max-height: 280px;
        line-height: $chat-textarea-line-height;
        padding: $chat-textarea-padding;
        font-size: $chat-textarea-font-size;
        border: none;
      }
      .e-chat-textarea[placeholder]:empty::before {
        content: attr(placeholder);
        cursor: text;
      }
      &.e-footer-focus-wave-effect {
        @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
          &::before,
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            height: $focus-wave-effect-height;
            width: 0;
            transition: width .2s ease-out;
          }
          &::before {
            left: 50%;
          }
          &::after {
            right: 50%;
          }
          &.e-footer-focused::before {
            width: 50%;
          }
          &.e-footer-focused::after {
            width: 50%;
          }
        }
      }

      &:not(.e-footer-template) {
        display: flex;
        flex-direction: column;
        border-radius: $chat-footer-border-radius;
        @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
          border-top-right-radius: $footer-border-top-right-radius;
          border-top-left-radius: $footer-border-top-left-radius;
        }
        &.e-footer-expanded .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            justify-content: end;
          }
          .e-chat-textarea {
            width: 100%;
          }
        }
        .e-chat-send {
          font-size: $chat-send-icon-size;
        }
        .e-chat-attachment-icon {
          font-size: $chat-send-icon-size;
        }
        .e-chat-send.disabled {
          pointer-events: none;
          opacity: .5;
          cursor: not-allowed;
        }
        .e-chat-send.enabled {
          pointer-events: auto;
          opacity: 1;
          cursor: pointer;
        }
        .e-textarea-icons-wrapper {
          display: flex;
          flex-direction: row;
        }
      }
      .e-hidden-textarea {
        display: none;
      }
      &[hidden]{
        display: none;
      }
    }
    .e-footer:not(.e-footer-template) .e-chat-send:not(.disabled):focus-visible,
    .e-footer:not(.e-footer-template) .e-chat-attachment-icon:focus-visible {
      outline: 1px solid;
    }
    .e-chat-content,
    .e-message-wrapper {
      display: flex;
      flex-direction: column;
    }
    .e-message-icon,
    .e-message-icon img {
      height: $message-icon-height;
      width: $message-icon-width;
      font-size: $message-icon-font-size;
    }
    .e-message-icon,
    .e-header-icon,
    .e-user-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .e-status-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .e-status-item {
      display: flex;
      gap: $status-item-gap;
    }
    .e-right .e-time,
    .e-status-text {
      margin-right: $status-text-margin-right;
    }
    .e-status-text {
      font-size: $typing-user-font-size;
    }
    .e-status-icon {
      align-self: flex-end;
      height: $status-icon-height;
      width: $status-icon-width;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: $chat-status-icon-size;
    }
    .e-timebreak {
      display: flex;
      align-items: center;
      margin: $timebreak-margin;
      position: relative;
      &::before,
      &::after {
        content: '';
        flex-grow: 1;
        height: $timebreak-height;
      }
      &::before {
        margin-right: $timebreak-before-margin-right;
      }
      &::after {
        margin-left: $timebreak-after-margin-left;
      }
    }
    .e-timestamp {
      font-size: $timebreak-font-size;
      padding: $timebreak-padding;
      border-radius: $timebreak-border-radius;
      font-weight: $timebreak-font-weight;
      border: $timestamp-border solid;
      display: inline-block;
    }
    .e-typing-indicator {
      align-self: baseline;
      display: flex;
      gap: $typing-indicator-gap;
      margin-left: $typing-indicator-margin-left;
      width: fit-content;
      align-items: center;
      justify-content: center;
    }
    .e-user-icon {
      margin-right: $user-icon-margin-right;
      height: $user-icon-height;
      width: $user-icon-width;
      font-size: $user-icon-font-size;
    }
    .e-user-text {
      margin-left: $user-text-margin-left;
      font-size: $typing-user-font-size;
    }
    .e-indicator-wrapper {
      display: flex;
      gap: $indicator-wrapper-gap;
      height: $indicator-wrapper-height;
      align-items: flex-end;
    }
    .e-indicator {
      border-radius: $indicator-border-radius;
      height: $indicator-height;
      width: $indicator-width;
    }
    .e-indicator:nth-child(1) {
      animation-delay: .3333s;
    }
    .e-indicator:nth-child(2) {
      animation-delay: .6666s;
    }
    .e-indicator:nth-child(3) {
      animation-delay: .9999s;
    }
    .e-header-icon {
      position: relative;
      display: inline-block;
      width: $header-icon-width;
      height: $header-icon-height;
    }
    .e-typing-suggestions {
      display: flex;
      gap: $typing-suggestions-gap;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      position: relative;
      flex-wrap: wrap-reverse;
    }
    .e-suggestions {
      flex: 1;
      width: 100%;
      &.e-suggestion-item-template li {
        padding: $suggestion-item-template-padding;
      }
      ul {
        list-style-type: none;
        padding: $suggestions-ul-padding;
        margin: $suggestions-ul-margin;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-right: $suggestions-ul-margin-right;
      }
      li {
        font-size: $timebreak-font-size;
        line-height: $chat-suggesstion-line-height;
        font-weight: $suggesstions-font-weight;
        padding: $chat-suggesstions-list-padding;
        margin: $suggestions-li-margin;
        border: $suggestions-li-border solid;
        border-radius: $suggestion-border-radius;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .e-spinner-pane.e-spin-show {
      height: $spinner-pane-height;
    }
    &.e-rtl {
      .e-message-content {
        text-align: right;
      }
      .e-left {
        &:not(.e-message-item-template) {
          padding-right: $chat-left-message-item-padding-right;
          padding-left: $rtl-left-padding-left;
        }
      }
      .e-message-icon {
        left: unset;
        right: 0;
      }
      .e-typing-indicator {
        margin-right: $rtl-typing-indicator-margin-right;
      }
      .e-user-text {
        margin-right: $rtl-user-text-margin-right;
      }
      .e-user-icon {
        margin-left: $rtl-user-icon-margin-left;
        margin-right: $rtl-user-icon-margin-right;
      }
      .e-typing-indicator,
      .e-user-text,
      .e-header {
        margin-left: $rtl-header-margin-left;
      }
      .e-header {
        margin-right: $rtl-header-margin-right;
      }
      .e-suggestions ul {
        margin-right: $rtl-suggestions-ul-margin-right;
        margin-left: $rtl-suggestions-ul-margin-left;
      }
      .e-right .e-time,
      .e-status-text {
        margin-right: $rtl-status-text-margin-right;
        margin-left: $rtl-status-text-margin-left;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $chat-footer-icons-rtl-padding;
          padding-right: $footer-icons-wrapper-padding-right;
        }
      }
    }
    @if ($skin-name == 'highcontrast') {
      .e-chat-header .e-toolbar .e-toolbar-item .e-tbar-btn {
        border: none;
      }
    }
    .e-fab.e-btn.e-fab-bottom {
      bottom: 8px;
    }
    .e-arrowdown-hide,
    .e-hide-suggestions {
      display: none;
    }
    .e-arrowdown-show {
      display: flex;
    }
    .e-show-suggestions {
      display: block;
    }
    .e-suggestions li:focus-visible {
      outline: 1px solid;
    }
    .e-chat-header {
      .e-toolbar-item {
        &.e-overlay {
          opacity: .5;
        }
      }
    }
    .e-empty-chat-template {
      margin: $empty-chat-template-margin;
    }
    .e-user-status-icon {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      bottom: 0;
      right: 0;
      height: $user-status-icon-height;
      width: $user-status-icon-width;
      border: $user-status-icon-border solid;
      border-color: $user-status-icon-border-color;
      border-radius: $user-status-icon-border-radius;
      font-size: $user-status-icon-font-size;
  
      &:not(.e-user-offline)
      {
        color: $user-status-icon-color;
      }
    }
    .e-reply-wrapper {
      display: flex;
      align-items: center;
      padding: $reply-wrapper-padding;
      margin: $reply-wrapper-margin;
      border-radius: $reply-wrapper-border-radius;
      position: relative;
      width: fit-content;
      white-space: normal;
      cursor: pointer;
      .e-reply-content {
        padding-left: $reply-content-padding-left;
      }
      .e-reply-message-details {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $reply-message-details-gap;
        padding-bottom: $reply-message-details-padding-bottom;
        .e-chat-close {
          margin-left: $reply-chat-close-margin-left;
          font-size: $reply-chat-close-font-size;
          cursor: pointer;
        }
      }
      .e-reply-message-user {
        font-size: $reply-message-user-font-size;
        font-weight: $reply-message-user-font-weight;
      }
      .e-reply-message-text {
        font-size: $reply-message-text-font-size;
        vertical-align: middle;
      }
      .e-reply-message-time {
        font-size: $reply-message-time-font-size;
      }
    }
    .e-pinned-message-wrapper {
      display: none;
      align-items: center;
      padding: $pinned-message-wrapper-padding;
      .e-pinned-message {
        display: flex;
        align-items: center;
        gap: $pinned-message-gap;
        font-size: $pinned-message-font-size;
      }
      .e-pinned-dropdown-popup {
        border: $pinned-dropdown-popup-border;
        background: none;
        box-shadow: none;
        margin-left: $pinned-dropdown-popup-margin-left;
      }
    }

    /* ======== Attachment Styles ======== */
    .e-message-content {
      .e-attached-file{
        display: flex;
        padding: $attached-file-padding;
        cursor: pointer;
        .e-image-wrapper,
        .e-video-wrapper {
          position: relative;
          display: flex;
          .e-image,
          .e-video {
            max-width: 250px;
            max-height: 350px;
            min-width: 200px;
            width: 100%;
            height: $image-video-height;
            object-fit: cover;
            border-radius: $image-video-border-radius;
            display: block;
          }
          .e-play-icon-wrapper {
            @include chat-wrapper-icon-alignment(40px, $play-icon-wrapper-height);
            border-radius: $play-icon-wrapper-border-radius;
            .e-chat-video-play {
              @include chat-center-icon($progress-video-icon-size);
              line-height: $progress-video-icon-height;
              font-weight: $progress-video-icon-weight;
              transform: translate(-42%, -52%);
            }
          }
        }
      }
    }
    .e-pinned-message {
      min-width: 0;
      .e-pinned-message-text{
        @include chat-display-alignment(flex, center);
        gap: $pinned-message-text-gap;
        min-width: 0;
        .e-pinned-img-thumb {
          height: $pinned-img-thumb-height;
          width: $pinned-img-thumb-width;
          border-radius: $pinned-img-thumb-border-radius;
          object-fit: inherit;
        }
        .e-pinned-file-name {
          @include chat-text-ellipses(hidden, nowrap, ellipsis);
          min-width: 0;
          display: inline-block;
          font-size: $pinned-file-name-font-size;
        }
        .e-chat-file-icon {
          font-size: $pin-file-icon-size;
          line-height: $pin-file-icon-height;
          font-weight: $pin-file-icon-weight;
        }
      }
    }
    .e-reply-wrapper {
      .e-reply-media-preview {
        @include chat-display-alignment(inline-flex, center);
        gap: $reply-media-preview-gap;
        margin-right: $reply-media-preview-margin-right;
        width: fit-content;
        vertical-align: middle;
        .e-reply-media-thumb {
          height: $reply-media-thumb-height;
          width: $reply-media-thumb-width;
          border-radius: $reply-media-thumb-border-radius;
          object-fit: inherit;
        }
        .e-reply-file-name {
          flex-grow: 1;
          max-width: 120px;
          @include chat-text-ellipses(hidden, nowrap, ellipsis);
        }
        .e-chat-file-icon {
          font-size: $reply-file-icon-size;
          line-height: $reply-file-icon-height;
          font-weight: $reply-file-icon-weight;
        }
      }
    }
    .e-preview-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $preview-overlay-height;
      z-index: 999;
      @include chat-display-alignment(flex, center);
      flex-direction: column;
      justify-content: flex-start;
      .e-preview-header {
        @include chat-display-alignment(flex, center);
        width: 100%;
        padding: $preview-header-padding;
        justify-content: space-between;
        height: $preview-header-height;
        .e-icons {
          text-decoration: none;
          cursor: pointer;
        }
        .e-chat-back-icon {
          margin-right: $preview-header-close-margin-left;
          font-size: $after-preview-close-size;
          line-height: $after-preview-close-height;
          font-weight: $after-preview-close-weight;
        }
        .e-chat-download {
          font-size: $after-preview-download-size;
          line-height: $after-preview-download-height;
          font-weight: $after-preview-download-weight;
        }
        .e-preview-file-name {
          padding-right: $preview-file-name-padding-right;
          font-size: $after-preview-file-size;
          line-height: $after-preview-file-line-height;
          font-weight: $after-preview-file-weight;
          letter-spacing: $after-preview-file-letter-spacing;
          @include chat-text-ellipses(hidden, nowrap, ellipsis);
          flex-grow: 1;
        }
      }
      .e-media-wrapper {
        display: flex;
        height: $media-wrapper-height;
      }

      .e-image-preview,
      .e-video-preview {
        max-width: 95%;
        max-height: 80%;
        margin: $image-video-preview-margin;
        object-fit: contain;
      }

      .e-file-preview {
        height: $preview-file-height;
        width: 80%;
        margin: auto;
        border-radius: $preview-file-border-radius;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: $preview-file-border solid;
        overflow-y: auto;
        scrollbar-width: thin;
        .e-file-document {
          font-size: $file-document-font-size;
        }
        .e-preview-file-text {
          font-size: $no-preview-text-size;
          font-weight: $no-preview-font-weight;
          line-height: $no-preview-line-height;
          letter-spacing: $no-preview-letter-sapcing;
          margin-top: $preview-file-text-top;
          margin-bottom: $preview-file-text-bottom;
          text-align: center;
          word-break: break-word;
          hyphens: auto;
        }
        .e-file-details {
          font-size: $preview-file-size-text;
          line-height: $preview-file-size-height;
          letter-spacing: $preview-file-size-spacing;
          font-weight: $preview-file-size-weight;
          word-break: break-word;
          hyphens: auto;
        }
      }
    }

    .e-upload-failure-alert {
      transition: opacity .5s ease-in-out;
      opacity: 0;
      padding: $file-failure-padding;
      border-radius: $file-failure-border-radius;
      display: flex;
      align-items: center;
      align-self: center;
      justify-content: space-between;
      width: calc(100% - 10px);
      .e-chat-circle-close {
        font-size: $file-failure-circle-icon-size;
        line-height: $file-failure-circle-icon-height;
        margin-right: $file-failure-circle-margin;
        font-weight: $file-failure-circle-icon-weight;
      }
      .e-failure-message {
        font-size: $file-failure-message-size;
        line-height: $file-failure-message-height;
        letter-spacing: $file-failure-message-spacing;
        font-weight: $file-failure-message-weight;
        margin-right: auto;
      }
      .e-chat-close {
        font-size: $file-failure-close-icon-size;
        line-height: $file-failure-close-icon-height;
        margin-left: $file-failure-close-margin;
        font-weight: $file-failure-close-icon-weight;
        cursor: pointer;
      }
    }
    .e-upload-failure-alert.e-show {
      opacity: 1;
    }

    .e-footer:has(.e-chat-drop-area .e-chat-uploaded-file-item) {
      .e-chat-textarea {
        max-height: 90px;
      }
    }

    .e-footer .e-chat-drop-area:has(.e-chat-uploaded-file-item) {
      margin: $files-container-margin;
    }

    .e-footer .e-chat-drop-area {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      overflow-y: auto;
      overflow-x: hidden;
      white-space: normal;
      max-width: inherit;
      max-height: 225px;
      scrollbar-width: thin;
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: $chat-textarea-border-radius;
      }
    }

    .e-footer .e-chat-drop-area,
    .e-attached-file {
      .e-chat-uploaded-file-item,
      .e-file-wrapper {
        display: flex;
        flex-direction: row;
        border-radius: $file-wrapper-border-radius;
        position: relative;
        align-items: center;
        width: 160px;
        max-width: 160px;
        min-width: 160px;
        margin: $file-item-margin;
        cursor: pointer;
        &:not(:has(.e-chat-close)) .e-chat-file-details {
          padding-right: $chat-file-details-padding-right;
        }
      }

      .e-chat-file-icon {
        padding: $chat-file-format-icon-padding;
        font-size: $chat-file-document-icon-font-size;
      }
      .e-chat-file-details {
        display: flex;
        flex-direction: column;
        padding: $chat-attached-file-details-padding;
        min-width: 0;
        flex: 1 1 auto;
      }

      .e-chat-file-name {
        font-weight: $chat-attached-file-text-font-weight;
      }

      .e-chat-file-name,
      .e-chat-file-size {
        font-size: $chat-attached-file-text-font-size;
        line-height: $chat-attached-file-text-line-height;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-chat-close {
        cursor: pointer;
        font-weight: bold;
        padding: $chat-attached-file-clear-icon-padding;
        border-radius: $chat-clear-icon-border-radius;
        margin: $chat-attached-file-clear-icon-margin;
      }
    }

    .e-footer {
      .e-chat-drop-area,
      .e-attachment-template {
        .e-chat-progress-bar {
          width: 100%;
          border-radius: $chat-progress-bar-border-radius;
          overflow: hidden;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .e-chat-progress-fill {
          height: $chat-progress-fill-height;
          width: 0;
          transition: width .3s;
        }
      }
    }
    .e-attached-file {
      .e-file-wrapper {
        margin: $file-wrapper-margin;
        width: fit-content;
      }
    }
    .e-right .e-text .e-chat-mention-user-chip {
      font-weight: $mentioned-user-font-weight;
    }

    .e-left .e-text .e-chat-mention-user-chip {
      font-weight: $mentioned-left-user-font-weight;
    }
  }

  // Mention popup related styles for @mention support in chat ui
  .e-chat-mention .e-chat-mention-item-template {
    display: flex;
    flex-direction: row;
    padding: $chat-mention-padding;
  }

  .e-chat-mention .e-chat-mention-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .e-chat-mention .e-chat-mention-user-name {
    font-size: $mention-user-name-size;
    line-height: $mention-user-name-line-height;
    margin: $mention-user-name-margin;
  }

  .e-chat-mention.e-rtl .e-chat-mention-user-icon {
    left: unset;
    right: 0;
  }

  .e-chat-mention .e-chat-mention-user-icon,
  .e-chat-mention .e-chat-mention-user-icon img {
    height: $mention-user-icon-height;
    width: $mention-user-icon-width;
    font-size: $mention-user-icon-size;
  }

  .e-chat-mention > div {
    border-radius: $chat-mention-border-radius;
  }

  .e-chat-mention .e-list-item {
    text-indent: 0;
    height: $chat-mention-list-item-height;
  }
}