.button {
  border: none;
  border-radius: var(--node-editor-control-border-radius);
  cursor: pointer;
  font-family: var(--node-editor-theme-control-font-family);
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: none;
}

.button:focus {
  box-shadow: 0 0 0 3px var(--node-editor-keyboard-focus-indicator-color);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sizes via data-size */
.button[data-size="small"] {
  padding: var(--node-editor-space-xs) var(--node-editor-space-sm);
  font-size: var(--node-editor-inspector-font-size-meta);
  line-height: var(--node-editor-inspector-line-height-meta);
}

.button[data-size="medium"] {
  padding: var(--node-editor-control-padding);
  font: var(--node-editor-control-text-font);
}

.button[data-size="large"] {
  padding: var(--node-editor-space-md) var(--node-editor-space-xl);
  font-size: var(--node-editor-inspector-font-size-body);
  line-height: var(--node-editor-inspector-line-height-body);
}

/* Variants via data-variant */
.button[data-variant="primary"] {
  background: var(--node-editor-control-background-primary);
  color: var(--node-editor-control-text-color-primary);
  box-shadow: var(--node-editor-control-box-shadow-primary);
}

.button[data-variant="primary"]:hover:not(:disabled) {
  background: var(--node-editor-control-hover-background-primary);
  color: var(--node-editor-control-hover-text-color-primary);
}

.button[data-variant="secondary"] {
  background: var(--node-editor-control-background-secondary);
  color: var(--node-editor-control-text-color-secondary);
  box-shadow: var(--node-editor-control-box-shadow-secondary);
}

.button[data-variant="secondary"]:hover:not(:disabled) {
  background: var(--node-editor-control-hover-background);
}

.button[data-variant="danger"] {
  background: var(--node-editor-caution-color);
  color: var(--node-editor-selected-menu-item-text-color);
}

.button[data-variant="danger"]:hover:not(:disabled) {
  background: var(--node-editor-system-red-color);
}

.button[data-variant="ghost"] {
  background-color: transparent;
  color: var(--node-editor-secondary-label-color);
  border: var(--node-editor-input-border);
}

.button[data-variant="ghost"]:hover:not(:disabled) {
  background-color: var(--node-editor-control-hover-background);
  color: var(--node-editor-text-color);
}