@use 'ej2-base/styles/definition/material3' as *;
@forward 'ej2-base/styles/definition/material3';
$user-icon-gap: 8px !default;
$chat-scrollbar-width: 6px !default;
$chat-send-icon-size: 16px !default;
$chat-header-height: 50px !default;
$suggesstions-font-weight: 500 !default;
$message-header-size: 12px !default;
$message-time-size: 10px !default;
$message-header-font-weight: 500 !default;
$chat-status-icon-size: 16px !default;
$chat-text-font-size: 14px !default;
$text-border-radius: 4px !default;
$chat-text-padding: 7px 8px !default;
$text-margin-top: 4px !default;
$message-item-bottom: 12px !default;
$timebreak-font-size: 11px !default;
$timebreak-padding: 5px 8px !default;
$timebreak-font-weight: 500 !default;
$timebreak-border-radius: 4px !default;
$typing-user-font-size: 12px !default;
$suggestion-border-radius: 4px !default;
$chat-suggesstion-line-height: 14px !default;
$chat-suggesstions-list-padding: 5px 8px !default;
$user-status-icon-font-size: 12px !default;
$user-status-icon-border-radius: 10px !default;
$user-status-icon-border-color: $grey-white !default;
$user-status-icon-away-background-color: rgba($warning-dark) !default;
$user-status-icon-online-background-color: rgba($success-dark) !default;
$user-status-icon-busy-background-color: rgba($danger-dark) !default;
$user-status-icon-offline-background-color: $grey-white !default;
$user-status-icon-color: $grey-white !default;
$chat-footer-icons-gap: 8px !default;
$chat-footer-icons-padding: 6px 10px 6px 0 !default;
$chat-footer-icons-rtl-padding: 6px 0 6px 10px !default;
$chat-textarea-min-height: 34px !default;
$chat-textarea-line-height: 20px !default;
$chat-textarea-padding: 6px 10px !default;
$chat-footer-border-radius: 0 !default;
$chat-focused-border-width: 1px !default;

$chat-footer-icons-gap-bigger: 8px !default;
$chat-footer-icons-padding-bigger: 9px 12px 9px 0 !default;
$chat-footer-icons-rtl-padding-bigger: 9px 0 9px 12px !default;
$chat-textarea-min-height-bigger: 40px !default;
$chat-textarea-line-height-bigger: 22px !default;
$chat-textarea-padding-bigger: 9px 12px !default;
$chat-suggesstion-bigger-line-height: 20px !default;
$chat-suggesstions-li-padding-bigger: 6px 10px !default;
$typing-user-font-size-bigger: 16px !default;
$chat-text-font-size-bigger: 16px !default;
$chat-text-padding-bigger: 10px 12px !default;
$timebreak-font-size-bigger: 14px !default;
$timebreak-padding-bigger: 6px 10px !default;
$chat-status-icon-bigger-size: 18px !default;
$chat-send-icon-size-bigger: 20px !default;
$chat-bigger-header-height: 58px !default;
$message-header-bigger-size: 14px !default;
$message-time-bigger-size: 12px !default;
$user-icon-bigger-gap: 12px !default;
$user-status-icon-bigger-font-size: 14px !default;

$chat-footer-border-color: rgba($border-light) !default;
$chat-footer-border-btm-color: rgba($border-light) !default;
$chat-footer-wave-color: rgba($primary) !default;
$chat-placeholder-color: rgba($placeholder-text-color) !default;
$chat-footer-focus-bdr-color: rgba($border-light) !default;
$chat-footer-border-shadow: unset !default;
$chat-bg-color: rgba($content-bg-color) !default;
$chat-left-text-color: rgba($content-text-color) !default;
$chat-left-bg-color: $content-bg-color-alt1 !default;
$chat-left-text-color-hover: rgba($content-text-color-hover) !default;
$chat-left-bg-color-hover: $content-bg-color-hover !default;
$chat-left-text-color-active: rgba($content-text-color-pressed) !default;
$chat-left-bg-color-active: $content-bg-color-pressed !default;
$chat-scrollbar-color: $content-bg-color-alt5 !default;
$chat-send-icon-color: rgba($icon-color) !default;
$chat-send-icon-disabled-color: $icon-color-disabled !default;
$chat-border-color: rgba($border-light) !default;
$chat-text-color: rgba($content-text-color) !default;
$chat-right-text-color: rgba($content-text-color) !default;
$chat-right-bg-color: rgba($primary-container) !default;
$sender-icon-bg-color: $content-bg-color-alt2 !default;
$sender-icon-color: rgba($icon-color) !default;
$chat-suggestion-li-color: rgba($primary-bg-color) !default;
$chat-suggestion-li-border-color: rgba($primary-border-color) !default;
$chat-header-bg-color: rgba(103, 80, 164, 1) !default;
$chat-header-color: rgba($primary-text) !default;
$message-header-color: rgba($primary) !default;
$message-time-color: rgba($content-text-color) !default;
$timebreak-bg-color: $content-bg-color-alt2 !default;
$timebreak-color: $content-bg-color-alt1 !default;
$timebreak-border-color: rgba($border-light) !default;
$chat-seen-color: rgba($primary) !default;
$chat-error-color: rgba($danger) !default;
$typing-user-color: rgba($content-text-color-alt2) !default;
$timestamp-border-color: transparent !default;
$chat-message-forward-color: $content-text-color-alt2 !default;
$chat-message-forward-icon-color: $icon-color !default;
$pinned-background-color: $content-bg-color-alt3 !default;
$reply-wrapper-bg-color: $border-light !default;
$reply-wrapper-border-bg-color: rgba(156, 163, 175, 1) !default;
$message-toolbar-border-color: rgba($border-light) !default;

//Mention support related variables
$mentioned-user-color: rgba($primary) !default;
$mentioned-left-user-color: $danger !default;
$mention-popup-border-color: rgb(0, 0, 0) !default;
$mentioned-user-font-weight: 400 !default;
$mentioned-left-user-font-weight: 500 !default;

//Attachment support related variables
$attachment-icon-color: $icon-color !default;
$image-preview-overlay-bg: rgba($content-text-color) !default;
$image-preview-header-bg-color: rgba(235, 235, 235, 1) !default;
$image-preview-header-text-color: rgba($content-text-color) !default;
$video-play-icon-color: $icon-color !default;
$video-play-background-color: rgba($primary-container) !default;
$file-wrapper-bg: $content-bg-color-alt1 !default;
$file-size-text-color: $content-text-color-alt1 !default;
$file-name-text-color: rgba($content-text-color) !default;
$file-download-icon-color: $icon-color !default;
$file-wrapper-border: rgba($border-light) !default;
$stop-icon-color: $icon-color !default;
$retry-icon-color: $icon-color !default;

$file-failure-font-color: $msg-danger-color !default;
$file-failure-bg-color: $msg-danger-bg-color !default;
$file-failure-border: 1px solid $msg-danger-border-color !default;
$file-failure-border-radius: unset !default;
$file-failure-padding: 8px 10px 8px 16px !default;
$file-failure-border-radius-bigger: unset !default;
$file-failure-padding-bigger: 12px 16px !default;
$file-failure-circle-margin: 12px !default;
$file-failure-close-margin: 8px !default;
$file-failure-circle-margin-bigger: 12px !default;
$file-failure-close-margin-bigger: 8px !default;
$file-failure-circle-close-icon-color: $msg-danger-icon-color !default;
$file-failure-close-icon-color: $msg-danger-close-icon-color !default;
$file-failure-circle-icon-size: 16px !default;
$file-failure-circle-icon-height: 16px !default;
$file-failure-circle-icon-weight: 400 !default;
$file-failure-close-icon-size: 14px !default;
$file-failure-close-icon-height: 14px !default;
$file-failure-close-icon-weight: 400 !default;
$file-failure-message-size: 12px !default;
$file-failure-message-height: 18px !default;
$file-failure-message-spacing: 0 !default;
$file-failure-message-weight: 400 !default;
$file-failure-circle-icon-size-bigger: 16px !default;
$file-failure-circle-icon-height-bigger: 16px !default;
$file-failure-circle-icon-weight-bigger: 400 !default;
$file-failure-close-icon-size-bigger: 16px !default;
$file-failure-close-icon-height-bigger: 16px !default;
$file-failure-close-icon-weight-bigger: 400 !default;
$file-failure-message-size-bigger: 16px !default;
$file-failure-message-bigger-height: 24px !default;
$file-failure-message-spacing-bigger: 0 !default;
$file-failure-message-weight-bigger: 400 !default;

$preview-header-text-color: rgba($content-text-color) !default;
$preview-file-bg-color: rgba(235, 235, 235, 1) !default;
$preview-file-border-color: rgba($border-light) !default;
$preview-file-text-color: rgba($content-text-color) !default;
$preview-file-details-color: $content-text-color-alt1 !default;

$no-preview-text-size: 18px !default;
$no-preview-line-height: 26px !default;
$no-preview-letter-sapcing: 0 !default;
$no-preview-font-weight: 500 !default;
$preview-file-size-text: 16px !default;
$preview-file-size-height: 20px !default;
$preview-file-size-spacing: .1px !default;
$preview-file-size-weight: 400 !default;
$after-preview-file-size: 14px !default;
$after-preview-file-line-height: 18px !default;
$after-preview-file-letter-spacing: .1px !default;
$after-preview-file-weight: 500 !default;

$no-preview-text-size-bigger: 18px !default;
$no-preview-line-height-bigger: 26px !default;
$no-preview-letter-sapcing-bigger: 0 !default;
$no-preview-font-weight-bigger: 500 !default;
$preview-file-size-text-bigger: 16px !default;
$preview-file-size-height-bigger: 20px !default;
$preview-file-size-spacing-bigger: .1px !default;
$preview-file-size-weight-bigger: 400 !default;
$after-preview-file-size-bigger: 14px !default;
$after-preview-file-line-height-bigger: 18px !default;
$after-preview-file-letter-spacing-bigger: .1px !default;
$after-preview-file-weight-bigger: 500 !default;

$progress-video-icon-size: 18px !default;
$progress-video-icon-height: 100% !default;
$progress-video-icon-weight: 400 !default;
$pin-file-icon-size: 16px !default;
$pin-file-icon-height: 16px !default;
$pin-file-icon-weight: 400 !default;
$reply-file-icon-size: 20px !default;
$reply-file-icon-height: 100% !default;
$reply-file-icon-weight: 400 !default;
$after-preview-download-size: 16px !default;
$after-preview-download-height: 100% !default;
$after-preview-download-weight: 400 !default;
$after-preview-close-size: 16px !default;
$after-preview-close-height: 20px !default;
$after-preview-close-weight: 400 !default;

$progress-video-icon-size-bigger: 22px !default;
$progress-video-icon-height-bigger: 100% !default;
$pin-file-icon-size-bigger: 20px !default;
$pin-file-icon-height-bigger: 100% !default;
$reply-file-icon-size-bigger: 20px !default;
$reply-file-icon-height-bigger: 100% !default;
$after-preview-download-size-bigger: 20px !default;
$after-preview-download-height-bigger: 100% !default;
$after-preview-close-size-bigger: 18px !default;
$after-preview-close-height-bigger: 20px !default;

$file-progress-bar-success-color: $primary !default;
$file-progress-bar-failure-color: $border-error !default;
$file-progress-bar-bg-color: $content-bg-color-alt3 !default;
$files-container-margin: 4px !default;

$chat-ui-border: 1px !default;
$chat-content-gap: 4px !default;
$chat-content-padding-bottom: 10px !default;
$chat-header-border-bottom: 1px !default;
$chat-header-margin-left: 16px !default;
$chat-header-font-size: 16px !default;
$chat-header-gap: 12px !default;
$message-wrapper-gap: 8px !default;
$message-wrapper-padding-top: 10px !default;
$scrollbar-thumb-border-radius: 10px !default;
$message-group-margin: 4px !default;
$chat-message-toolbar-radius: 4px !default;
$toolbar-item-padding: 2px 4px !default;
$toolbar-first-child-margin-left: 2px !default;
$toolbar-last-child-margin-right: 2px !default;
$tbar-btn-padding: 2px !default;
$forwarded-indicator-font-size: 12px !default;
$forwarded-indicator-gap: 5px !default;
$forwarded-indicator-margin-bottom: 4px !default;
$forward-arrow-font-size: 14px !default;
$forward-arrow-padding: 1px 4px !default;
$message-header-container-gap: 4px !default;
$message-header-margin: 0 !default;
$chat-footer-margin: 0 auto !default;
$chat-textarea-border-radius: 10px !default;
$chat-textarea-font-size: 14px !default;
$message-icon-font-size: 14px !default;
$status-item-gap: 2px !default;
$status-text-margin-right: 18px !default;
$timebreak-margin: 1px 8px !default;
$timebreak-before-margin-right: 12px !default;
$timebreak-after-margin-left: 12px !default;
$timestamp-border: 1px !default;
$typing-indicator-gap: .25rem !default;
$typing-indicator-margin-left: 5px !default;
$user-icon-margin-right: -16px !default;
$user-icon-font-size: 10px !default;
$user-text-margin-left: 20px !default;
$indicator-wrapper-gap: 2px !default;
$indicator-border-radius: 9999px !default;
$typing-suggestions-gap: 2px !default;
$suggestion-item-template-padding: 0 !default;
$suggestions-ul-padding: 0 !default;
$suggestions-ul-margin: 0 !default;
$suggestions-ul-margin-right: 1px !default;
$suggestions-li-margin: 8px 4px 0 !default;
$suggestions-li-border: 1px !default;
$rtl-left-padding-left: unset !default;
$rtl-typing-indicator-margin-right: 5px !default;
$rtl-user-text-margin-right: 20px !default;
$rtl-user-icon-margin-left: -16px !default;
$rtl-user-icon-margin-right: unset !default;
$rtl-header-margin-left: unset !default;
$rtl-header-margin-right: 16px !default;
$rtl-suggestions-ul-margin-right: unset !default;
$rtl-suggestions-ul-margin-left: 1px !default;
$rtl-status-text-margin-right: unset !default;
$rtl-status-text-margin-left: 18px !default;
$footer-icons-wrapper-padding-right: unset !default;
$empty-chat-template-margin: auto !default;
$user-status-icon-border: 1px !default;
$reply-wrapper-padding: 10px 8px 8px !default;
$reply-wrapper-margin: 5px !default;
$reply-wrapper-border-radius: 5px !default;
$reply-content-padding-left: 8px !default;
$reply-message-details-gap: 5px !default;
$reply-message-details-padding-bottom: 4px !default;
$reply-chat-close-margin-left: auto !default;
$reply-chat-close-font-size: 14px !default;
$reply-message-user-font-size: 12px !default;
$reply-message-user-font-weight: 500 !default;
$reply-message-text-font-size: 14px !default;
$reply-message-time-font-size: 10px !default;
$pinned-message-wrapper-padding: 10px !default;
$pinned-message-gap: 10px !default;
$pinned-message-font-size: 14px !default;
$pinned-dropdown-popup-border: none !default;
$pinned-dropdown-popup-margin-left: auto !default;
$attached-file-padding: 2px 0 !default;
$image-video-border-radius: 6px !default;
$play-icon-wrapper-border-radius: 50% !default;
$file-wrapper-border-radius: 4px !default;
$pinned-message-text-gap: 8px !default;
$pinned-img-thumb-border-radius: 6px !default;
$pinned-file-name-font-size: 14px !default;
$reply-media-preview-gap: 5px !default;
$reply-media-preview-margin-right: 5px !default;
$reply-media-thumb-border-radius: 3px !default;
$preview-header-padding: 8px 12px !default;
$preview-header-close-margin-left: 8px !default;
$preview-file-name-padding-right: 12px !default;
$image-video-preview-margin: auto !default;
$preview-file-border-radius: 6px !default;
$preview-file-border: 1px !default;
$file-document-font-size: 80px !default;
$chat-mention-padding: 8px 12px !default;
$mention-user-name-size: 14px !default;
$mention-user-name-line-height: 22px !default;
$mention-user-name-margin: 9px 8px !default;
$mention-user-icon-size: 14px !default;
$chat-mention-border-radius: 4px !default;
$footer-border-top-right-radius: 4px !default;
$footer-border-top-left-radius: 4px !default;
$preview-file-text-top: 24px !default;
$preview-file-text-bottom: 12px !default;

$bigger-message-icon-size: 16px !default;
$bigger-user-icon-font-size: 14px !default;
$bigger-user-text-margin-left: 22px !default;
$bigger-user-icon-margin-right: -18px !default;
$bigger-chat-textarea-size: 16px !default;
$bigger-rtl-left-padding-left: unset !default;
$bigger-rtl-user-text-margin-right: 22px !default;
$bigger-rtl-user-text-margin-left: unset !default;
$bigger-rtl-user-icon-margin-left: -18px !default;
$bigger-rtl-user-icon-margin-right: unset !default;
$bigger-rtl-icons-wrapper-padding-right: unset !default;
$bigger-user-status-icon-border: 1px !default;
$bigger-tbar-first-item-margin-left: 2px !default;
$bigger-tbar-last-item-margin-right: 2px !default;
$bigger-tbar-btn-padding: 4px 2px !default;
$bigger-reply-file-name-size: 14px !default;
$bigger-mention-user-name-size: 16px !default;
$bigger-mention-user-name-height: 24px !default;
$bigger-mention-user-name-margin: 10px 8px !default;
$bigger-mention-user-icon-size: 16px !default;

$footer-template-border: 1px !default;
$reply-content-border-left: 2px !default;
$message-toolbar-border: 1px !default;
$file-wrapper-border-width: 1px !default;
$chat-mention-user-icon-radius: 50% !default;
$mention-popup-border-radius: 4px !default;

$header-height: 100% !default;
$message-wrapper-height: 100% !default;
$chat-message-toolbar-height: 32px !default;
$chat-textarea-height: 100% !default;
$message-icon-height: 32px !default;
$status-icon-height: 16px !default;
$timebreak-height: 1px !default;
$user-icon-height: 24px !default;
$indicator-wrapper-height: 12px !default;
$indicator-height: .3rem !default;
$header-icon-height: 32px !default;
$spinner-pane-height: 35px !default;
$image-video-height: auto !default;
$pinned-img-thumb-height: 30px !default;
$reply-media-thumb-height: 20px !default;
$preview-overlay-height: 100% !default;
$preview-header-height: 40px !default;
$media-wrapper-height: 100% !default;
$preview-file-height: 70% !default;
$mention-user-icon-height: 40px !default;
$chat-mention-list-item-height: 56px !default;
$focus-wave-effect-height: 2px !default;
$play-icon-wrapper-height: 40px !default;

$bigger-message-icon-height: 40px !default;
$bigger-user-icon-font-height: 32px !default;
$chat-status-icon-bigger-height: 18px !default;
$chat-message-toolbar-bigger-height: 40px !default;
$pinned-img-thumb-bigger-height: 32px !default;
$reply-media-thumb-bigger-height: 30px !default;
$preview-header-bigger-height: 48px !default;
$bigger-mention-user-icon-height: 44px !default;
$chat-mention-list-item-bigger-height: 62px !default;
$chat-content-height: calc(100% - $chat-header-height) !default;
$chat-content-bigger-height: calc(100% - $chat-bigger-header-height) !default;
$chat-left-message-item-padding-left: calc(32px + $user-icon-gap) !default;
$chat-left-message-item-padding-right: calc(32px + $user-icon-gap) !default;
$chat-left-message-item-bigger-padding-left: calc(40px + $user-icon-bigger-gap) !default;
$chat-left-message-item-bigger-padding-right: calc(40px + $user-icon-bigger-gap) !default;
$message-icon-width: 32px !default;
$status-icon-width: 16px !default;
$user-icon-width: 24px !default;
$indicator-width: .3rem !default;
$header-icon-width: 32px !default;
$user-status-icon-height: 12px !default;
$user-status-icon-width: 12px !default;
$mention-user-icon-width: 40px !default;
$pinned-img-thumb-width: 30px !default;
$reply-media-thumb-width: 20px !default;
$bigger-message-icon-width: 40px !default;
$bigger-user-icon-font-width: 32px !default;
$chat-status-icon-bigger-width: 18px !default;
$pinned-img-thumb-bigger-width: 32px !default;
$reply-media-thumb-bigger-width: 30px !default;
$bigger-mention-user-icon-width: 44px !default;
$chat-video-wrapper-bigger-height: 44px !default;
$file-item-margin: 2px !default;
$chat-file-details-padding-right: 12px !default;
$chat-file-format-icon-padding: 3px !default;
$chat-file-document-icon-font-size: 24px !default;
$chat-attached-file-details-padding: 3px 0 3px 2px !default;
$chat-attached-file-text-font-weight: 400 !default;
$chat-attached-file-text-font-size: 10px !default;
$chat-attached-file-text-line-height: 16px !default;
$chat-attached-file-clear-icon-padding: 4px !default;
$chat-clear-icon-border-radius: 4px !default;
$chat-progress-bar-border-radius: 4px !default;
$chat-progress-fill-height: 3px !default;
$file-wrapper-margin: 0 !default;
$file-hover-bg: $content-bg-color-hover !default;
$file-pressed-bg: $content-bg-color-pressed !default;
$file-close-icon-hover-bg: $secondary-bg-color-hover !default;
$file-close-icon-pressed-bg: $secondary-bg-color-pressed !default;
$file-close-icon-hover-color: $icon-color-hover !default;
$file-close-icon-pressed-color: $icon-color-pressed !default;
$chat-attached-file-clear-icon-margin: 8px 4px 8px 0 !default;