@use 'sass:color';

$inline-ai-assist-bg: $grey-white !default;
$inline-ai-assist-popup-border-radius: 2px !default;
$inline-ai-assist-content-padding: 12px 12px 16px 12px !default;
$inline-ai-assist-content-border-radius: 4px 4px 0 0 !default;
$inline-ai-assist-response-line-height: 22px !default;
$inline-ai-assist-response-font-size: 14px !default;
$inline-ai-assist-tbar-btn-padding: 0 8px !default;
$inline-ai-assist-footer-padding: 5px 0 5px 5px !default;
$inline-ai-assist-stop-line-height: 14px !default;
$inline-ai-assist-stop-font-size: 14px !default;
$inline-ai-assist-footer-icons-wrapper-padding: 12px 12px 12px 0 !default;
$inline-ai-assist-footer-tbar-min-height: 34px !default;
$inline-ai-assist-footer-tbar-btn-padding: 4px !default;
$inline-ai-assist-textarea-min-height: 42px !default;
$inline-ai-assist-textarea-line-height: 22px !default;
$inline-ai-assist-textarea-padding: 10px 12px !default;
$inline-ai-assist-textarea-font-size: 14px !default;
$inline-ai-assist-footer-border-radius: 4px !default;
$inline-ai-assist-expanded-footer-icons-wrapper-padding: 6px 12px !default;
$inline-ai-assist-toolbar-bottom-footer-icons-wrapper-padding: 6px 12px !default;
$inline-ai-assist-send-font-size: 16px !default;

$inline-ai-assist-popup-border: 1px solid $grey-cc !default;
$inline-ai-assist-response-text-color: $grey-light-font !default;
$inline-ai-assist-textarea-placeholder-color: $grey-88 !default;
$inline-ai-assist-footer-focused-border-color: rgba(97, 97, 97, 1) !default;
$inline-ai-assist-send-color: $grey-light-font !default;
$inline-ai-assist-send-disabled-color: $grey-dd !default;
$inline-ai-assist-content-bg: $grey-white !default;
$inline-ai-assist-popup-box-shadow: 0 1px 21px -3px rgba(0, 0, 0, .01) !default;
$inline-ai-assist-footer-bg: $grey-white !default;
$inline-ai-assist-content-border-bottom: 1px solid $grey-cc !default;
$inline-ai-assist-response-stopper-bg-color: rgba(117, 172, 219, 1) !default;
$inline-ai-assist-response-stopper-item-color: $brand-primary !default;
$inline-ai-assist-text-selection-bg: rgba(117, 172, 219, 1) !default;
$inline-ai-assist-text-selection-color: $brand-primary-font !default;

$inline-ai-assist-bigger-send-size: 20px !default;
$inline-ai-assist-bigger-bottom-icons-wrapper-padding: 16px 24px !default;
$inline-ai-assist-bigger-footer-icons-wrapper-padding: 16px 24px 16px 0 !default;
$inline-ai-assist-bigger-footer-tbar-min-height: 40px !default;
$inline-ai-assist-bigger-assist-textarea-min-height: 52px !default;
$inline-ai-assist-bigger-assist-textarea-line-height: 24px !default;
$inline-ai-assist-bigger-assist-textarea-padding: 14px !default;
$inline-ai-assist-bigger-assist-textarea-size: 16px !default;
$inline-ai-assist-response-stopper-height: 32px !default;
$inline-ai-assist-response-stopper-width: 32px !default;
$inline-ai-assist-stop-response-border-radius: 100px !default;
$inline-ai-assist-response-stopper-bigger-height: 40px !default;
$inline-ai-assist-response-stopper-bigger-width: 40px !default;
$inline-ai-assist-response-stopper-bigger-line-height: 20px !default;
$inline-ai-assist-response-stopper-bigger-font-size: 16px !default;
$inline-ai-assist-stop-padding-bigger: 11px !default;
$inline-ai-assist-indicator-wrapper-gap: 2px !default;
$inline-ai-assist-indicator-border-radius: 9999px !default;
$inline-ai-assist-indicator-bg: $grey-f9 !default;
$inline-ai-assist-indicator-blink-bg: $brand-primary !default;

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

        .e-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;
    }
  }
}

@include export-module('e-inlineaiassist-theme') {
  .e-inlineaiassist {
    background: $inline-ai-assist-bg;
    box-shadow: $inline-ai-assist-popup-box-shadow;
    &.e-popup {
      border: $inline-ai-assist-popup-border;
    }
    .e-response-text {
      color: $inline-ai-assist-response-text-color;
    }

    .e-toolbar-item::after {
      background-color: transparent;
    }
    .e-toolbar,
    .e-toolbar-items,
    .e-toolbar .e-toolbar-items .e-tbar-btn {
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .e-footer {
      background: $inline-ai-assist-footer-bg;
      .e-assist-textarea::-webkit-scrollbar-thumb {
        background: rgba(153, 153, 153, 1);
      }
      .e-assist-textarea[placeholder]:empty::before {
        color: $inline-ai-assist-textarea-placeholder-color;
      }
      &:not(.e-footer-template) {
        &.e-footer-focused {
          border-bottom-color: $inline-ai-assist-footer-focused-border-color;
        }
        .e-inline-send {
          color: $inline-ai-assist-send-color;
          &.disabled {
            color: $inline-ai-assist-send-disabled-color;
          }
        }
      }
      .e-footer-icons-wrapper {
        .e-toolbar .e-toolbar-item {
          .e-tbar-btn {
            &:focus {
              box-shadow: none;
            }
            &:hover:not(:focus-visible),
            &:active {
              background: transparent;
              box-shadow: none;
              .e-icons {
                color: $inline-ai-assist-send-color;
              }
              .e-icons.disabled {
                color: $inline-ai-assist-send-disabled-color;
              }
              .e-inline-stop {
                color: $inline-ai-assist-response-stopper-item-color;
                @if ($theme-name == 'fluent2-highcontrast') {
                  color: rgba(27, 26, 25, 1);
                }
              }
            }
            &:focus:not(:focus-visible) {
              outline: none;
              box-shadow: none;
              background: transparent;
            }
          }
        }
      }
      .e-inline-stop.e-icons {
        color: $inline-ai-assist-response-stopper-item-color;
        background-color: $inline-ai-assist-response-stopper-bg-color;
        @if ($theme-name == 'fluent2-highcontrast') {
          color: rgba(27, 26, 25, 1);
        }
      }
    }

    .e-content:has(.e-output-container) {
      background: $inline-ai-assist-content-bg;
      border-bottom: $inline-ai-assist-content-border-bottom;
    }

    .e-indicator {
      background: $inline-ai-assist-indicator-bg;
      animation: e-inline-indicator-blink 1s infinite;
    }
    .e-indicator-text {
      color: $inline-ai-assist-textarea-placeholder-color;
    }

    @keyframes e-inline-indicator-blink {
      50% {
        background: $inline-ai-assist-indicator-blink-bg;
        height: .2rem;
      }
    }
  }
  .e-inlineaiassist-selected-text {
    background: $inline-ai-assist-text-selection-bg;
    color: $inline-ai-assist-text-selection-color;
  }
}

@include export-module('inlineaiassist-bootstrap-icons') {
  .e-inline-send::before {
    content: '\e816';
  }
  .e-inline-accept::before {
    content: '\e97d';
  }
  .e-inline-discard::before {
    content: '\e7fc';
  }
  .e-inline-stop::before {
    content: '\e16e';
  }
}

@include export-module('inlineaiassist-bigger') {
  .e-bigger.e-inlineaiassist,
  .e-bigger .e-inlineaiassist {
    .e-footer {
      .e-inline-stop {
        height: $inline-ai-assist-response-stopper-bigger-height;
        width: $inline-ai-assist-response-stopper-bigger-width;
        min-height: $inline-ai-assist-response-stopper-bigger-height;
        padding: $inline-ai-assist-stop-padding-bigger;
        box-sizing: border-box;
        line-height: $inline-ai-assist-response-stopper-bigger-line-height;
        font-size: $inline-ai-assist-response-stopper-bigger-font-size;
      }
      &:not(.e-footer-template) {
        .e-inline-send {
          font-size: $inline-ai-assist-bigger-send-size;
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          .e-footer-icons-wrapper {
            padding: $inline-ai-assist-bigger-bottom-icons-wrapper-padding;
          }
        }
      }
      .e-footer-icons-wrapper {
        padding: $inline-ai-assist-bigger-footer-icons-wrapper-padding;
        padding-left: 0;
        .e-toolbar {
          min-height: $inline-ai-assist-bigger-footer-tbar-min-height;
          .e-tbar-btn {
            min-height: $inline-ai-assist-bigger-footer-tbar-min-height;
            min-width: $inline-ai-assist-bigger-footer-tbar-min-height;
            max-width: $inline-ai-assist-bigger-footer-tbar-min-height;
          }
          .e-tbar-btn:has(.e-inline-stop) {
            max-width: $inline-ai-assist-bigger-footer-tbar-min-height;
            .e-btn-icon {
              min-width: $inline-ai-assist-bigger-footer-tbar-min-height;
            }
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $inline-ai-assist-bigger-footer-tbar-min-height;
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
        }
      }
      .e-assist-textarea {
        min-height: $inline-ai-assist-bigger-assist-textarea-min-height;
        line-height: $inline-ai-assist-bigger-assist-textarea-line-height;
        padding: $inline-ai-assist-bigger-assist-textarea-padding;
        font-size: $inline-ai-assist-bigger-assist-textarea-size;
      }
    }
  }
}