feat: add gain responsive

src/components/Button/Button.css

@@ -0,0 +1,80 @@
+.btn {
+  width: auto;
+  height: 36px;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard),
+    opacity var(--dur-base) var(--ease-standard);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.btn-primary {
+  background: var(--accent-brand);
+  color: #0d0f12;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6f9bf2;
+}
+
+/* Ghost */
+.btn-ghost {
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-ghost:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+
+/* Toggle */
+.btn-toggle {
+  width: 90%;
+  height: 40px;
+  margin: 8px auto;
+  padding: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--radius-sm);
+
+  /* same as ghost */
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-toggle:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+  background: transparent;
+}
+
+/* Active states only */
+.btn-toggle.active-warning {
+  background: var(--accent-connecting);
+  border-color: var(--accent-connecting);
+  color: var(--bg-void);
+}
+
+.btn-toggle.active-danger {
+  background: var(--accent-down);
+  border-color: var(--accent-down);
+  color: var(--text-primary);
+}