@use 'ej2-base/styles/common/mixin' as *;
@include export-module('aiassistview-bigger') {
  .e-bigger.e-aiassistview,
  .e-bigger .e-aiassistview {
    .e-view-header {
      height: $aiassist-bigger-header-height;
      .e-toolbar {
        .e-toolbar-items {
          .e-toolbar-left {
            height: $toolbar-left-bigger-height;
          }
          .e-toolbar-item {
            &.e-assist-view-header,
            &.e-custom-view-header {
              @if ($skin-name == 'highcontrast') {
                // To apply box-shadow styling during keyboard navigation
                padding: $bigger-view-header-padding;
              }
              @else {
                padding: $bigger-view-header-padding;
              }
              .e-tbar-btn {
                padding: $bigger-tbar-btn-padding;
                .e-btn-icon {
                  padding: $bigger-btn-icon-padding;
                }
              }
            }
          }
        }
      }
    }

    .e-view-content {
      height: $view-content-bigger-height;
    }
    .e-prompt-icon {
      min-height: $aiassist-bigger-icon-height;
    }
    .e-output-icon {
      height: $aiassist-bigger-icon-height;
    }
    .e-prompt-icon,
    .e-output-icon {
      min-width: $aiassist-bigger-icon-width;
    }
    .e-loading-body,
    .e-content-body,
    .e-loading-footer {
      padding: $bigger-loading-footer-padding;
    }
    .e-prompt-text {
      padding: $prompt-text-bigger-padding;
      line-height: $bigger-prompt-text-line-height;
      min-height: 40px;
      box-sizing: border-box;
    }
    .e-content-container {
      font-size: $bigger-content-container-font-size;
    }
    .e-suggestion-header {
      font-size: $bigger-suggestion-header-font-size;
      font-weight: $suggesstions-header-bigger-font-weight;
      margin-bottom: $bigger-suggestion-header-margin-bottom;
    }
    .e-suggestions {
      &.e-suggestion-item-template ul li {
        padding: $bigger-suggestion-item-padding;
      }
      li {
        line-height: $bigger-suggestion-li-line-height;
        font-weight: $suggesstions-bigger-font-weight;
        padding: $suggesstions-bigger-list-padding;
        margin: $suggesstions-bigger-list-margin;
        height: $bigger-suggestion-li-height;
        box-sizing: border-box;
      }
    }
    .e-footer {
      .e-assist-stop {
        height: $response-stopper-bigger-height;
        width: $response-stopper-bigger-width;
        min-height: $response-stopper-bigger-height;
        padding: $assist-stop-padding-bigger;
        box-sizing: border-box;
        line-height: $response-stopper-bigger-line-height;
        font-weight: $response-stopper-bigger-font-weight;
        font-size: $response-stopper-bigger-font-size;
      }
      &:not(.e-footer-template) {
        .e-assist-send {
          font-size: $send-icon-size-bigger;
        }
        .e-assist-clear-icon:not(.e-assist-clear-icon-hide) {
          font-size: $clear-icon-size-bigger;
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding-bigger;
          }
        }
      }
      .e-footer-icons-wrapper {
        gap: $assist-footer-icons-gap-bigger;
        padding: $assist-footer-icons-padding-bigger;
        .e-toolbar {
          height: $assist-footer-tbar-min-height-bigger;
          min-height: $assist-footer-tbar-min-height-bigger;
          .e-tbar-btn {
            min-height: $assist-footer-tbar-min-height-bigger;
            min-width: $assist-footer-tbar-min-height-bigger;
            max-width: $assist-footer-tbar-min-height-bigger;
          }
          .e-tbar-btn:has(.e-assist-stop) {
            max-width: $assist-footer-tbar-min-height-bigger;
            .e-btn-icon {
              min-width: $assist-footer-tbar-min-height-bigger;
            }
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $assist-footer-tbar-min-height-bigger;
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
        }
        .e-assist-attachment-icon {
          font-size: $assist-attachment-icon-font-size-bigger;
        }
      }
      .e-assist-textarea {
        min-height: $assist-textarea-min-height-bigger;
        line-height: $assist-textarea-line-height-bigger;
        padding: $assist-textarea-padding-bigger;
        font-size: $bigger-assist-textarea-font-size;
      }
    }
    
    &.e-rtl {
      .e-view-header .e-toolbar-item {
        &.e-assist-view-header,
        &.e-custom-view-header {
          .e-tbar-btn .e-btn-icon {
            padding: $bigger-rtl-btn-icon-padding;
          }
        }
      }
      .e-suggestions {
        li {
          margin: $suggesstions-bigger-list-margin-rtl;
        }
      }
      .e-loading-body,
      .e-content-body,
      .e-loading-footer {
        padding: $bigger-rtl-loading-footer-padding;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $assist-footer-icons-rtl-padding-bigger;
          padding-right: $bigger-footer-icons-wrapper-right;
        }
      }
    }

    // Attachment support related styles
    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
      border-radius: $bigger-prompt-uploded-file-border-radius;
      padding: $bigger-prompt-uploded-file-padding;
      gap: $prompt-uploaded-files-gap-bigger;
    }

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

    .e-footer .e-assist-drop-area {
      .e-assist-uploaded-file-item {
        margin: $bigger-prompt-files-margin;
      }
    }

    .e-footer .e-assist-drop-area,
    .e-prompt-content .e-prompt-uploaded-files {
      .e-assist-uploaded-file-item {
        &:not(:has(.e-assist-clear-icon)) .e-assist-file-details {
          padding-right: $bigger-assist-file-details-right;
        }
      }

      .e-assist-file-details {
        padding: $bigger-attached-file-details-padding;
      }

      .e-assist-clear-icon {
        padding: $bigger-attached-file-clear-icon-padding;
      }
    }

    .e-view-content {
      .e-upload-failure-alert {
        padding: $bigger-file-failure-padding;
        border-radius: $bigger-file-failure-border-radius;
        .e-assist-clear-icon {
          font-size: $bigger-file-failure-close-icon-font-size;
          line-height: $bigger-file-failure-close-icon-line-height;
        }
        .e-failure-message {
          font-size: $bigger-file-failure-msg-font-size;
          line-height: $bigger-file-failure-msg-line-height;
        }
        .e-assist-circle-close {
          font-size: $bigger-file-failure-circle-close-icon-font-size;
          margin-right: $bigger-file-failure-circle-close-icon-margin;
        }
      }
    }
  }
}