.toolbar {
  display: flex;
  align-items: center;
  border-radius: var(--node-editor-control-border-radius);
  background-color: var(--node-editor-window-background-color);
}

/* Orientations */
.toolbar[data-orientation="horizontal"] {
  flex-direction: row;
  gap: var(--node-editor-space-xs);
}

.toolbar[data-orientation="vertical"] {
  flex-direction: column;
  gap: var(--node-editor-space-xs);
}

/* Variants */
.toolbar[data-variant="default"] {
  border: var(--node-editor-card-border);
  box-shadow: var(--node-editor-card-box-shadow);
}

.toolbar[data-variant="subtle"] {
  background-color: var(--node-editor-card-filled-background);
  border: 1px solid var(--node-editor-card-border-color);
}

.toolbar[data-variant="elevated"] {
  background-color: var(--node-editor-window-background-color);
  border: var(--node-editor-card-border);
  box-shadow: var(--node-editor-card-elevated-box-shadow);
}

/* Sizes */
.toolbar[data-size="small"] {
  padding: var(--node-editor-space-xs);
  min-height: 32px;
}

.toolbar[data-size="medium"] {
  padding: var(--node-editor-space-sm);
  min-height: 40px;
}

.toolbar[data-size="large"] {
  padding: var(--node-editor-space-sm);
  min-height: 48px;
}

/* Toolbar Group */
.group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toolbar[data-orientation="horizontal"] .group {
  flex-direction: row;
}

.toolbar[data-orientation="vertical"] .group {
  flex-direction: column;
}

/* Toolbar Separator */
.separator {
  background-color: var(--node-editor-separator-color);
  flex-shrink: 0;
}

.toolbar[data-orientation="horizontal"] .separator {
  width: 1px;
  height: 20px;
  margin: 0 var(--node-editor-space-xs);
}

.toolbar[data-orientation="vertical"] .separator {
  height: 1px;
  width: 20px;
  margin: var(--node-editor-space-xs) 0;
}

.toolbarIcon {
  font-size: var(--node-editor-space-lg);
}

.toolbarIconText {
  font-size: var(--node-editor-inspector-font-size-meta);
  font-weight: 600;
}

.toolbarSeparator {
  width: 1px;
  height: var(--node-editor-space-xl);
  background-color: var(--node-editor-separator-color);
  margin: var(--node-editor-space-xs);
}

.toolButton {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--node-editor-control-border-radius);
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--node-editor-text-color);
}

.toolButton:hover {
  background-color: var(--node-editor-control-hover-background);
}

.toolButton:active {
  background-color: var(--node-editor-table-header-background-color);
}

.topToolbar {
  display: flex;
  gap: var(--node-editor-space-sm);
  align-items: center;
  flex: 1;
}