@use 'variables' as *;
@include export-module('inlineaiassist-layout') {
  .e-inlineaiassist {
    display: flex;
    flex-direction: column;
    width: 100%;

    &.e-popup {
      justify-content: center;
      border-radius: $inline-ai-assist-popup-border-radius;
    }

    .e-inline-assist-popup {
      border-radius: $inline-ai-assist-popup-border-radius;
      display: flex;
      flex-direction: column;
    }

    .e-inline-assist-content {
      display: flex;
      flex-direction: column;
    }

    .e-content:has(.e-output-container) {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      padding: $inline-ai-assist-content-padding;
      border-radius: $inline-ai-assist-content-border-radius;
    }

    .e-response-text {
      line-height: $inline-ai-assist-response-line-height;
      font-size: $inline-ai-assist-response-font-size;
      word-wrap: break-word;
    }

    .e-toolbar .e-toolbar-items .e-tbar-btn {
      cursor: pointer;
      &:hover,
      &:focus,
      &:active {
        padding: $inline-ai-assist-tbar-btn-padding;
      }
    }

    .e-footer {
      position: relative;
      width: 100%;
      .e-assist-textarea::-webkit-scrollbar-thumb {
        border-radius: 10px;
      }
      .e-assist-textarea::-webkit-scrollbar {
        width: 4px;
      }
      .hide-scrollbar .e-assist-textarea {
        scrollbar-width: none;
      }

      .e-inline-stop {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: $inline-ai-assist-stop-line-height;
        font-size: $inline-ai-assist-stop-font-size;
        height: $inline-ai-assist-response-stopper-height;
        width: $inline-ai-assist-response-stopper-width;
        padding: 6px;
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        border-radius: $inline-ai-assist-stop-response-border-radius;
        &:focus-visible {
          outline: 1px solid;
        }
      }

      &.e-footer-expanded.e-toolbar-inline {
        .e-footer-icons-wrapper {
          .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
            position: absolute;
          }
        }
      }

      &:not(.e-footer-expanded).e-toolbar-inline {
        .e-footer-icons-wrapper {
          width: fit-content;
          .e-toolbar-items.e-tbar-pos {
            .e-toolbar-right {
              position: unset;
            }
            .e-toolbar-center {
              position: absolute;
            }
          }
        }
      }
      .e-footer-icons-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: $inline-ai-assist-footer-icons-wrapper-padding;
        .e-toolbar {
          width: 100%;
          min-height: $inline-ai-assist-footer-tbar-min-height;
          .e-toolbar-item:not(.e-separator):not(.e-spacer) {
            padding: unset;
          }
          .e-tbar-btn {
            min-height: $inline-ai-assist-footer-tbar-min-height;
            min-width: $inline-ai-assist-footer-tbar-min-height;
            max-width: $inline-ai-assist-footer-tbar-min-height;
            cursor: default;
            &:focus {
              padding: 0;
            }
          }
          .e-tbar-btn:has(.e-inline-stop) {
            max-width: $inline-ai-assist-footer-tbar-min-height;
            .e-btn-icon {
              min-width: $inline-ai-assist-footer-tbar-min-height;
              max-height: $inline-ai-assist-footer-tbar-min-height;
            }
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $inline-ai-assist-footer-tbar-min-height;
            .e-tbar-btn:focus-visible .e-icons:not(.disabled) {
              outline: 1px solid;
              padding: $inline-ai-assist-footer-tbar-btn-padding;
            }
          }
        }
        .e-icons {
          cursor: pointer;
        }
      }
      .e-assist-textarea {
        height: 100%;
        width: 100%;
        min-height: $inline-ai-assist-textarea-min-height;
        outline: none;
        overflow-y: auto;
        max-height: 280px;
        line-height: $inline-ai-assist-textarea-line-height;
        padding: $inline-ai-assist-textarea-padding;
        font-size: $inline-ai-assist-textarea-font-size;
      }
      .e-assist-textarea[placeholder]:empty::before {
        content: attr(placeholder);
        cursor: text;
      }

      .e-assist-textarea.e-response-indicator-active {
        cursor: default;
        display: flex;
        align-items: center;
      }

      .e-assist-response-indicator {
        display: flex;
        align-items: baseline;
        gap: $inline-ai-assist-indicator-wrapper-gap;
        .e-assist-indicator {
          border-radius: $inline-ai-assist-indicator-border-radius;
          height: .3rem;
          width: .3rem;
        }
        .e-assist-indicator:nth-child(1) {
          animation-delay: .3333s;
        }
        .e-assist-indicator:nth-child(2) {
          animation-delay: .6666s;
        }
        .e-assist-indicator:nth-child(3) {
          animation-delay: .9999s;
        }

        .e-assist-indicator-text {
          font-size: $inline-ai-assist-textarea-font-size;
        }
      }

      &:not(.e-footer-template) {
        display: flex;
        flex-direction: column;
        border-radius: $inline-ai-assist-footer-border-radius;
        &.e-footer-expanded .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $inline-ai-assist-expanded-footer-icons-wrapper-padding;
            justify-content: end;
          }
          .e-assist-textarea {
            width: 100%;
          }
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $inline-ai-assist-toolbar-bottom-footer-icons-wrapper-padding;
            .e-toolbar{
              width: 100%;
              .e-toolbar-left .e-toolbar-item:first-child {
                margin-left: unset;
              }
            }
          }
        }
        .e-inline-send {
          font-size: $inline-ai-assist-send-font-size;
        }
        .e-inline-send.disabled {
          pointer-events: none;
          opacity: .5;
          cursor: not-allowed;
        }
        .e-inline-send.enabled {
          pointer-events: auto;
          opacity: 1;
          cursor: pointer;
        }
        .e-textarea-icons-wrapper {
          display: flex;
          flex-direction: row;
        }
      }
      .e-hidden-textarea {
        display: none;
      }
    }
  }

  .e-mention-container {
    &.e-popup {
      border-radius: 4px;
    }
    .e-dropdownbase .e-list-item {
      margin-bottom: 0;
    }
  }
}
