/* IntelliJ new UI buttons: Button.arc 8 (radius 4), minimumSize 72×28, 2px focus ring outside. */
.button {
  --button-radius: var(--radius-control, 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-button, 28px);
  min-width: 72px;
  padding: 0 16px;
  border-radius: var(--button-radius);
  font-size: var(--fs-ui);
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.button:disabled {
  cursor: default;
}
.small {
  height: var(--h-control);
  min-width: 0;
  padding: 0 10px;
}

.primary {
  background: var(--bg-button-primary);
  color: var(--fg-button-primary);
  --icon-color: currentColor;
}
.primary:not(:disabled):hover {
  background: var(--bg-button-primary-hover);
}

.secondary {
  background: var(--bg-button);
  color: var(--fg-strong);
  box-shadow: inset 0 0 0 1px var(--border-button);
}
.secondary:not(:disabled):hover {
  background: color-mix(in srgb, var(--bg-button) 94%, var(--fg-strong));
}

.primary:disabled,
.secondary:disabled {
  background: transparent;
  color: var(--fg-faint);
  box-shadow: inset 0 0 0 1px var(--border);
}

.ghost {
  min-width: 0;
  padding: 0 8px;
  color: var(--fg-secondary);
}
.ghost:not(:disabled):hover {
  background: var(--bg-toolbar-hover);
  color: var(--fg-strong);
}
.ghost:not(:disabled):active {
  background: var(--bg-toolbar-pressed, color-mix(in srgb, var(--fg-strong) 12%, transparent));
}
.ghost:disabled {
  color: var(--fg-faint);
}

/* Toolbar / action buttons: transparent on hover, filled when pressed or selected. */
.iconButton {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-toolbar-button, 6px);
  color: var(--fg-muted);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.iconButton:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.iconButton:not(:disabled):hover {
  color: var(--fg-strong);
}
.iconButton:not(:disabled):active {
  background: var(--bg-toolbar-pressed, color-mix(in srgb, var(--fg-strong) 12%, transparent));
}
.iconButton:disabled {
  opacity: 0.4;
  cursor: default;
}
.iconButton[aria-pressed="true"] {
  background: var(--bg-toolbar-selected, var(--bg-tree-selected));
  color: var(--fg-strong);
}
.iconButton[aria-pressed="true"]:not(:disabled):hover {
  background: var(--bg-toolbar-selected-hover, color-mix(in srgb, var(--bg-tree-selected) 85%, var(--fg-strong)));
}
.is-small {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-small);
}
.is-normal {
  width: 24px;
  height: 24px;
}
.is-large {
  width: 28px;
  height: 28px;
}
.tone-danger {
  color: var(--danger);
}
.tone-accent {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .iconButton {
    transition: none;
  }
}

@media (forced-colors: active) {
  .secondary,
  .primary {
    border: 1px solid ButtonText;
  }
}