/* AI Inline Container */
.ProseMirrorAIInline-container {
  @apply relative end-0 z-50 order-5 overflow-hidden border-t bg-white px-4 pb-0 pt-4;

  &.collapsed,
  &.is-loading,
  &.has-suggestions {
    @apply hidden;
  }
}

/* Input Container */
.ProseMirrorAIInline-container-inputContainer {
  @apply flex items-center gap-2 pb-2;
}

.ProseMirrorAIInline-container-inputContainer-submitButton {
  @apply btu-button btu-button-text-hidden btu-button-primary before:btu-icon before:btu-icon-send-horizontal;

  &.is-loading {
    @apply btu-button-fill-none btu-button-error bg-error-50 before:btu-icon-circle-stop;
  }
}

/* Accept/Reject Container */
.ProseMirrorAIInline-container-acceptRejectContainer {
  @apply Dropdown;

  &:not([hidden]) {
    @apply Dropdown-is-open;
  }

  &[hidden] {
    @apply hidden;
  }
}

/* Actions Menu */
.ProseMirrorAIInline-container-actions {
  @apply flex flex-col;

  > li {
    @apply m-0 p-0;

    > button {
      @apply flex w-full cursor-pointer items-center gap-1 rounded px-3 py-2 text-start text-sm text-gray-900 hover:bg-gray-100;
    }
  }
}

.ProseMirrorAIInline-container-actions-accept-icon {
  @apply me-1 before:btu-icon before:btu-icon-check;
}

.ProseMirrorAIInline-container-actions-rejectAll-icon {
  @apply me-1 before:btu-icon before:btu-icon-x;
}

.ProseMirrorAIInline-container-actions-tryAgain-icon {
  @apply me-1 before:btu-icon before:btu-icon-refresh-cw;
}

/* Suggestions Dropdown */
.ProseMirrorAIInline-container-suggestions-dropdown {
  @apply -mx-4 mt-2 w-[calc(100%+2rem)] border-t border-gray-200;
}

.ProseMirrorAIInline-container-suggestions-title {
  @apply mx-4 mb-2 mt-4 text-sm text-gray-500;
}

.ProseMirrorAIInline-container-suggestions-list {
  @apply flex flex-col;
}

.ProseMirrorAIInline-container-suggestions-list-item {
  @apply p-0;

  > button {
    all: unset;
    @apply box-border blokk w-full cursor-pointer text-start;

    &:disabled,
    &.is-disabled {
      @apply cursor-default opacity-50;
    }
  }

  &.is-empty {
    @apply pointer-events-none cursor-default px-4 py-2;
  }
}

.ProseMirrorAIInline-container-suggestion-item {
  @apply cursor-pointer border-0 bg-transparent px-4 py-2 text-start text-sm text-gray-900 transition-colors duration-200 hover:bg-gray-300;
}

/* Loading Overlay */
.ProseMirrorAIInline-loadingOverlay {
  @apply order-5 flex-col border-t bg-white px-4 pb-0 pt-4;

  display: none;

  &.is-loading {
    display: flex;
  }
}

.ProseMirrorAIInline-loadingOverlay-prompt {
  @apply mb-2 text-sm text-gray-400;
}

.ProseMirrorAIInline-loadingOverlay-spinner {
  @apply flex py-2;
}

.ProseMirrorAIInline-loadingOverlay-spinner-icon {
  @apply mt-0 h-5 w-5 animate-spin before:btu-icon before:btu-icon-loader;
}

.ProseMirrorAIInline-loadingOverlay-spinner-text {
  @apply my-0 me-4 ms-2 text-sm text-gray-500;
}
