@import (reference) url('../../../../Dropdown.less');
@import (reference) url('../../../../Icon.less');
@import (reference) url('../../../../IconButton.less');

// AI Inline Container
.ProseMirrorAIInline-container {
  background: var(--color-white);
  border: 1px solid var(--color-gray3);
  border-radius: var(--borderRadius-s);
  box-shadow: var(--shadow-s);
  left: 0;
  order: 5;
  overflow: hidden;
  padding: var(--gap-s) var(--gap-s) 0;
  position: relative;
  right: 0;
  z-index: var(--zIndex-dropdown);

  &.collapsed,
  &.is-loading,
  &.has-suggestions {
    display: none;
  }

  // Input Container
  &-inputContainer {
    align-items: center;
    display: flex;
    gap: var(--gap-s);
    padding-bottom: var(--gap-s);

    &-input {
      border-radius: var(--fontSize-s);
    }

    &-submitButton {
      .Icon;

      background-color: var(--color-blue7);
      border: none;
      border-radius: var(--borderRadius-s);
      color: var(--color-white);
      cursor: pointer;
      font-size: var(--Icon-size);

      &::before {
        content: 'send';
      }

      &.is-loading {
        background-color: var(--color-red7);
        color: var(--color-red3);

        &::before {
          content: 'stop_circle';
        }
      }
    }
  }

  // Accept/Reject Container
  &-acceptRejectContainer {
    .Dropdown;

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

    &[hidden] {
      display: none;
    }
  }

  // Actions Menu
  &-actions {
    display: flex;
    flex-direction: column;

    &-accept,
    &-rejectAll,
    &-tryAgain {
      border: none;
      margin: 0;
      padding: 0;

      &-icon {
        .Icon;

        margin-right: var(--gap-xs);
      }

      > button {
        align-items: center;
        all: unset;
        border-radius: var(--borderRadius-s);
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        gap: var(--gap-xs);
        padding: var(--gap-s) var(--gap-m);
        text-align: left;
        width: 100%;

        &:hover {
          background-color: var(--color-gray3);
        }
      }
    }

    &-accept-icon::before {
      content: 'check_circle';
    }

    &-rejectAll-icon::before {
      content: 'cancel';
    }

    &-tryAgain-icon::before {
      content: 'refresh';
    }
  }

  // Suggestion Item
  &-suggestion-item {
    background: none;
    border: none;
    color: var(--color-gray9);
    cursor: pointer;
    font-size: var(--fontSize-s);
    padding: var(--spacing-s) var(--spacing-m);
    text-align: left;
    transition: background-color var(--transition-fast);

    &:hover {
      background-color: var(--color-gray3);
    }
  }

  // Suggestions Dropdown
  &-suggestions {
    &-dropdown {
      border-top: 1px solid var(--color-gray3);
      margin-left: calc(-1 * var(--gap-s));
      margin-right: calc(-1 * var(--gap-s));
      margin-top: var(--gap-s);
      width: calc(100% + 2 * var(--gap-s));

      &[hidden] {
        display: none;
      }
    }

    &-list {
      display: flex;
      flex-direction: column;

      &-item {
        padding-left: var(--gap-m);

        > button {
          all: unset;
          background: transparent;
          box-sizing: border-box;
          cursor: pointer;
          display: block;
          text-align: left;
          width: 100%;

          &:disabled,
          &.is-disabled {
            cursor: default;
            opacity: 0.5;
          }
        }

        &.is-empty {
          cursor: default;
          padding: var(--gap-s) var(--gap-m);
          pointer-events: none;
        }
      }
    }

    &-title {
      color: var(--color-gray5);
      font-size: var(--fontSize-s);
      margin: var(--gap-m) var(--gap-m) var(--gap-s);
    }
  }
}

// Loading Overlay
.ProseMirrorAIInline-loadingOverlay {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray3);
  display: none;
  flex-direction: column;
  order: 5;
  padding: var(--gap-s) var(--gap-s) 0;

  &.is-loading {
    display: flex;
  }

  &-prompt {
    color: var(--color-gray5);
    font-size: var(--fontSize-s);
    margin: 0 0 var(--gap-s);
  }

  &-spinner {
    display: flex;
    padding: var(--gap-s) 0;

    &-icon {
      .Icon;

      animation: spin 1s linear infinite;
      height: var(--Icon-size);
      margin-top: 0;
      width: var(--Icon-size);

      &::before {
        content: 'refresh';
      }
    }

    &-text {
      color: var(--color-gray5);
      font-size: var(--fontSize-s);
      margin: 0 var(--gap-m) 0 var(--gap-xs);
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
