/**
 * ExecutionNodeBadge styles
 *
 * Badge rendered at each node's position showing execution status.
 * Positioned in canvas-space (parent container handles transform).
 */

.badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: all;
  border: 1px solid transparent;
  transition: outline 0.1s ease;
  white-space: nowrap;
  user-select: none;

  &[data-status='success'] {
    background-color: var(--theme-color-success-bg, rgba(34, 197, 94, 0.15));
    color: var(--theme-color-success, #22c55e);
    border-color: var(--theme-color-success, #22c55e);
  }

  &[data-status='error'] {
    background-color: var(--theme-color-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--theme-color-error, #ef4444);
    border-color: var(--theme-color-error, #ef4444);
  }

  &[data-status='running'] {
    background-color: var(--theme-color-bg-3);
    color: var(--theme-color-fg-default-shy);
    border-color: var(--theme-color-border-default);
  }

  &[data-status='skipped'] {
    background-color: var(--theme-color-bg-3);
    color: var(--theme-color-fg-default-shy);
    border-color: var(--theme-color-border-default);
    opacity: 0.6;
  }

  &[data-selected='true'] {
    outline: 2px solid var(--theme-color-primary);
    outline-offset: 1px;
  }

  &:hover {
    filter: brightness(1.15);
  }
}

.icon {
  font-size: 10px;
  line-height: 1;
}

.duration {
  font-size: 10px;
  opacity: 0.85;
}
