/* ============================================================
   Snowball Studio — Component interaction states
   Hover / active / focus rules for bundled React components.
   (Inline styles set the base look; these add motion & states.)
   ============================================================ */

/* --- Button --- */
.sb-btn { -webkit-tap-highlight-color: transparent; }
.sb-btn:not(:disabled):active { transform: translateY(1px) scale(0.99); }
.sb-btn--primary:not(:disabled):hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.sb-btn--primary:not(:disabled):active { background: var(--accent-press) !important; border-color: var(--accent-press) !important; }
.sb-btn--secondary:not(:disabled):hover { border-color: var(--ink-900) !important; }
.sb-btn--ghost:not(:disabled):hover { background: var(--surface-muted) !important; }
.sb-btn--inverse:not(:disabled):hover { background: var(--ink-100) !important; border-color: var(--ink-100) !important; }

/* --- Card --- */
.sb-card--interactive { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.sb-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* --- Input --- */
.sb-input:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--blue-50); }
.sb-input::placeholder { color: var(--text-subtle); }

/* --- Tag --- */
.sb-tag--removable .sb-tag__x { cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-out); }
.sb-tag--removable .sb-tag__x:hover { opacity: 1; }

/* --- Switch --- */
.sb-switch { transition: background var(--dur-base) var(--ease-out); }
.sb-switch__knob { transition: transform var(--dur-base) var(--ease-out); }

/* --- Link with arrow --- */
.sb-arrowlink { display: inline-flex; align-items: center; gap: 6px; transition: gap var(--dur-fast) var(--ease-out); }
.sb-arrowlink:hover { gap: 10px; }