1  /*
  2   * Frame17711 shared component classes — prefixed with m17- to avoid collisions.
  3   *
  4   * Every property uses var(--m17-*) — fully overridable by the consumer.
  5   * No !important, no hardcoded values.
  6   */
  7  
  8  @layer m17-components {
  9  
 10    /* ── Buttons ──────────────────────────────────────────────────── */
 11  
 12    .m17-btn-primary {
 13      display: inline-flex;
 14      align-items: center;
 15      justify-content: center;
 16      background: var(--m17-color-accent);
 17      color: var(--m17-color-text-inverse);
 18      padding: var(--m17-space-8) var(--m17-space-21);
 19      border-radius: var(--m17-radius-md);
 20      font-family: var(--m17-font-family);
 21      font-size: var(--m17-font-base);
 22      font-weight: var(--m17-font-weight-bold);
 23      border: none;
 24      cursor: pointer;
 25      transition: opacity var(--m17-transition-base);
 26      width: 100%;
 27    }
 28    .m17-btn-primary:hover:not(:disabled) { opacity: 0.9; }
 29    .m17-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
 30  
 31    .m17-btn-secondary {
 32      display: inline-flex;
 33      align-items: center;
 34      justify-content: center;
 35      background: transparent;
 36      color: var(--m17-color-text);
 37      padding: var(--m17-space-8) var(--m17-space-21);
 38      border: 1px solid var(--m17-color-border);
 39      border-radius: var(--m17-radius-md);
 40      font-family: var(--m17-font-family);
 41      font-size: var(--m17-font-base);
 42      cursor: pointer;
 43      transition: border-color var(--m17-transition-base);
 44      width: 100%;
 45    }
 46    .m17-btn-secondary:hover:not(:disabled) { border-color: var(--m17-color-accent); }
 47    .m17-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
 48  
 49    /* ── Card / surface ───────────────────────────────────────────── */
 50  
 51    .m17-card {
 52      background: var(--m17-color-surface);
 53      border: 1px solid var(--m17-color-border);
 54      border-radius: var(--m17-radius-md);
 55      padding: var(--m17-space-13);
 56    }
 57  
 58    /* ── Input ────────────────────────────────────────────────────── */
 59  
 60    .m17-input {
 61      width: 100%;
 62      padding: var(--m17-space-8) var(--m17-space-13);
 63      margin-bottom: var(--m17-space-8);
 64      background: var(--m17-color-surface);
 65      border: 1px solid var(--m17-color-border);
 66      border-radius: var(--m17-radius-md);
 67      color: var(--m17-color-text);
 68      font-family: var(--m17-font-family);
 69      font-size: var(--m17-font-base);
 70      transition: border-color var(--m17-transition-base);
 71    }
 72    .m17-input:focus { outline: none; border-color: var(--m17-color-accent); }
 73    .m17-input::placeholder { color: var(--m17-color-text-muted); }
 74  
 75    /* ── Badge / tag ──────────────────────────────────────────────── */
 76  
 77    .m17-badge {
 78      display: inline-flex;
 79      align-items: center;
 80      padding: var(--m17-space-2) var(--m17-space-8);
 81      border-radius: var(--m17-radius-full);
 82      font-size: var(--m17-font-xs);
 83      font-weight: var(--m17-font-weight-medium);
 84    }
 85    .m17-badge-success { background: var(--m17-color-success-muted); color: var(--m17-color-success); }
 86    .m17-badge-error   { background: var(--m17-color-error-muted);   color: var(--m17-color-error); }
 87    .m17-badge-warning { background: var(--m17-color-warning-muted); color: var(--m17-color-warning); }
 88    .m17-badge-info    { background: var(--m17-color-info-muted);    color: var(--m17-color-info); }
 89    .m17-badge-accent  { background: var(--m17-color-accent-muted);  color: var(--m17-color-accent); }
 90  
 91    /* ── Spinner ──────────────────────────────────────────────────── */
 92  
 93    .m17-spinner {
 94      width: var(--m17-space-34);
 95      height: var(--m17-space-34);
 96      border: 3px solid var(--m17-color-border);
 97      border-top-color: var(--m17-color-accent);
 98      border-radius: 50%;
 99      animation: m17-spin 0.8s linear infinite;
100    }
101    .m17-spinner-sm {
102      width: var(--m17-space-21);
103      height: var(--m17-space-21);
104      border-width: 2px;
105    }
106    @keyframes m17-spin { to { transform: rotate(360deg); } }
107  
108    /* ── Separator ("or" divider) ─────────────────────────────────── */
109  
110    .m17-separator {
111      display: flex;
112      align-items: center;
113      gap: var(--m17-space-13);
114      color: var(--m17-color-text-muted);
115      font-size: var(--m17-font-sm);
116      margin: var(--m17-space-21) 0;
117    }
118    .m17-separator::before,
119    .m17-separator::after {
120      content: "";
121      flex: 1;
122      height: 1px;
123      background: var(--m17-color-border);
124    }
125  
126    /* ── Address / monospace ──────────────────────────────────────── */
127  
128    .m17-address {
129      font-family: var(--m17-font-mono);
130      font-size: var(--m17-font-sm);
131      color: var(--m17-color-text-muted);
132      word-break: break-all;
133    }
134  
135    /* ── Text utilities ───────────────────────────────────────────── */
136  
137    .m17-text-accent { color: var(--m17-color-accent); }
138    .m17-text-muted  { color: var(--m17-color-text-muted); }
139    .m17-text-error  { color: var(--m17-color-error); }
140    .m17-text-success { color: var(--m17-color-success); }
141  
142    /* ── Layout helpers ───────────────────────────────────────────── */
143  
144    .m17-center {
145      display: flex;
146      flex-direction: column;
147      align-items: center;
148      justify-content: center;
149    }
150  
151    .m17-stack {
152      display: flex;
153      flex-direction: column;
154      gap: var(--m17-space-8);
155    }
156  
157    .m17-row {
158      display: flex;
159      align-items: center;
160      gap: var(--m17-space-8);
161    }
162  
163    /* ── Grid (wallet-style 2-col) ────────────────────────────────── */
164  
165    .m17-grid-2 {
166      display: grid;
167      grid-template-columns: 1fr 1fr;
168      gap: var(--m17-space-13);
169    }
170  
171    /* ── Icon button (wallet card) ────────────────────────────────── */
172  
173    .m17-icon-card {
174      display: flex;
175      flex-direction: column;
176      align-items: center;
177      gap: var(--m17-space-5);
178      padding: var(--m17-space-21) var(--m17-space-13);
179      background: var(--m17-color-surface);
180      border: 1px solid var(--m17-color-border);
181      border-radius: var(--m17-radius-lg);
182      color: var(--m17-color-text);
183      font-size: var(--m17-font-base);
184      font-weight: var(--m17-font-weight-medium);
185      cursor: pointer;
186      transition: border-color var(--m17-transition-base), background var(--m17-transition-base);
187    }
188    .m17-icon-card:hover:not(:disabled) {
189      border-color: var(--m17-color-accent);
190      background: var(--m17-color-surface-alt);
191    }
192    .m17-icon-card:disabled { opacity: 0.4; cursor: not-allowed; }
193    .m17-icon-card .m17-icon { font-size: var(--m17-font-2xl); }
194    .m17-icon-card small {
195      font-size: var(--m17-font-xs);
196      color: var(--m17-color-text-muted);
197      font-weight: var(--m17-font-weight-normal);
198    }
199  
200    /* ── Success icon ─────────────────────────────────────────────── */
201  
202    .m17-success-icon {
203      font-size: var(--m17-font-3xl);
204      color: var(--m17-color-success);
205      margin-bottom: var(--m17-space-13);
206    }
207  
208    /* ── Error icon ───────────────────────────────────────────────── */
209  
210    .m17-error-icon {
211      display: inline-flex;
212      align-items: center;
213      justify-content: center;
214      width: 48px;
215      height: 48px;
216      border-radius: 50%;
217      background: var(--m17-color-error);
218      color: #fff;
219      font-size: var(--m17-font-xl);
220      font-weight: var(--m17-font-weight-bold);
221      margin-bottom: var(--m17-space-13);
222    }
223  
224    /* ── Footer ───────────────────────────────────────────────────── */
225  
226    .m17-footer {
227      position: fixed;
228      bottom: var(--m17-space-13);
229      text-align: center;
230      font-size: var(--m17-font-xs);
231      color: var(--m17-color-text-muted);
232    }
233    .m17-footer a { color: var(--m17-color-text-muted); text-decoration: none; }
234    .m17-footer a:hover { color: var(--m17-color-accent); }
235  }