@moontra/moonui-pro/src/components/rich-text-editor/slash-commands.css

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

/* Slash Commands Menu Styles */
.slash-commands-menu {
  @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg;
  @apply max-h-80 overflow-y-auto min-w-[280px] p-2;
}

.slash-command-item {
  @apply flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer;
  @apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
}

.slash-command-item.selected {
  @apply bg-gray-100 dark:bg-gray-800;
}

.slash-command-item svg {
  @apply w-4 h-4 text-gray-500 dark:text-gray-400;
}

.slash-command-item > div {
  @apply flex-1;
}

.slash-command-item .command-name {
  @apply font-medium text-gray-900 dark:text-gray-100 text-sm;
}

.slash-command-item .command-description {
  @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
}

/* Dark mode support */
.dark .slash-commands-menu {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}