/* Shared styles for ComfyTavern VueFlow frontend */

/* --- Context Menu Base --- */
/* Defined directly, without @layer */
.context-menu-base {
  @apply absolute bg-background-surface rounded-lg shadow-lg border border-border-base overflow-hidden z-50;
}

/* --- Context Menu Items (can be used directly or applied) --- */
.context-menu-items {
  @apply py-1;
}

.context-menu-item {
  @apply px-4 py-2 flex items-center gap-2 hover:bg-neutral-softest cursor-pointer text-text-secondary;
}

.context-menu-item.disabled {
  @apply opacity-50 cursor-not-allowed;
}

.context-menu-separator {
  @apply my-1 border-t border-border-base;
}

.icon {
  /* Note: This is a general icon class used in context menus, might need adjustments if used elsewhere */
  @apply inline-flex items-center justify-center w-5 h-5 text-text-muted;
}


/* --- VueFlow Controls & Minimap Dark Mode --- */
.dark .vue-flow__controls {
  @apply shadow-md;
}

.dark .vue-flow__controls button {
  @apply bg-background-surface border-border-base text-text-base hover:bg-neutral-softest;
}

.dark .vue-flow__minimap {
  @apply bg-background-base border-border-base;
}

.dark .vue-flow__minimap-mask {
  @apply bg-neutral bg-opacity-40;
}

/* Ensure node colors in minimap also adapt */
.dark .vue-flow__minimap-node {
  @apply bg-background-surface border-border-base;
}
