@use 'ej2-base/styles/common/mixin' as *;
@include export-module('chatui-bigger') {
  .e-bigger.e-chat-ui,
  .e-bigger .e-chat-ui {
    .e-chat-content {
      height: $chat-content-bigger-height;
    }
    .e-chat-header {
      height: $chat-bigger-header-height;
    }
    .e-message-header {
      font-size: $message-header-bigger-size;
    }
    .e-message-icon,
    .e-message-icon img {
      font-size: $bigger-message-icon-size;
      height: $bigger-message-icon-height;
      width: $bigger-message-icon-width;
    }
    .e-user-icon {
      height: $bigger-user-icon-font-height;
      width: $bigger-user-icon-font-width;
      font-size: $bigger-user-icon-font-size;
    }
    .e-left {
      &:not(.e-message-item-template) {
        padding-left: $chat-left-message-item-bigger-padding-left;
      }
    }
    .e-message-icon {
      top: 25px;
    }
    .e-user-text {
      margin-left: $bigger-user-text-margin-left;
      font-size: $typing-user-font-size-bigger;
    }
    .e-user-icon {
      margin-right: $bigger-user-icon-margin-right;
    }
    .e-text {
      font-size: $chat-text-font-size-bigger;
      padding: $chat-text-padding-bigger;
    }
    .e-time {
      font-size: $message-time-bigger-size;
    }
    .e-status-text {
      font-size: $typing-user-font-size-bigger;
    }
    .e-status-icon {
      height: $chat-status-icon-bigger-height;
      width: $chat-status-icon-bigger-width;
      font-size: $chat-status-icon-bigger-size;
    }
    .e-footer {
      &:not(.e-footer-template){
        .e-chat-send {
          font-size: $chat-send-icon-size-bigger;
        }
        .e-chat-attachment-icon {
          font-size: $chat-send-icon-size-bigger;
        }
      }
      .e-footer-icons-wrapper {
        gap: $chat-footer-icons-gap-bigger;
        padding: $chat-footer-icons-padding-bigger;
      }
      .e-chat-textarea {
        min-height: $chat-textarea-min-height-bigger;
        line-height: $chat-textarea-line-height-bigger;
        padding: $chat-textarea-padding-bigger;
        font-size: $bigger-chat-textarea-size;
      }
    }
    .e-timestamp {
      font-size: $timebreak-font-size-bigger;
      padding: $timebreak-padding-bigger;
    }
    .e-suggestions {
      li {
        font-size: $timebreak-font-size-bigger;
        padding: $chat-suggesstions-li-padding-bigger;
        line-height: $chat-suggesstion-bigger-line-height;
      }
    }
    &.e-rtl {
      .e-left {
        &:not(.e-message-item-template) {
          padding-right: $chat-left-message-item-bigger-padding-right;
          padding-left: $bigger-rtl-left-padding-left;
        }
      }
      .e-user-text {
        margin-right: $bigger-rtl-user-text-margin-right;
        margin-left: $bigger-rtl-user-text-margin-left;
      }
      .e-user-icon {
        margin-left: $bigger-rtl-user-icon-margin-left;
        margin-right: $bigger-rtl-user-icon-margin-right;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $chat-footer-icons-rtl-padding-bigger;
          padding-right: $bigger-rtl-icons-wrapper-padding-right;
        }
      }
    }
    .e-user-status-icon{
      height: $user-status-icon-bigger-font-size;
      width: $user-status-icon-bigger-font-size;
      font-size: $user-status-icon-bigger-font-size;
      border-radius: $user-status-icon-border-radius;
      border: $bigger-user-status-icon-border solid;
      border-color: $user-status-icon-border-color;
    }

    .e-message-item .e-chat-message-toolbar {
      height: $chat-message-toolbar-bigger-height !important; /* stylelint-disable-line declaration-no-important */
      min-height: 40px;
      .e-toolbar-items .e-toolbar-item {
        &:first-child {
          margin-left: $bigger-tbar-first-item-margin-left;
        }
        &:last-child {
          margin-right: $bigger-tbar-last-item-margin-right;
        }
        min-height: 32px;
        .e-tbar-btn {
          min-height: 32px;
          padding: $bigger-tbar-btn-padding;
        }
      }
    }

    /* ======== Attachment Styles ======== */
    .e-message-content {
      .e-attached-file{
        .e-image-wrapper,
        .e-video-wrapper {
          .e-play-icon-wrapper {
            @include chat-wrapper-icon-alignment(44px, $chat-video-wrapper-bigger-height);
            .e-chat-video-play {
              font-size: $progress-video-icon-size-bigger;
              line-height: $progress-video-icon-height-bigger;
            }
          }
        }
      }
    }
    .e-pinned-message {
      .e-pinned-message-text{
        .e-pinned-img-thumb {
          height: $pinned-img-thumb-bigger-height;
          width: $pinned-img-thumb-bigger-width;
        }
        .e-chat-file-icon {
          font-size: $pin-file-icon-size-bigger;
          line-height: $pin-file-icon-height-bigger;
        }
      }
    }
    .e-reply-wrapper {
      .e-reply-media-preview {
        .e-reply-media-thumb {
          height: $reply-media-thumb-bigger-height;
          width: $reply-media-thumb-bigger-width;
        }
        .e-reply-file-name {
          font-size: $bigger-reply-file-name-size;
        }
        .e-chat-file-icon {
          font-size: $reply-file-icon-size-bigger;
          line-height: $reply-file-icon-height-bigger;
        }
      }
    }
    .e-preview-overlay {
      .e-preview-header {
        height: $preview-header-bigger-height;
        .e-chat-back-icon {
          font-size: $after-preview-close-size-bigger;
          line-height: $after-preview-close-height-bigger;
        }
        .e-chat-download {
          font-size: $after-preview-download-size-bigger;
          line-height: $after-preview-download-height-bigger;
        }
        .e-preview-file-name {
          font-size: $after-preview-file-size-bigger;
          line-height: $after-preview-file-line-height-bigger;
          font-weight: $after-preview-file-weight-bigger;
          letter-spacing: $after-preview-file-letter-spacing-bigger;
        }
      }
      .e-file-preview {
        .e-preview-file-text {
          font-size: $no-preview-text-size-bigger;
          font-weight: $no-preview-font-weight-bigger;
          line-height: $no-preview-line-height-bigger;
          letter-spacing: $no-preview-letter-sapcing-bigger;
        }
        .e-file-details {
          font-size: $preview-file-size-text-bigger;
          line-height: $preview-file-size-height-bigger;
          letter-spacing: $preview-file-size-spacing-bigger;
          font-weight: $preview-file-size-weight-bigger;
        }
      }
    }

    .e-upload-failure-alert {
      padding: $file-failure-padding-bigger;
      border-radius: $file-failure-border-radius-bigger;
      .e-chat-circle-close {
        font-size: $file-failure-circle-icon-size-bigger;
        line-height: $file-failure-circle-icon-height-bigger;
        margin-right: $file-failure-circle-margin-bigger;
        font-weight: $file-failure-circle-icon-weight-bigger;
      }
      .e-failure-message {
        font-size: $file-failure-message-size-bigger;
        line-height: $file-failure-message-bigger-height;
        letter-spacing: $file-failure-message-spacing-bigger;
        font-weight: $file-failure-message-weight-bigger;
      }
      .e-chat-close {
        font-size: $file-failure-close-icon-size-bigger;
        line-height: $file-failure-close-icon-height-bigger;
        margin-left: $file-failure-close-margin-bigger;
        font-weight: $file-failure-close-icon-weight-bigger;
      }
    }
    .e-footer .e-chat-drop-area:has(.e-chat-uploaded-file-item) {
      margin: 4px 8px;
    }

    .e-footer .e-chat-drop-area,
    .e-attached-file {
      .e-chat-uploaded-file-item {
        margin: 0 4px 4px;
        &:not(:has(.e-chat-close)) .e-chat-file-details {
          padding-right: 15px;
        }
      }

      .e-chat-file-details {
        padding: 3px 0 2px 2px;
      }
    }
  }

  // Mention popup related styles for @mention support in chat ui
  .e-bigger.e-chat-mention .e-chat-mention-user-name,
  .e-bigger .e-chat-mention .e-chat-mention-user-name {
    font-size: $bigger-mention-user-name-size;
    line-height: $bigger-mention-user-name-height;
    margin: $bigger-mention-user-name-margin;
  }

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

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