/**
 * @file Inspector icon button styles
 * Uses inspector-specific design tokens for consistent theming
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--node-editor-radius-xs);
  background: var(--node-editor-inspector-icon-button-background);
  color: var(--node-editor-inspector-icon-button-color);
  cursor: pointer;
  transition:
    background-color var(--node-editor-transition-duration) ease,
    color var(--node-editor-transition-duration) ease;
  flex-shrink: 0;
}

/* Size variants */
.button[data-size="default"] {
  width: var(--node-editor-inspector-icon-button-size);
  height: var(--node-editor-inspector-icon-button-size);
}

.button[data-size="small"] {
  width: var(--node-editor-inspector-icon-button-size-sm);
  height: var(--node-editor-inspector-icon-button-size-sm);
}

/* Icon sizing */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.button[data-size="default"] .icon {
  width: var(--node-editor-inspector-icon-button-icon-size);
  height: var(--node-editor-inspector-icon-button-icon-size);
}

.button[data-size="small"] .icon {
  width: var(--node-editor-inspector-icon-button-icon-size-sm);
  height: var(--node-editor-inspector-icon-button-icon-size-sm);
}

.icon > svg {
  width: 100%;
  height: 100%;
}

/* Hover state */
.button:hover:not(:disabled):not([data-active="true"]) {
  background: var(--node-editor-inspector-icon-button-background-hover);
  color: var(--node-editor-inspector-icon-button-color-hover);
}

/* Active/pressed state */
.button[data-active="true"] {
  background: var(--node-editor-inspector-icon-button-background-active);
  color: var(--node-editor-inspector-icon-button-color-active);
}

/* Focus state */
.button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--node-editor-keyboard-focus-indicator-color);
}

/* Disabled state */
.button:disabled {
  color: var(--node-editor-inspector-icon-button-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Ghost variant - no background, just icon */
.button[data-variant="ghost"] {
  background: transparent;
}

.button[data-variant="ghost"]:hover:not(:disabled):not([data-active="true"]) {
  background: transparent;
  color: var(--node-editor-inspector-icon-button-color-hover);
}

.button[data-variant="ghost"][data-active="true"] {
  background: transparent;
  color: var(--node-editor-inspector-icon-button-color-active);
}