/* ═══════════════════════════════════════════════════════════════════════════
   ICON BUTTONS — SINGLE SOURCE OF TRUTH
   ───────────────────────────────────────────────────────────────────────────
   The small square +/× (and neutral) action buttons, EVERYWHERE in the app:
   both sidebars, the tab bars, the Variables panels, the trigger Input/Firing
   sections, the TokenType toolbar, the SM / type editors…

   Draw them HERE and nowhere else. This file is loaded LAST (see index.html) so
   it wins the cascade, and the per-component copies that used to style these
   buttons (sidebar.css, shared-tabs.css, harpoon-editor.css) have been removed
   — one place, one look, no more drift.

   New markup — prefer the canonical classes:
       <button class="icon-btn icon-btn--add">+</button>     (green +)
       <button class="icon-btn icon-btn--remove">×</button>  (red ×)
   Legacy class names below are aliased so existing markup renders identically.

   Design: transparent square, a SUBTLE NEUTRAL border (never a coloured frame),
   and the glyph itself carries the colour — green for add, red for remove.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--icon-btn-size: 20px;
	--icon-btn-add: #2ecc71;
	--icon-btn-remove: #e74c3c;
	--icon-btn-add-tint: rgba(46, 204, 113, 0.15);
	--icon-btn-remove-tint: rgba(231, 76, 60, 0.15);
}

/* ── Base geometry + chrome (glyph colour set by the add/remove groups) ─────── */
.icon-btn,
.screen-action-btn,
.var-btn,
.variable-delete-btn,
.delete-btn,
.tab-add,
.btn-add-tab,
.tab-close,
.io-add-btn,
.io-remove-btn,
.btn-remove-fire,
.btn-remove-from,
.btn-remove-from-remove,
.btn-remove-field,
.btn-remove-method {
	box-sizing: border-box;
	width: var(--icon-btn-size);
	height: var(--icon-btn-size);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid var(--border-primary, #3e3e42);
	border-radius: 4px;
	color: var(--text-secondary, #c8c8c8);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

/* ── ADD — green glyph ─────────────────────────────────────────────────────── */
.icon-btn--add,
.screen-action-btn.new,
.var-btn,
.tab-add,
.btn-add-tab,
.io-add-btn {
	color: var(--icon-btn-add);
}

/* ── REMOVE — red glyph ────────────────────────────────────────────────────── */
.icon-btn--remove,
.screen-action-btn.delete,
.variable-delete-btn,
.delete-btn,
.tab-close,
.io-remove-btn,
.btn-remove-fire,
.btn-remove-from,
.btn-remove-from-remove,
.btn-remove-field,
.btn-remove-method {
	color: var(--icon-btn-remove);
}

/* ── Hover — faint tint of the glyph colour + border brightens to it ───────── */
.icon-btn--add:hover:not(:disabled),
.screen-action-btn.new:hover:not(:disabled),
.var-btn:hover:not(:disabled),
.tab-add:hover:not(:disabled),
.btn-add-tab:hover:not(:disabled),
.io-add-btn:hover:not(:disabled) {
	background: var(--icon-btn-add-tint);
	border-color: var(--icon-btn-add);
}

.icon-btn--remove:hover:not(:disabled),
.screen-action-btn.delete:hover:not(:disabled),
.variable-delete-btn:hover:not(:disabled),
.delete-btn:hover:not(:disabled),
.tab-close:hover:not(:disabled),
.io-remove-btn:hover:not(:disabled),
.btn-remove-fire:hover:not(:disabled),
.btn-remove-from:hover:not(:disabled),
.btn-remove-from-remove:hover:not(:disabled),
.btn-remove-field:hover:not(:disabled),
.btn-remove-method:hover:not(:disabled) {
	background: var(--icon-btn-remove-tint);
	border-color: var(--icon-btn-remove);
}

/* ── Disabled ──────────────────────────────────────────────────────────────── */
.icon-btn:disabled,
.io-add-btn:disabled,
.screen-action-btn:disabled,
.var-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}