@use 'ej2-base/styles/common/mixin' as *;
@include export-module('chatui-theme') {
  .e-chat-ui {
    border-color: $chat-border-color;
    background: $chat-bg-color;
    .e-chat-content {
      color: $chat-text-color;
    }
    .e-pinned-dropdown-popup.e-active {
      @if ($skin-name == 'highcontrast') {
        color: $content-font;
      }
      @if ($skin-name == 'highcontrast-light') {
        color: $content-font;
      }
      @if ($skin-name == 'bootstrap4') {
        color: $black;
      }
    }
    .e-pinned-dropdown-popup {
      @if ($skin-name == 'bootstrap4') {
        color: $black;
      }
      &:hover {
        @if ($theme-name == 'fluent2-highcontrast') {
          color: unset;
        }
      }
    }
    .e-right .e-message-content {
      background: $chat-right-bg-color;
      color: $chat-right-text-color;
    }
    .e-left .e-message-content {
      color: $chat-left-text-color;
      background: $chat-left-bg-color;
      &:active,
      &:focus {
        color: $chat-left-text-color-active;
        background: $chat-left-bg-color-active;
      }
      &:hover {
        color: $chat-left-text-color-hover;
        background: $chat-left-bg-color-hover;
      }
    }
    .e-message-wrapper {
      &::-webkit-scrollbar-thumb {
        background: $chat-scrollbar-color;
      }
      .e-message-header {
        color: $message-header-color;
      }
      .e-time {
        color: $message-time-color;
      }
    }
    .e-chat-header {
      border-bottom-color: $chat-border-color;
      background: $chat-header-bg-color;
      border-color: $chat-header-bg-color;
      color: $chat-header-color;
      .e-toolbar,
      .e-toolbar-items,
      .e-tbar-btn {
        background: $chat-header-bg-color;
        .e-tbar-btn-text,
        .e-btn-icon {
          color: $chat-header-color;
        }
      }
    }
    .e-timebreak {
      &::before,
      &::after {
        background: $timebreak-border-color;
      }
    }
    .e-timestamp {
      background: $timebreak-bg-color;
      color: $timebreak-color;
      border-color: $timestamp-border-color;
    }
    .e-chat-error {
      color: $chat-error-color;
    }
    .e-chat-seen {
      color: $chat-seen-color;
    }
    .e-footer {
      .e-chat-textarea::-webkit-scrollbar-thumb {
        background: $chat-scrollbar-color;
      }
      @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
        &.e-footer-focus-wave-effect::before,
        &.e-footer-focus-wave-effect::after {
          background-color: $chat-footer-wave-color;
        }
      }
      .e-chat-textarea[placeholder]:empty::before {
        color: $chat-placeholder-color;
      }
      &:not(.e-footer-template) {
        border: $footer-template-border solid $chat-footer-border-color;
        border-bottom-color: $chat-footer-border-btm-color;
        &.e-footer-focused,
        &.e-upload-drag-hover {
          border: $chat-focused-border-width solid $chat-footer-focus-bdr-color;
          @if ($skin-name == 'fluent2') {
            border-bottom-color: $chat-footer-border-btm-color;
          }
          box-shadow: $chat-footer-border-shadow;
        }
        .e-chat-send {
          color: $chat-send-icon-color;
          &.disabled {
            color: $chat-send-icon-disabled-color;
          }
        }
        .e-chat-attachment-icon {
          color: $attachment-icon-color;
        }
      }
    }
    .e-suggestions {
      li {
        color: $chat-suggestion-li-color;
        border-color: $chat-suggestion-li-border-color;
      }
    }
    .e-header-icon,
    .e-message-icon,
    .e-message-icon img,
    .e-user-icon {
      border-radius: 50%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
    .e-user-online {
      background-color: $user-status-icon-online-background-color;
    }
    .e-user-away {
      background-color: $user-status-icon-away-background-color;
    }
    .e-user-busy {
      background-color: $user-status-icon-busy-background-color;
    }
    .e-user-offline {
      background-color: $user-status-icon-offline-background-color;
    }
    .e-message-icon,
    .e-user-icon {
      color: $sender-icon-color;
      @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
        background: $sender-icon-bg-color;
      }
      @else {
        background-color: $sender-icon-bg-color;
      }
    }
    .e-indicator {
      background: $chat-left-bg-color;
      animation: e-chat-indicator-blink 1s infinite;
    }
    .e-user-text {
      color: $typing-user-color;
    }

    @keyframes e-chat-indicator-blink {
      50% {
        background: $message-header-color;
        height: .2rem;
      }
    }
    @if ($skin-name == 'highcontrast') {
      .e-message-group.e-left .e-message-content {
        &:not(:focus),
        &:not(:active),
        &:not(:hover) {
          border: $message-content-border solid rgba(150, 150, 150, 1);
        }
      }
    }
    .e-chat-header {
      .e-toolbar-item {
        &.e-overlay {
          background: unset;
        }
        .e-tbar-btn {
          &:focus,
          &:active,
          &:hover {
            @if ($skin-name == 'highcontrast') {
              background: rgba(104, 87, 8, 1);
            }
          }
          &:hover {
            @if ($theme-name == 'Material3-dark') {
              background: rgba(0, 0, 0, .056);
            }
          }
          &:focus {
            @if ($skin-name == 'Material3') {
              box-shadow: 0 0 0 1px rgba(255, 255, 255, 1);
            }
            @if ($theme-name == 'Material3-dark') {
              box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
            }
          }
          .e-tbar-btn-text,
          .e-btn-icon {
            &:focus,
            &:active,
            &:hover {
              @if ($skin-name == 'highcontrast') {
                color: rgba(255, 255, 255, 1);
              }
            }
            @if ($skin-name == 'bootstrap5' or $theme-name == 'bootstrap5-dark') {
              color: rgba(255, 255, 255, 1);
            }
            &:not(:active) {
              @if ($skin-name == 'Material3') {
                color: rgba(255, 255, 255, 1);
              }
              @if ($theme-name == 'Material3-dark') {
                color: rgba(0, 0, 0, 1);
              }
            }
          }
        }
        .e-dropdown-btn,
        .e-dropdown-btn.e-btn {
          @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
            box-shadow: none;
          }
          &:focus,
          &:active,
          &:hover {
            @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
              box-shadow: none;
            }
          }
        }
      }
    }

    .e-reply-wrapper {
      background: $reply-wrapper-bg-color;
      @if $theme-name == 'fluent2-highcontrast' {
        background-color: rgba(0, 0, 0, 1);
        border: 1px solid rgba(255, 255, 255, 1);
      }
      .e-reply-content {
        border-left: $reply-content-border-left solid $reply-wrapper-border-bg-color;
        @if $theme-name == 'fluent2-highcontrast' {
          border-color: rgba(255, 255, 255, 1);
        }
      }
    }

    .e-chat-message-toolbar:has(.e-toolbar-item) {
      border: $message-toolbar-border solid $message-toolbar-border-color;
    }

    .e-forwarded-indicator {
      color: $chat-message-forward-color;
      .e-forward-arrow {
        color: $chat-message-forward-icon-color;
      }
    }
    .e-pinned-message-wrapper {
      background-color: $pinned-background-color;
    }

    .e-right .e-text .e-chat-mention-user-chip {
      @if ($theme-name == 'fluent2-highcontrast') {
        // Used this value of $theme-dark from fluent 2 highcontrast definition for minimal code usage
        color: rgb(0, 90, 158);
      }
      @else
      {
        color: $mentioned-user-color;
      }
    }

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

    .e-footer .e-chat-textarea.e-mention .e-mention-chip {
      background: unset;
    }
    .e-status-wrapper {
      .e-upload-failed {
        color: $chat-error-color;
      }
    }
    .e-preview-overlay {
      background: $image-preview-overlay-bg;
      .e-preview-header {
        background: $image-preview-header-bg-color;
        color: $image-preview-header-text-color;
        .e-icons {
          color: $file-download-icon-color;
        }
      }
      .e-file-preview {
        background: $preview-file-bg-color;
        border-color: $preview-file-border-color;
        .e-preview-file-text {
          color: $preview-file-text-color;
        }
        .e-file-details {
          color: $preview-file-details-color;
        }
        .e-file-document {
          color: $preview-header-text-color;
        }
      }
    }
    .e-attached-file {
      .e-video-wrapper {
        .e-play-icon-wrapper {
          background-color: $video-play-background-color;
        }
        .e-chat-video-play {
          color: $video-play-icon-color;
        }
      }
    }

    .e-upload-failure-alert {
      background-color: $file-failure-bg-color;
      border: $file-failure-border;
      .e-chat-circle-close {
        color: $file-failure-circle-close-icon-color;
      }
      .e-failure-message {
        color: $file-failure-font-color;
      }
      .e-chat-close {
        color: $file-failure-close-icon-color;
      }
    }

    .e-footer .e-chat-drop-area,
    .e-attached-file {
      .e-chat-uploaded-file-item,
      .e-file-wrapper {
        border: $file-wrapper-border-width solid $file-wrapper-border;
        background-color: $file-wrapper-bg;
      }

      .e-chat-file-icon {
        color: $file-download-icon-color;
      }

      .e-chat-file-size {
        color: $file-size-text-color;
      }

      .e-chat-file-name {
        color: $file-name-text-color;
      }
    }

    .e-footer .e-chat-uploaded-file-item {
      &:hover {
        background-color: $file-hover-bg;
      }
      &:active {
        background-color: $file-pressed-bg;
      }
      .e-chat-close {
        &:hover {
          background: $file-close-icon-hover-bg;
          color: $file-close-icon-hover-color;
        }
        &:active {
          background-color: $file-close-icon-pressed-bg;
          color: $file-close-icon-pressed-color;
        }
      }
    }

    .e-footer .e-chat-drop-area,
    .e-footer .e-attachment-template {
      .e-chat-progress-bar {
        background-color: $file-progress-bar-bg-color;
      }
      .e-chat-progress-fill {
        background-color: $file-progress-bar-success-color;
      }
      .e-chat-progress-fill.e-chat-upload-failed {
        background-color: $file-progress-bar-failure-color;
      }
    }
  }

  // Mention popup related styles for @mention support in chat ui
  .e-chat-mention .e-chat-mention-user-icon,
  .e-chat-mention .e-chat-mention-user-icon img {
    border-radius: $chat-mention-user-icon-radius;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  .e-chat-mention.e-mention.e-popup {
    box-shadow: unset;
    border-radius: $mention-popup-border-radius;
    @if ($skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'FluentUI') {
      border: unset;
    }
    @else {
      border: $mention-popup-border solid $mention-popup-border-color;
    }
    @if ($skin-name == 'Material3') {
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    }
    @if ($skin-name == 'FluentUI') {
      box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .12), 0 .6px 1.8px 0 rgba(0, 0, 0, .12);
    }
  }

  @if ($skin-name == 'material-dark') {
    .e-chat-mention .e-dropdownbase .e-list-item.e-active {
      background-color: rgba(117, 117, 117, 1);
    }
  }

  .e-chat-mention .e-chat-mention-user-icon {
    color: $sender-icon-color;
    @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
      background: $sender-icon-bg-color;
    }
    @else {
      background-color: $sender-icon-bg-color;
    }
  }
}