@layerfi/components 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/.eslintrc.js +40 -0
  2. package/.prettierrc.json +21 -0
  3. package/README.md +114 -10
  4. package/dist/esm/index.js +2094 -526
  5. package/dist/esm/index.js.map +4 -4
  6. package/dist/index.d.ts +902 -188
  7. package/dist/index.js +2153 -605
  8. package/dist/index.js.map +4 -4
  9. package/dist/styles/index.css +1317 -317
  10. package/dist/styles/index.css.map +3 -3
  11. package/index.d.ts +1309 -0
  12. package/package.json +13 -18
package/dist/styles/index.css CHANGED
@@ -1,207 +1,605 @@
1
- @import "https://fonts.googleapis.com/css2?family=Inter";
1
+ @import "https://rsms.me/inter/inter.css";
2
2
 
3
3
  /* src/styles/index.scss */
4
- .Layer__profit-and-loss {
5
- --border-color: #eaecf0;
6
- --font-color: #101828;
7
- --indicator-bar-color: #3c3c3c;
8
- --background-color: white;
9
- --active: #e0e9ff;
10
- --income-bar-color: #0c48e5;
11
- --expenses-bar-color: #6d8ee7;
12
- width: 60rem;
13
- background-color: white;
14
- padding: 0.25rem;
4
+ .Layer__component {
5
+ --color-black: #1A1A1A;
6
+ --color-white: white;
7
+ --color-info-error: #E46362;
8
+ --color-info-success: #29BC9B;
9
+ --color-info-warning: #F5A622;
10
+ --color-dark-h: 0;
11
+ --color-dark-s: 0%;
12
+ --color-dark-l: 7%;
13
+ --color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
14
+ --color-light-h: 0;
15
+ --color-light-s: 0%;
16
+ --color-light-l: 100%;
17
+ --color-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l));
18
+ --color-base-50: hsl(var(--color-dark-h) 1% 98%);
19
+ --color-base-100: hsl(var(--color-dark-h) 1% 96%);
20
+ --color-base-200: hsl(var(--color-dark-h) 1% 94%);
21
+ --color-base-300: hsl(var(--color-dark-h) 2% 92%);
22
+ --color-base-400: var(--color-light);
23
+ --color-base-500: hsl(var(--color-dark-h) 5% 53%);
24
+ --color-base-600: hsl(var(--color-dark-h) 7% 40%);
25
+ --color-base-700: hsl(var(--color-dark-h) 9% 27%);
26
+ --color-base-800: hsl(var(--color-dark-h) 12% 20%);
27
+ --color-base-900: var(--color-dark);
28
+ --color-base-1000: hsl(var(--color-dark-h) 20% 7%);
29
+ --color-primary: var(--color-dark);
30
+ --color-accent: var(--color-light);
31
+ --color-secondary: var(--color-base);
32
+ --color-success: var(--color-info-success);
33
+ --color-danger: var(--color-info-error);
34
+ --text-color-primary: var(--color-dark);
35
+ --text-color-secondary: var(--color-base-700);
36
+ --bg-element-focus: var(--color-base-50);
37
+ --font-family:
38
+ "InterVariable",
39
+ "Inter",
40
+ sans-serif;
41
+ --font-family-numeric:
42
+ "InterVariable",
43
+ "Inter",
44
+ sans-serif;
45
+ --text-sm: 12px;
46
+ --text-md: 14px;
47
+ --text-heading: 24px;
48
+ --text-heading-sm: 16px;
49
+ --font-weight-normal: 460;
50
+ --font-weight-bold: 580;
51
+ --spacing-2xs: 6px;
52
+ --spacing-xs: 8px;
53
+ --spacing-sm: 12px;
54
+ --spacing-md: 16px;
55
+ --spacing-xl: 32px;
56
+ --spacing-2xl: 36px;
57
+ --bg-color: var(--color-white);
58
+ --border-color: var(--color-base-200);
59
+ --border-radius-2xs: 6px;
60
+ --border-radius-sm: 12px;
61
+ --border-radius: 16px;
62
+ --text-color-transaction-credit: var(--color-info-success);
63
+ --text-color-varying-amount: var(--color-base-700);
64
+ --input-border-radius: var(--border-radius-2xs);
65
+ --input-font-size: var(--text-md);
66
+ --input-border-color: var(--color-base-300);
67
+ --input-placeholder-color: var(--color-base-500);
68
+ --label-color: var(--color-base-700);
69
+ --btn-font-size: var(--text-md);
70
+ --btn-border-radius: var(--border-radius-2xs);
71
+ --btn-color: var(--color-black);
72
+ --btn-bg-color: var(--color-white);
73
+ --btn-color-hover: var(--color-white);
74
+ --btn-bg-color-hover: var(--color-primary);
75
+ --btn-color-icon: var(--color-black);
76
+ --btn-bg-color-icon: var(--color-base-50);
77
+ --btn-color-icon-hover: var(--color-primary);
78
+ --btn-bg-color-icon-hover: var(--color-accent);
79
+ --btn-secondary-color: var(--color-black);
80
+ --btn-secondary-bg-color: var(--color-white);
81
+ --badge-color: var(--text-color-primary);
82
+ --badge-bg-color: var(--color-base-300);
83
+ --badge-border-radius: var(--border-radius-sm);
84
+ --table-bg: var(--color-white);
85
+ --tooltip-color: var(--color-white);
86
+ --tooltip-bg-color: var(--color-base-800);
87
+ --color-alabaster: #f9f9f9;
88
+ --color-athens-gray: #eaecf0;
89
+ --color-blue-ribbon: #0c48e5;
90
+ --color-comet: #57627a;
91
+ --color-cornflower-blue: #6d8ee7;
92
+ --color-ebony: #101828;
93
+ --color-fiord: #475467;
94
+ --color-green-haze: #039855;
95
+ --color-mine-shaft: #3c3c3c;
96
+ --color-mischke: #d0d5dd;
97
+ --color-zumthor: #e0e9ff;
98
+ --active: var(--color-zumthor);
99
+ --bar-color-expenses: var(--color-cornflower-blue);
100
+ --bar-color-income: var(--color-blue-ribbon);
101
+ --border-color: var(--color-athens-gray);
102
+ --buttons-border-color: var(--color-mischke);
103
+ --button-color-dark: var(--color-fiord);
104
+ --corner-radius: 0.5rem;
105
+ --error-color: var(--color-red);
106
+ --indicator-color: var(--color-mine-shaft);
107
+ --table-border-color: var(--color-athens-gray);
108
+ --table-expanded-background-color: var(--color-alabaster);
109
+ --text-color: var(--color-ebony);
110
+ --text-skeleton-color: var(--color-comet);
111
+ --transition-speed: 0.33s;
112
+ border: 0;
113
+ padding: 0;
114
+ margin: 0;
115
+ box-sizing: border-box;
116
+ font-family: var(--font-family);
117
+ font-variation-settings: "wght" var(--font-weight-normal);
118
+ font-feature-settings:
119
+ "cv10" on,
120
+ "cv01" on,
121
+ "cv05" on,
122
+ "cv08" on,
123
+ "ss03" on;
124
+ }
125
+ .Layer__btn {
126
+ position: relative;
127
+ border-radius: var(--btn-border-radius);
128
+ border-width: 0px;
129
+ font-family: var(--font-family);
130
+ font-variation-settings: "wght" var(--font-weight-normal);
131
+ font-variant-numeric: lining-nums proportional-nums;
132
+ font-feature-settings:
133
+ "cv10" on,
134
+ "cv05" on,
135
+ "cv08" on,
136
+ "ss03" on;
137
+ padding: 0;
138
+ cursor: pointer;
139
+ min-height: 36px;
140
+ box-sizing: border-box;
141
+ box-shadow:
142
+ 0px 0px 0px 1px var(--color-base-300),
143
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.04),
144
+ 0px 2px 3px 0px rgba(0, 0, 0, 0.04),
145
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.02),
146
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.01);
147
+ transition: all 100ms ease-out;
148
+ }
149
+ .Layer__btn .Layer__btn-icon {
150
+ color: var(--btn-color-icon);
151
+ background: var(--btn-bg-color-icon);
152
+ display: flex;
153
+ justify-content: center;
154
+ align-items: center;
155
+ border-radius: 4px;
156
+ box-sizing: border-box;
157
+ width: 32px;
158
+ height: 32px;
159
+ transition: all 150ms ease-out;
15
160
  }
16
- .Layer__profit-and-loss * {
17
- color: var(--font-color);
18
- font-family: Inter;
19
- font-weight: 500;
20
- font-style: normal;
161
+ .Layer__btn .Layer__btn-icon .Layer__btn-icon--on-active {
162
+ display: none;
21
163
  }
22
- .Layer__profit-and-loss__title {
23
- font-size: 1.5rem;
24
- font-weight: 600;
25
- margin-bottom: 1.5rem;
26
- margin-left: 1.5rem;
27
- margin-right: 1.5rem;
164
+ .Layer__btn:hover {
165
+ box-shadow:
166
+ 0px 2px 4px 0px rgba(25, 25, 25, 0.06),
167
+ 0px 4px 12px 0px var(--neutral-8, rgba(26, 26, 26, 0.08)),
168
+ 0px 0px 0px 1px rgba(25, 25, 25, 0.06);
28
169
  }
29
- .Layer__profit-and-loss-table {
30
- border: 1px solid var(--border-color);
31
- border-radius: 0.5rem;
32
- background-color: var(--border-color);
33
- display: grid;
34
- grid-template-columns: 1fr auto;
35
- gap: 1px 0;
36
- font-size: 1rem;
170
+ .Layer__btn:disabled {
171
+ box-shadow: none;
37
172
  }
38
- .Layer__profit-and-loss-row {
39
- padding: 1em;
40
- background-color: var(--background-color);
41
- font-size: 1em;
173
+ .Layer__btn--secondary {
174
+ color: var(--btn-secondary-color);
175
+ background: var(--btn-secondary-bg-color);
42
176
  }
43
- .Layer__profit-and-loss-row__label {
44
- display: flex;
45
- justify-content: flex-start;
177
+ .Layer__btn--primary {
178
+ color: var(--btn-color);
179
+ background: var(--btn-bg-color);
46
180
  }
47
- .Layer__profit-and-loss-row__value {
181
+ .Layer__btn--primary:hover:not([disabled]),
182
+ .Layer__btn--primary.Layer__btn--active:not([disabled]) {
183
+ color: var(--btn-color-hover);
184
+ background: var(--btn-bg-color-hover);
185
+ }
186
+ .Layer__btn--primary:hover:not([disabled]) .Layer__btn-icon,
187
+ .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon {
188
+ color: var(--btn-color-icon-hover);
189
+ background: var(--btn-bg-color-icon-hover);
190
+ }
191
+ .Layer__btn--primary:hover:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-active,
192
+ .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-active {
193
+ display: block;
194
+ }
195
+ .Layer__btn--primary:hover:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive,
196
+ .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive {
197
+ display: none;
198
+ }
199
+ .Layer__btn-content {
200
+ padding: 2px;
48
201
  display: flex;
49
- justify-content: flex-end;
202
+ align-items: center;
203
+ font-size: var(--btn-font-size);
204
+ line-height: 100%;
50
205
  }
51
- .Layer__profit-and-loss-row__label--variant-NETPROFIT,
52
- .Layer__profit-and-loss-row__label--variant-GROSS,
53
- .Layer__profit-and-loss-row__label--variant-BEFORETAX {
54
- border-top: 3px solid var(--border-color);
55
- border-bottom: 3px solid var(--border-color);
206
+ .Layer__btn-text {
207
+ font-family: var(--font-family);
208
+ font-size: var(--btn-font-size);
209
+ padding: 0 14px;
56
210
  }
57
- .Layer__profit-and-loss-row__value--variant-NETPROFIT,
58
- .Layer__profit-and-loss-row__value--variant-GROSS,
59
- .Layer__profit-and-loss-row__value--variant-BEFORETAX {
60
- border-top: 3px solid var(--border-color);
61
- border-bottom: 3px solid var(--border-color);
211
+ .Layer__btn-icon--left {
212
+ margin-right: -4px;
62
213
  }
63
- .Layer__profit-and-loss-row__label--variant-NETPROFIT,
64
- .Layer__profit-and-loss-row__value--variant-NETPROFIT {
65
- border-bottom: 10px solid var(--border-color);
214
+ .Layer__btn-icon--right {
215
+ margin-left: -4px;
66
216
  }
67
- .Layer__profit-and-loss-row__value--amount-positive::before {
68
- content: "$";
217
+ .Layer__btn--icon-only .Layer__btn-icon--right {
218
+ margin-left: 0;
69
219
  }
70
- .Layer__profit-and-loss-row__value--amount-negative::before {
71
- content: "-$";
220
+ .Layer__btn--icon-only .Layer__btn-icon--left {
221
+ margin-right: 0;
72
222
  }
73
- .Layer__profit-and-loss-row__label--depth-0 {
74
- font-weight: 700;
223
+ .Layer__component-container {
224
+ border-radius: var(--border-radius-sm);
225
+ border: 1px solid var(--border-color);
226
+ background-color: var(--bg-color);
227
+ overflow: auto;
228
+ container-type: inline-size;
75
229
  }
76
- .Layer__profit-and-loss-row__value--depth-0 {
77
- font-weight: 700;
230
+ .Layer__component-container::-webkit-scrollbar {
231
+ width: 6px;
232
+ height: 6px;
78
233
  }
79
- .Layer__profit-and-loss-row__label--depth-1 {
80
- padding-right: 2em;
81
- padding-left: 2em;
82
- font-size: 0.8em;
234
+ .Layer__component-container::-webkit-scrollbar-track {
235
+ background: #f1f1f1;
236
+ border-radius: 4px;
83
237
  }
84
- .Layer__profit-and-loss-row__value--depth-1 {
85
- font-size: 0.8em;
238
+ .Layer__component-container::-webkit-scrollbar-thumb {
239
+ background: #e2e2e2;
240
+ border-radius: 4px;
86
241
  }
87
- .Layer__profit-and-loss-date-picker {
88
- width: 20rem;
242
+ .Layer__component-container::-webkit-scrollbar-thumb:hover {
243
+ background: #999;
244
+ }
245
+ .Layer__component-header {
246
+ padding: var(--spacing-xl);
89
247
  display: flex;
90
- flex-direction: row;
91
- justify-content: center;
248
+ flex-wrap: wrap;
249
+ justify-content: space-between;
92
250
  align-items: center;
93
- padding: 0.25rem;
94
- margin: 0.5rem;
95
- border: 1px solid var(--border-color);
96
- border-radius: 0.5rem;
251
+ gap: var(--spacing-md);
97
252
  }
98
- .Layer__profit-and-loss-date-picker__button {
99
- padding: 0.25rem;
253
+ @container (max-width: 700px) {
254
+ .Layer__component-header {
255
+ padding: var(--spacing-md);
256
+ }
257
+ }
258
+ ::placeholder {
259
+ color: var(--input-placeholder-color);
260
+ }
261
+ .Layer__input-group {
100
262
  display: flex;
101
- justify-content: center;
102
- align-items: center;
103
- text-align: center;
104
- background-color: var(--background-color);
105
- border: 0;
106
- border-radius: 0.5rem;
263
+ flex-direction: column;
107
264
  }
108
- .Layer__profit-and-loss-date-picker__button:active {
109
- background-color: var(--active);
265
+ .Layer__input-label {
266
+ padding: var(--spacing-2xs);
267
+ color: var(--label-color);
110
268
  }
111
- .Layer__profit-and-loss-date-picker__button-icon path {
112
- stroke: var(--font-color);
269
+ .Layer__input {
270
+ padding: 8px;
271
+ border: 1px solid var(--border-color);
272
+ border-radius: var(--input-border-radius);
273
+ border-width: 0px;
274
+ box-shadow: 0px 0px 0px 1px var(--input-border-color);
275
+ font-family: var(--font-family);
276
+ font-size: var(--input-font-size);
277
+ line-height: 140%;
278
+ }
279
+ .Layer__textarea {
280
+ padding: 10px 14px;
281
+ border-radius: var(--input-border-radius);
282
+ border-width: 0px;
283
+ box-sizing: border-box;
284
+ box-shadow: 0px 0px 0px 1px var(--input-border-color);
285
+ font-family: var(--font-family);
286
+ font-size: var(--input-font-size);
287
+ }
288
+ .Layer__textarea:focus,
289
+ .Layer__textarea:active,
290
+ .Layer__textarea:focus-visible {
291
+ box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
292
+ outline: none;
293
+ }
294
+ .Layer__toggle {
295
+ display: flex;
296
+ width: max-content;
297
+ align-items: center;
298
+ box-sizing: border-box;
299
+ border-radius: 52px;
300
+ padding: 2px;
301
+ height: 38px;
302
+ background: var(--color-base-100);
303
+ box-shadow: 0px 0px 0px 1px var(--color-base-300);
304
+ cursor: pointer;
305
+ position: relative;
306
+ isolation: isolate;
113
307
  }
114
- .Layer__profit-and-loss-date-picker__label {
115
- flex: 1;
116
- font-size: 1rem;
308
+ .Layer__toggle .Layer__toggle-option-content {
117
309
  display: flex;
118
- justify-content: center;
119
310
  align-items: center;
120
- text-align: center;
311
+ gap: var(--spacing-xs);
121
312
  }
122
- .Layer__profit-and-loss-chart__bar--income {
123
- fill: var(--income-bar-color);
313
+ .Layer__toggle-option__icon {
314
+ line-height: 11px;
124
315
  }
125
- .Layer__profit-and-loss-chart__bar--expenses {
126
- fill: var(--expenses-bar-color);
316
+ .Layer__toggle.Layer__toggle--small {
317
+ height: 36px;
318
+ border-radius: 6px;
127
319
  }
128
- .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
129
- font-size: 0.75rem;
320
+ .Layer__toggle-option {
321
+ position: relative;
322
+ cursor: pointer;
323
+ z-index: 2;
130
324
  }
131
- .Layer__profit-and-loss-chart .recharts-legend-wrapper {
132
- margin-top: -1.25rem;
325
+ .Layer__toggle-option input {
326
+ position: absolute;
327
+ opacity: 0;
328
+ width: 1px;
133
329
  }
134
- .Layer__profit-and-loss-chart .recharts-legend-item-text {
135
- font-size: 1rem;
330
+ .Layer__toggle-option input + span {
331
+ box-sizing: border-box;
332
+ padding: 8px 16px;
333
+ height: 36px;
334
+ border-radius: 52px;
335
+ color: var(--text-color-secondary);
336
+ font-family: var(--font-family);
337
+ font-size: var(--btn-font-size);
338
+ cursor: pointer;
339
+ transition: color var(--transition-speed) ease-in-out;
136
340
  }
137
- .Layer__profit-and-loss-chart .legend-item-0 {
138
- fill: var(--income-bar-color);
341
+ .Layer__toggle-option input + span:hover {
342
+ color: var(--text-color-primary);
139
343
  }
140
- .Layer__profit-and-loss-chart .legend-item-1 {
141
- fill: var(--expenses-bar-color);
344
+ .Layer__toggle-option input:checked + span {
345
+ color: var(--text-color-primary);
142
346
  }
143
- .Layer__profit-and-loss-chart__selection-indicator {
144
- height: 0.25rem;
145
- fill: var(--indicator-bar-color);
146
- transition: x 0.5s;
347
+ .Layer__toggle-option input:disabled + span {
348
+ cursor: not-allowed;
349
+ color: var(--text-color-secondary);
147
350
  }
148
- .Layer__profit-and-loss-summaries {
149
- display: flex;
150
- flex: 1;
151
- flex-direction: row;
152
- justify-content: space-evenly;
351
+ .Layer__toggle.Layer__toggle--small .Layer__toggle-option input + span {
352
+ height: 32px;
353
+ border-radius: 6px;
153
354
  }
154
- .Layer__profit-and-loss-summaries__summary {
155
- display: flex;
355
+ .Layer__toggle__thumb {
356
+ background: red;
357
+ position: absolute;
358
+ width: 100px;
359
+ left: 0;
360
+ top: 1px;
361
+ z-index: 1;
362
+ box-sizing: border-box;
363
+ padding: 8px 16px;
364
+ height: 36px;
365
+ border-radius: 52px;
366
+ background: var(--color-white);
367
+ box-shadow:
368
+ 0px 0px 0px 1px var(--color-base-300),
369
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.04),
370
+ 0px 2px 3px 0px rgba(0, 0, 0, 0.04),
371
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.02),
372
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.01);
373
+ }
374
+ .Layer__toggle.Layer__toggle--small .Layer__toggle__thumb {
375
+ height: 34px;
376
+ border-radius: 6px;
377
+ }
378
+ .Layer__toggle--initialized .Layer__toggle__thumb {
379
+ transition: left var(--transition-speed) ease-in-out, width var(--transition-speed) ease-out;
380
+ }
381
+ .Layer__select {
382
+ border-width: 0px;
383
+ font-family: var(--font-family);
384
+ font-size: var(--input-font-size);
385
+ font-variation-settings: "wght" var(--font-weight-normal);
386
+ font-variant-numeric: lining-nums proportional-nums;
387
+ font-feature-settings:
388
+ "cv10" on,
389
+ "cv05" on,
390
+ "cv08" on,
391
+ "ss03" on;
392
+ line-height: 140%;
393
+ }
394
+ .Layer__select .Layer__select__control {
395
+ border-width: 0px;
396
+ border-radius: var(--input-border-radius);
397
+ box-shadow: 0px 0px 0px 1px var(--color-base-300);
398
+ min-height: 36px;
399
+ }
400
+ .Layer__select .Layer__select__control--is-focused {
401
+ box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
402
+ }
403
+ .Layer__select .Layer__select__indicator-separator {
404
+ display: none;
405
+ }
406
+ .Layer__select .Layer__select__indicator {
407
+ padding: 7px;
408
+ }
409
+ .Layer__select .Layer__select__placeholder {
410
+ color: var(--color-base-500);
411
+ font-family: var(--font-family);
412
+ font-variation-settings: "wght" var(--font-weight-normal);
413
+ font-variant-numeric: lining-nums proportional-nums;
414
+ font-feature-settings:
415
+ "cv10" on,
416
+ "cv05" on,
417
+ "cv08" on,
418
+ "ss03" on;
419
+ }
420
+ .Layer__select__menu-portal {
421
+ font-family: var(--font-family);
422
+ font-size: var(--input-font-size);
423
+ line-height: 140%;
424
+ }
425
+ .Layer__select__menu-portal .Layer__select__option {
426
+ font-family: var(--font-family);
427
+ font-size: 12px;
428
+ color: #636665;
429
+ cursor: pointer;
430
+ transition: all 200ms ease-out;
431
+ }
432
+ .Layer__select__menu-portal .Layer__select__option.Layer__select__option--is-selected {
433
+ color: #1A1A1A;
434
+ background: #FAFCFC;
435
+ }
436
+ .Layer__select__menu-portal .Layer__select__option:hover {
437
+ color: #1A1A1A;
438
+ background: #FAFCFC;
439
+ }
440
+ .Layer__select__menu-portal .Layer__select__menu-notice {
441
+ font-family: var(--font-family);
442
+ font-size: 12px;
443
+ color: #999999;
444
+ }
445
+ .Layer__category-menu {
446
+ width: 15rem;
447
+ }
448
+ .Layer__category-menu.Layer__category-menu--full {
449
+ width: 100%;
450
+ max-width: 100%;
156
451
  flex: 1;
157
- flex-direction: column;
158
- border: 1px solid var(--border-color);
159
- border-radius: 0.5rem;
160
- padding: 1.5rem;
161
- margin-right: 1.5rem;
162
452
  }
163
- .Layer__profit-and-loss-summaries__summary:first-child {
164
- margin-left: 1.5rem;
453
+ .Layer__table {
454
+ width: 100%;
455
+ border-collapse: separate;
456
+ border-spacing: 0;
457
+ }
458
+ .Layer__table::-webkit-scrollbar {
459
+ width: 6px;
460
+ height: 6px;
461
+ }
462
+ .Layer__table::-webkit-scrollbar-track {
463
+ background: #f1f1f1;
464
+ border-radius: 4px;
465
+ }
466
+ .Layer__table::-webkit-scrollbar-thumb {
467
+ background: #e2e2e2;
468
+ border-radius: 4px;
469
+ }
470
+ .Layer__table::-webkit-scrollbar-thumb:hover {
471
+ background: #999;
472
+ }
473
+ .Layer__table-header {
474
+ color: var(--text-color-secondary);
475
+ font-size: var(--text-sm);
476
+ font-variation-settings: "wght" var(--font-weight-normal);
477
+ font-variant-numeric: lining-nums proportional-nums;
478
+ font-feature-settings:
479
+ "cv10" on,
480
+ "cv05" on,
481
+ "cv08" on,
482
+ "ss03" on;
483
+ text-overflow: ellipsis;
484
+ line-height: 140%;
485
+ letter-spacing: -0.06px;
486
+ padding: var(--spacing-sm) var(--spacing-md);
487
+ text-align: left;
165
488
  }
166
- .Layer__profit-and-loss-summaries__title {
167
- font-weight: 600;
168
- font-size: 1.375rem;
169
- margin-bottom: 0.75rem;
489
+ .Layer__table-header.Layer__table-header--primary {
490
+ color: var(--text-color-primary);
491
+ font-variation-settings: "wght" var(--font-weight-bold);
170
492
  }
171
- .Layer__profit-and-loss-summaries__month {
172
- font-size: 1.125rem;
173
- margin-bottom: 0.25rem;
493
+ .Layer__table-cell {
494
+ font-size: var(--text-md);
495
+ text-align: left;
496
+ color: var(--text-color-secondary);
174
497
  }
175
- .Layer__profit-and-loss-summaries__amount {
176
- font-weight: 600;
177
- font-size: 1.5rem;
498
+ .Layer__table-cell--amount {
499
+ justify-content: flex-end;
500
+ text-align: right;
501
+ }
502
+ .Layer__table-cell-content {
503
+ display: block;
504
+ top: 0px;
505
+ padding: var(--spacing-sm) var(--spacing-md);
506
+ box-sizing: border-box;
507
+ transition: all var(--transition-speed) ease-out;
508
+ }
509
+ .Layer__bank-transaction-row--removing .Layer__table-cell-content {
510
+ max-height: 0px;
511
+ top: 1px;
512
+ padding-top: 0;
513
+ padding-bottom: 0;
514
+ overflow: hidden;
178
515
  }
179
- .Layer__profit-and-loss-summaries__amount::before {
180
- content: "$";
516
+ .Layer__heading {
517
+ color: var(--text-color-primary);
518
+ font-size: var(--text-heading);
519
+ font-variation-settings: "wght" var(--font-weight-bold);
520
+ line-height: 140%;
521
+ letter-spacing: -0.12px;
522
+ margin: 0;
523
+ align-self: center;
524
+ }
525
+ .Layer__heading--secondary,
526
+ .Layer__heading.Layer__heading--secondary {
527
+ color: var(--text-color-primary);
528
+ font-size: var(--text-heading-sm);
529
+ font-variation-settings: "wght" var(--font-weight-bold);
530
+ }
531
+ .Layer__text {
532
+ font-family: var(--font-family);
533
+ font-variation-settings: "wght" var(--font-weight-normal);
534
+ font-variant-numeric: lining-nums proportional-nums;
535
+ font-feature-settings:
536
+ "cv10" on,
537
+ "cv05" on,
538
+ "cv08" on,
539
+ "ss03" on;
540
+ line-height: 140%;
541
+ }
542
+ .Layer__text--sm {
543
+ font-size: var(--text-sm);
544
+ }
545
+ .Layer__text--md {
546
+ font-size: var(--text-md);
547
+ }
548
+ .Layer__text--bold,
549
+ .Layer__text.Layer__text--bold {
550
+ font-variation-settings: "wght" var(--font-weight-bold);
551
+ }
552
+ .Layer__flex-1 {
553
+ flex: 1;
554
+ }
555
+ .Layer__justify--center {
556
+ justify-content: center;
557
+ }
558
+ .Layer__justify--start {
559
+ justify-content: flex-start;
560
+ }
561
+ .Layer__justify--end {
562
+ justify-content: flex-end;
563
+ }
564
+ .Layer__justify--space-between {
565
+ justify-content: space-between;
566
+ }
567
+ @keyframes rotating {
568
+ from {
569
+ -ms-transform: rotate(0deg);
570
+ -moz-transform: rotate(0deg);
571
+ -webkit-transform: rotate(0deg);
572
+ -o-transform: rotate(0deg);
573
+ transform: rotate(0deg);
574
+ }
575
+ to {
576
+ -ms-transform: rotate(360deg);
577
+ -moz-transform: rotate(360deg);
578
+ -webkit-transform: rotate(360deg);
579
+ -o-transform: rotate(360deg);
580
+ transform: rotate(360deg);
581
+ }
582
+ }
583
+ .Layer__anim--rotating {
584
+ -webkit-animation: rotating 2s linear infinite;
585
+ -moz-animation: rotating 2s linear infinite;
586
+ -ms-animation: rotating 2s linear infinite;
587
+ -o-animation: rotating 2s linear infinite;
588
+ animation: rotating 2s linear infinite;
181
589
  }
182
590
  .Layer__balance-sheet {
183
- --border-color: #eaecf0;
184
- --font-color: #101828;
185
- --indicator-bar-color: #3c3c3c;
186
- --background-color: white;
187
- --active: #e0e9ff;
188
- --income-bar-color: #0c48e5;
189
- --expenses-bar-color: #6d8ee7;
190
- width: 60rem;
191
- background-color: white;
192
- padding: 0.25rem;
591
+ border: 1px solid var(--border-color);
592
+ border-radius: var(--corner-radius);
593
+ background-color: var(--background-color);
193
594
  }
194
595
  .Layer__balance-sheet * {
195
- color: var(--font-color);
196
- stroke: var(--font-color);
596
+ color: var(--text-color);
597
+ stroke: var(--text-color);
197
598
  font-family: Inter;
198
599
  font-weight: 500;
199
600
  font-style: normal;
200
601
  }
201
602
  .Layer__balance-sheet__table {
202
- border: 1px solid var(--border-color);
203
- border-radius: 0.5rem;
204
- background-color: var(--border-color);
205
603
  display: grid;
206
604
  grid-template-columns: 1fr auto;
207
605
  gap: 1px 0;
@@ -211,6 +609,7 @@
211
609
  display: flex;
212
610
  flex: 1;
213
611
  flex-direction: row;
612
+ padding: 0 1rem;
214
613
  }
215
614
  .Layer__balance-sheet__title {
216
615
  display: inline;
@@ -232,7 +631,7 @@
232
631
  border: 2px solid var(--border-color);
233
632
  background-color: var(--background-color);
234
633
  padding: 0.5rem;
235
- border-radius: 0.5rem;
634
+ border-radius: var(--corner-radius);
236
635
  margin-left: 0.5rem;
237
636
  display: flex;
238
637
  flex-direction: row;
@@ -245,10 +644,6 @@
245
644
  .Layer__balance-sheet__download-button svg {
246
645
  margin-right: 0.5rem;
247
646
  }
248
- .Layer__balance-sheet-row {
249
- display: grid;
250
- grid-template-columns: subgrid;
251
- }
252
647
  .Layer__balance-sheet-date-picker {
253
648
  align-items: center;
254
649
  justify-content: center;
@@ -259,7 +654,7 @@
259
654
  border: 2px solid var(--border-color);
260
655
  background-color: var(--background-color);
261
656
  padding: 0.5rem;
262
- border-radius: 0.5rem;
657
+ border-radius: var(--corner-radius);
263
658
  display: flex;
264
659
  flex-direction: row;
265
660
  justify-content: center;
@@ -278,22 +673,48 @@
278
673
  left: 0;
279
674
  width: 1px;
280
675
  height: 100%;
676
+ opacity: 0;
281
677
  }
282
678
  .Layer__balance-sheet-row {
283
679
  padding: 1em;
284
680
  background-color: var(--background-color);
285
681
  font-size: 1em;
286
682
  }
683
+ .Layer__balance-sheet-row * {
684
+ min-height: 0;
685
+ }
686
+ .Layer__balance-sheet-row__children {
687
+ display: grid;
688
+ grid-column: span 2;
689
+ grid-template-columns: subgrid;
690
+ grid-template-rows: 0fr;
691
+ overflow: hidden;
692
+ transition: grid-template-rows var(--transition-speed);
693
+ }
694
+ .Layer__balance-sheet-row__children--expanded {
695
+ grid-template-rows: 1fr;
696
+ }
697
+ .Layer__balance-sheet-row__children--content {
698
+ min-height: 0;
699
+ display: grid;
700
+ grid-column: span 2;
701
+ grid-template-columns: subgrid;
702
+ }
287
703
  .Layer__balance-sheet-row__label {
288
704
  display: flex;
289
705
  justify-content: flex-start;
290
706
  align-items: center;
291
707
  }
292
708
  .Layer__balance-sheet-row__label svg {
293
- stroke: var(--font-color);
709
+ stroke: var(--text-color);
294
710
  width: 1.25rem;
295
711
  height: 1.25rem;
296
712
  margin-right: 0.25rem;
713
+ transition: transform var(--transition-speed);
714
+ transform: rotate(-90deg);
715
+ }
716
+ .Layer__balance-sheet-row__label--expanded svg {
717
+ transform: rotate(0deg);
297
718
  }
298
719
  .Layer__balance-sheet-row__value {
299
720
  display: flex;
@@ -301,7 +722,7 @@
301
722
  align-items: center;
302
723
  }
303
724
  .Layer__balance-sheet-row__value svg {
304
- stroke: var(--font-color);
725
+ stroke: var(--text-color);
305
726
  width: 1.25rem;
306
727
  height: 1.25rem;
307
728
  margin-right: 0.25rem;
@@ -352,203 +773,767 @@
352
773
  .Layer__balance-sheet-row__label--display-children-false svg {
353
774
  display: none;
354
775
  }
355
- .Layer__pill {
356
- background-color: var(--bank-transaction-buttons-selected-background-color);
357
- color: var(--bank-transaction-table-text-color);
358
- border-radius: 1rem;
359
- padding: 0.25rem 0.5rem;
360
- display: flex;
361
- flex-direction: row;
362
- align-items: center;
363
- }
364
- .Layer__pill svg {
365
- margin-right: 0.25rem;
776
+ .Layer__balance-sheet-row__label--variant-summation {
777
+ font-weight: bold;
366
778
  }
367
- .Layer__bank-transactions {
368
- --bank-transaction-buttons-border-color: #d0d5dd;
369
- --bank-transaction-buttons-selected-background-color: #e0e9ff;
370
- --bank-transaction-table-expanded-background-color: #f9f9f9;
371
- --bank-transaction-table-background-color: white;
372
- --bank-transaction-table-border-color: #eaecf0;
373
- --bank-transaction-table-text-color: #101828;
374
- --bank-transaction-positive-amount-text-color: #039855;
375
- --bank-transaction-variable-amount-text-color: #475467;
376
- margin: 3rem;
377
- border-radius: 0.6rem;
378
- border: 1px solid var(--bank-transaction-table-border-color);
379
- background-color: var(--bank-transaction-table-background-color);
380
- overflow: hidden;
381
- width: 100rem;
779
+ .Layer__balance-sheet-row__value--variant-summation {
780
+ font-weight: bold;
382
781
  }
383
- .Layer__bank-transactions * {
384
- font-family: Inter;
385
- color: var(--bank-transaction-table-text-color);
386
- font-style: normal;
387
- font-weight: 500;
782
+ .Layer__balance-sheet-row__value--expanded {
783
+ color: transparent;
784
+ user-select: none;
785
+ }
786
+ @keyframes pulse {
787
+ from {
788
+ opacity: 100%;
789
+ }
790
+ to {
791
+ opacity: 20%;
792
+ }
793
+ }
794
+ .Layer__balance-sheet-row__skeleton-text {
795
+ width: 4rem;
796
+ background-color: var(--text-skeleton-color);
797
+ height: 1rem;
798
+ border-radius: var(--corner-radius);
799
+ }
800
+ .Layer__balance-sheet-row__children--skeleton {
801
+ background-color: var(--background-color);
802
+ padding-left: 1rem;
388
803
  }
389
- .Layer__bank-transactions__header {
390
- display: flex;
391
- padding: 1rem;
804
+ .Layer__balance-sheet-row__value--skeleton,
805
+ .Layer__balance-sheet-row__label--skeleton {
806
+ animation: 1s pulse ease-in-out alternate infinite;
392
807
  }
393
- .Layer__bank-transactions__title {
394
- display: flex;
395
- align-items: center;
396
- flex: 1;
397
- justify-content: flex-start;
398
- font-size: 1.5rem;
399
- font-style: normal;
400
- font-weight: 600;
401
- line-height: 2rem;
402
- margin: 0;
808
+ .Layer__balance-sheet-row__value--skeleton svg,
809
+ .Layer__balance-sheet-row__label--skeleton svg {
810
+ stroke: var(--text-skeleton-color);
403
811
  }
404
- .Layer__bank-transactions__table {
405
- display: grid;
406
- grid-template-columns: repeat(3, 1fr) repeat(3, auto);
407
- gap: 1px 0px;
408
- background-color: var(--bank-transaction-table-border-color);
409
- border-top: 1px solid var(--bank-transaction-table-border-color);
410
- border-radius: 0.6rem;
812
+ .Layer__bank-transaction-row .Layer__table-cell {
813
+ border-top: 1px solid var(--border-color);
411
814
  }
412
- .Layer__bank-transactions__table-cell--header {
413
- display: flex;
414
- align-items: center;
415
- background-color: white;
416
- font-size: 16px;
417
- line-height: 20px;
418
- overflow: clip;
419
- padding: 1rem;
420
- font-weight: bold;
421
- text-align: left;
815
+ .Layer__bank-transactions__table .Layer__table-header {
816
+ background-color: var(--table-bg);
422
817
  }
423
- .Layer__bank-transactions__table-cell--header-amount {
424
- justify-content: flex-end;
818
+ .Layer__bank-transaction-row .Layer__table-cell {
819
+ background-color: var(--table-bg);
820
+ transition: background-color var(--transition-speed) ease-out;
425
821
  }
426
- .Layer__bank-transaction-row__table-cell {
822
+ .Layer__bank-transaction-row .Layer__table-cell-content {
823
+ min-height: 63px;
824
+ box-sizing: border-box;
427
825
  display: flex;
428
826
  align-items: center;
429
- background-color: white;
430
- font-size: 16px;
431
- line-height: 20px;
432
- overflow: clip;
433
- padding: 1rem;
434
827
  }
435
- .Layer__bank-transaction-row__table-cell--expanded {
436
- background-color: var(--bank-transaction-table-expanded-background-color);
828
+ .Layer__bank-transaction-row--expanded .Layer__table-cell {
829
+ background-color: var(--bg-element-focus);
437
830
  }
438
- .Layer__bank-transaction-row__table-cell--actions {
439
- justify-content: flex-end;
831
+ .Layer__expanded-bank-transaction-row {
832
+ display: block;
833
+ background-color: transparent;
834
+ transition: background-color var(--transition-speed) ease-out;
440
835
  }
441
- .Layer__bank-transaction-row__table-cell--date {
442
- color: var(--bank-transaction-variable-amount-text-color);
836
+ .Layer__bank-transaction-row:hover,
837
+ .Layer__bank-transaction-row:hover .Layer__table-cell,
838
+ .Layer__bank-transaction-list-item:hover,
839
+ .Layer__expanded-bank-transaction-row.Layer__expanded-bank-transaction-row--expanded {
840
+ background-color: var(--bg-element-focus);
841
+ transition: background-color var(--transition-speed) ease-out;
443
842
  }
444
- .Layer__bank-transaction-row__table-cell--amount-credit {
445
- justify-content: flex-end;
446
- color: var(--bank-transaction-positive-amount-text-color);
843
+ .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) {
844
+ color: var(--btn-color-hover);
845
+ background: var(--btn-bg-color-hover);
447
846
  }
448
- .Layer__bank-transaction-row__table-cell--amount-credit::before {
449
- content: "+$";
847
+ .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon {
848
+ color: var(--btn-color-icon-hover);
849
+ background: var(--btn-bg-color-icon-hover);
450
850
  }
451
- .Layer__bank-transaction-row__table-cell--amount-debit {
452
- justify-content: flex-end;
453
- color: var(--bank-transaction-variable-amount-text-color);
851
+ .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-active {
852
+ display: block;
454
853
  }
455
- .Layer__bank-transaction-row__table-cell--amount-debit::before {
456
- content: " $";
854
+ .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive {
855
+ display: none;
457
856
  }
458
- .Layer__bank-transaction-row__save-button {
459
- cursor: pointer;
857
+ .Layer__expanded-bank-transaction-row .Layer__expanded-bank-transaction-row__wrapper {
858
+ display: flex;
859
+ flex-direction: column;
860
+ gap: var(--spacing-sm);
861
+ overflow: hidden;
862
+ max-height: 0px;
863
+ transition: max-height var(--transition-speed) ease-out;
460
864
  }
461
- .Layer__bank-transaction-row__expand-button {
462
- margin-left: 0.5rem;
463
- cursor: pointer;
865
+ .Layer__expanded-bank-transaction-row--expanded .Layer__expanded-bank-transaction-row__wrapper {
866
+ max-height: 960px;
464
867
  }
465
- .Layer__category-menu {
466
- width: 15rem;
868
+ .Layer__bank-transaction-row__category-text {
869
+ flex: 1;
870
+ color: var(--text-color-primary);
871
+ white-space: nowrap;
872
+ max-width: 350px;
873
+ text-overflow: ellipsis;
874
+ overflow: hidden;
467
875
  }
468
- .Layer__expanded-bank-transaction-row {
469
- grid-column: 1/-1;
876
+ .Layer__expanded-bank-transaction-row__content {
470
877
  display: flex;
471
878
  flex-direction: column;
472
- background-color: var(--bank-transaction-table-expanded-background-color);
879
+ gap: var(--spacing-sm);
880
+ max-width: 680px;
473
881
  }
474
- .Layer__expanded-bank-transaction-row__purpose-button {
475
- padding: 0 1.5rem;
476
- align-self: flex-start;
882
+ .Layer__expanded-bank-transaction-row__content-toggle {
883
+ padding: var(--spacing-sm) var(--spacing-md);
477
884
  }
478
- .Layer__expanded-bank-transaction-row__content {
479
- padding: 0.75rem 1.5rem;
480
- display: grid;
481
- grid-template-columns: auto auto auto auto 1fr auto;
482
- gap: 0;
885
+ .Layer__expanded-bank-transaction-row__splits {
886
+ display: flex;
887
+ gap: var(--spacing-md);
888
+ padding: 0 var(--spacing-md);
483
889
  }
484
- .Layer__expanded-bank-transaction-row__table-cell {
485
- padding: 0.25rem 0.75rem;
486
- font-size: 0.875rem;
890
+ .Layer__expanded-bank-transaction-row__splits-inputs {
891
+ flex: 1;
487
892
  }
488
- .Layer__expanded-bank-transaction-row__table-cell:not(:last-child) {
489
- margin-right: 0.75rem;
893
+ .Layer__expanded-bank-transaction-row__splits-buttons button {
894
+ min-width: 114px;
490
895
  }
491
- .Layer__expanded-bank-transaction-row__table-cell:nth-child(6n+1) {
492
- padding-left: 0;
493
- margin-left: 0;
896
+ .Layer__bank-transaction-row__table-cell--amount-credit,
897
+ .Layer__bank-transaction-list-item__amount-credit {
898
+ justify-content: flex-end;
899
+ color: var(--text-color-transaction-credit);
494
900
  }
495
- .Layer__expanded-bank-transaction-row__table-cell:nth-child(6n+6) {
496
- padding-right: 0;
497
- margin-right: 0;
498
- padding-bottom: 0;
499
- margin-bottom: 0.5rem;
500
- display: flex;
501
- flex-direction: column;
901
+ .Layer__bank-transaction-row__table-cell--amount-credit .Layer__table-cell-content,
902
+ .Layer__bank-transaction-list-item__amount-credit .Layer__table-cell-content {
502
903
  justify-content: flex-end;
503
904
  }
504
- .Layer__expanded-bank-transaction-row__table-cell--description textarea {
505
- resize: none;
506
- border: 1px solid var(--bank-transaction-buttons-border-color);
507
- border-radius: 0.5rem;
905
+ .Layer__bank-transaction-row__table-cell--amount-debit,
906
+ .Layer__bank-transaction-list-item__amount-debit {
907
+ justify-content: flex-end;
908
+ color: var(--text-color-primary);
508
909
  }
509
- .Layer__expanded-bank-transaction-row__table-cell--header {
510
- font-weight: bold;
511
- text-align: left;
910
+ .Layer__bank-transaction-row__table-cell--amount-debit .Layer__table-cell-content,
911
+ .Layer__bank-transaction-list-item__amount-debit .Layer__table-cell-content {
912
+ justify-content: flex-end;
512
913
  }
513
- .Layer__expanded-bank-transaction-row__button--split {
514
- display: flex;
515
- flex-direction: row;
516
- align-items: center;
517
- padding-top: 0.5rem;
914
+ .Layer__bank-transaction-list-item__amount-debit {
915
+ color: var(--text-color-primary);
518
916
  }
519
- .Layer__expanded-bank-transaction-row__button--merge {
520
- display: flex;
521
- flex-direction: row;
522
- align-items: center;
523
- padding-top: 0.5rem;
917
+ .Layer__expanded-bank-transaction-row__description {
918
+ padding: 0 var(--spacing-md);
524
919
  }
525
- .Layer__expanded-bank-transaction-row__button--save {
526
- border: 1px solid var(--bank-transaction-buttons-border-color);
527
- border-radius: 0.5rem;
528
- padding: 0.625rem 1rem;
529
- background-color: var(--bank-transaction-buttons-selected-background-color);
530
- font-weight: 600;
920
+ .Layer__expanded-bank-transaction-row__description textarea {
921
+ width: 100%;
922
+ max-width: 680px;
923
+ height: 100px;
531
924
  }
532
- .Layer__expanded-bank-transaction-row__svg {
533
- margin-right: 0.75rem;
925
+ .Layer__expanded-bank-transaction-row__file-upload {
926
+ padding: 0 var(--spacing-md);
927
+ padding-bottom: var(--spacing-sm);
928
+ }
929
+ .Layer__bank-transaction-row__actions-cell {
930
+ border-left: 1px solid var(--border-color);
931
+ transition: border 5s ease-out;
932
+ width: 0%;
933
+ }
934
+ .Layer__bank-transaction-row__actions-cell--open {
935
+ border-left: 1px solid transparent;
936
+ }
937
+ .Layer__bank-transaction-row__actions-container {
938
+ display: flex;
939
+ align-items: center;
940
+ justify-content: flex-end;
941
+ gap: 8px;
942
+ }
943
+ .Layer__bank-transaction-row__actions-cell .Layer__bank-transaction-row__expand-button {
944
+ padding-top: 5px;
945
+ }
946
+ .Layer__bank-transaction-row__expand-button .Layer__chevron {
947
+ cursor: pointer;
948
+ }
949
+ .Layer__bank-transaction-row__expand-button:hover .Layer__chevron {
950
+ color: var(--text-color-primary);
534
951
  }
535
952
  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
536
953
  display: flex;
537
954
  flex-direction: row;
538
955
  margin-bottom: 0.5rem;
956
+ gap: var(--spacing-md);
957
+ }
958
+ .Layer__expanded-bank-transaction-row__split-amount--negative {
959
+ font-weight: bold;
960
+ color: var(--error-color);
961
+ border: 2.5px dotted var(--error-color);
962
+ }
963
+ .Layer__bank-transactions__list {
964
+ display: none;
965
+ list-style: none;
966
+ padding: 0;
967
+ margin: 0;
968
+ }
969
+ .Layer__bank-transaction-list-item {
970
+ display: flex;
971
+ flex-direction: column;
972
+ border-bottom: 1px solid var(--border-color);
973
+ }
974
+ .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row {
975
+ max-height: 60px;
976
+ opacity: 1;
977
+ transition: max-height 350ms ease-out, opacity 200ms ease-out;
978
+ justify-content: flex-end;
539
979
  }
540
- .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
541
- justify-content: stretch;
980
+ .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__expanded-row {
981
+ max-height: 0;
982
+ padding: 0;
983
+ overflow: hidden;
984
+ transition: all var(--transition-speed) ease-out;
985
+ }
986
+ .Layer__bank-transaction-list-item.Layer__bank-transaction-list-item--expanded {
987
+ background: var(--bg-element-focus);
988
+ }
989
+ .Layer__bank-transaction-list-item.Layer__bank-transaction-list-item--expanded .Layer__bank-transaction-list-item__base-row {
990
+ max-height: 0;
991
+ padding: 0;
992
+ opacity: 0;
993
+ }
994
+ .Layer__bank-transaction-list-item.Layer__bank-transaction-list-item--expanded .Layer__bank-transaction-list-item__expanded-row {
995
+ max-height: 480px;
996
+ }
997
+ .Layer__bank-transaction-list-item__base-row {
998
+ display: flex;
999
+ align-items: center;
1000
+ box-sizing: border-box;
1001
+ gap: var(--spacing-sm);
1002
+ padding: var(--spacing-md);
1003
+ }
1004
+ .Layer__bank-transaction-list-item__base-row .Layer__category-menu {
1005
+ width: 100%;
1006
+ }
1007
+ .Layer__bank-transaction-list-item__heading {
1008
+ display: flex;
1009
+ align-items: center;
1010
+ color: var(--color-base-700);
1011
+ font-size: var(--text-sm);
1012
+ gap: 4px;
1013
+ padding: var(--spacing-md);
1014
+ padding-bottom: var(--spacing-sm);
1015
+ }
1016
+ .Layer__bank-transaction-list-item__heading .Layer__bank-transaction-list-item__heading-separator {
1017
+ display: block;
1018
+ height: 9px;
1019
+ width: 1px;
1020
+ background: var(--color-base-200);
1021
+ }
1022
+ .Layer__bank-transaction-list-item__body {
1023
+ display: flex;
1024
+ gap: 4px;
1025
+ color: var(--text-color-primary);
1026
+ width: 100%;
1027
+ padding: var(--spacing-sm) var(--spacing-md);
1028
+ box-sizing: border-box;
1029
+ }
1030
+ .Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name {
1031
+ flex: 1;
1032
+ }
1033
+ .Layer__bank-transaction-list-item__body .Layer__bank-transaction-row__expand-button {
1034
+ margin: 0 var(--spacing-xs);
1035
+ }
1036
+ .Layer__expanded-bank-transaction-row__submit-btn {
1037
+ box-sizing: border-box;
1038
+ padding: var(--spacing-md);
1039
+ padding-top: var(--spacing-sm);
1040
+ }
1041
+ .Layer__expanded-bank-transaction-row__submit-btn .Layer__bank-transaction__submit-btn {
1042
+ width: 100%;
1043
+ }
1044
+ .Layer__table.Layer__bank-transactions__table {
1045
+ overflow: auto;
1046
+ }
1047
+ .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
1048
+ position: -webkit-sticky;
1049
+ position: sticky;
1050
+ right: 425px;
1051
+ width: 125px;
1052
+ z-index: 2;
1053
+ box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
1054
+ }
1055
+ .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
1056
+ position: -webkit-sticky;
1057
+ position: sticky;
1058
+ min-width: 425px;
1059
+ box-sizing: border-box;
1060
+ right: 0;
1061
+ z-index: 2;
1062
+ }
1063
+ .Layer__bank-transactions__date-col {
1064
+ min-width: 125px;
1065
+ max-width: 140px;
1066
+ box-sizing: border-box;
1067
+ }
1068
+ .Layer__bank-transactions__tx-col {
1069
+ min-width: 105px;
1070
+ max-width: 300px;
1071
+ box-sizing: border-box;
1072
+ }
1073
+ .Layer__bank-transactions__account-col {
1074
+ min-width: 105px;
1075
+ max-width: 300px;
1076
+ box-sizing: border-box;
1077
+ }
1078
+ .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col,
1079
+ .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col {
1080
+ text-overflow: ellipsis;
1081
+ max-width: 300px;
1082
+ }
1083
+ .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
1084
+ .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__tx-text,
1085
+ .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
1086
+ .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__tx-text {
1087
+ display: block;
1088
+ max-width: 100%;
1089
+ overflow: hidden;
1090
+ text-overflow: ellipsis;
1091
+ white-space: nowrap;
1092
+ }
1093
+ .Layer__bank-transaction-row.Layer__bank-transaction-row--expanded td {
1094
+ vertical-align: top;
1095
+ }
1096
+ @container (max-width: 1000px) and (min-width: 801px) {
1097
+ .Layer__table.Layer__table.Layer__bank-transactions__table {
1098
+ display: block;
1099
+ }
1100
+ .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
1101
+ border-left: 1px solid var(--border-color);
1102
+ }
1103
+ .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col::after {
1104
+ content: "";
1105
+ width: 50px;
1106
+ height: 100%;
1107
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 120%);
1108
+ position: absolute;
1109
+ left: -51px;
1110
+ top: 0px;
1111
+ z-index: 0;
1112
+ }
1113
+ }
1114
+ @container (max-width: 700px) {
1115
+ .Layer__bank-transactions__header {
1116
+ box-shadow: 0px -1px 0px 0px var(--neutral-8, rgba(23, 51, 45, 0.16)) inset;
1117
+ background-color: var(--table-bg);
1118
+ position: sticky;
1119
+ top: 0px;
1120
+ z-index: 2;
1121
+ }
1122
+ .Layer__table.Layer__bank-transactions__table {
1123
+ display: none;
1124
+ }
1125
+ .Layer__bank-transactions__list {
1126
+ display: block;
1127
+ }
1128
+ }
1129
+ .Layer__tooltip.Layer__bank-transactions__tx-tooltip {
1130
+ max-width: 250px;
1131
+ }
1132
+ .Layer__chart-of-accounts {
1133
+ background-color: var(--background-color);
1134
+ border: 1px solid var(--border-color);
1135
+ border-radius: var(--corner-radius);
1136
+ }
1137
+ .Layer__chart-of-accounts * {
1138
+ color: var(--text-color);
1139
+ stroke: var(--text-color);
1140
+ font-family: Inter;
1141
+ font-weight: 500;
1142
+ font-style: normal;
1143
+ }
1144
+ .Layer__chart-of-accounts__table {
1145
+ display: grid;
1146
+ grid-template-columns: 2fr 1fr 1fr 1fr auto;
1147
+ gap: 1px 0;
1148
+ font-size: 1rem;
1149
+ }
1150
+ .Layer__chart-of-accounts__header {
1151
+ display: flex;
1152
+ flex: 1;
1153
+ flex-direction: row;
1154
+ padding: 1rem;
1155
+ border-bottom: 1px solid var(--border-color);
1156
+ align-items: center;
1157
+ }
1158
+ .Layer__chart-of-accounts__title {
1159
+ display: inline;
1160
+ flex: 1;
1161
+ font-size: 1.5rem;
1162
+ font-weight: 600;
1163
+ margin: 0;
1164
+ }
1165
+ .Layer__chart-of-accounts__actions {
1166
+ display: flex;
1167
+ flex-direction: row;
1168
+ }
1169
+ .Layer__chart-of-accounts__download-button {
1170
+ align-self: center;
1171
+ border: 2px solid var(--border-color);
1172
+ background-color: var(--background-color);
1173
+ border-radius: var(--corner-radius);
1174
+ margin-left: 0.5rem;
1175
+ display: flex;
1176
+ flex-direction: row;
1177
+ justify-content: center;
1178
+ align-items: center;
1179
+ padding: 0.5rem 1rem;
1180
+ font-weight: 600;
1181
+ }
1182
+ .Layer__chart-of-accounts__download-button:active {
1183
+ background-color: var(--active);
1184
+ }
1185
+ .Layer__chart-of-accounts__download-button svg {
1186
+ margin-right: 0.5rem;
1187
+ }
1188
+ .Layer__chart-of-accounts__edit-accounts-button {
1189
+ align-self: center;
1190
+ border: 2px solid var(--button-color-dark);
1191
+ border-radius: var(--corner-radius);
542
1192
  margin-left: 0.5rem;
543
- border: 1px solid var(--bank-transaction-buttons-border-color);
544
- border-radius: 0.5rem;
1193
+ display: flex;
1194
+ flex-direction: row;
1195
+ justify-content: center;
1196
+ align-items: center;
1197
+ color: var(--background-color);
1198
+ background-color: var(--button-color-dark);
1199
+ padding: 0.5rem 1rem;
1200
+ font-weight: 600;
1201
+ }
1202
+ .Layer__chart-of-accounts__edit-accounts-button svg {
1203
+ margin-right: 0.5rem;
1204
+ }
1205
+ .Layer__chart-of-accounts__edit-accounts-button:active {
1206
+ background-color: var(--active);
1207
+ }
1208
+ .Layer__chart-of-accounts__table-cell--header {
1209
+ font-weight: 700;
1210
+ }
1211
+ .Layer__chart-of-accounts__table-cell--header,
1212
+ .Layer__chart-of-accounts-row__table-cell {
1213
+ background-color: var(--background-color);
1214
+ padding: 1rem 1.5rem;
1215
+ display: flex;
1216
+ flex-direction: row;
1217
+ align-items: center;
1218
+ }
1219
+ .Layer__chart-of-accounts__table-cell--header-balance,
1220
+ .Layer__chart-of-accounts-row__table-cell--balance {
1221
+ justify-content: flex-end;
1222
+ }
1223
+ .Layer__chart-of-accounts-row__table-cell--amount-positive::before {
1224
+ content: "$";
1225
+ }
1226
+ .Layer__chart-of-accounts-row__table-cell--amount-negative::before {
1227
+ content: "-$";
1228
+ }
1229
+ .Layer__chart-of-accounts-row__table-cell--depth-0 {
1230
+ font-weight: 700;
1231
+ }
1232
+ .Layer__chart-of-accounts-row__table-cell--depth-1.Layer__chart-of-accounts-row__table-cell--name {
1233
+ padding-right: 2em;
1234
+ padding-left: 2em;
1235
+ }
1236
+ .Layer__chart-of-accounts-row__table-cell--depth-2.Layer__chart-of-accounts-row__table-cell--name {
1237
+ padding-right: 2em;
1238
+ padding-left: 4em;
1239
+ }
1240
+ .Layer__chart-of-accounts-row__view-entries-button {
1241
+ align-self: center;
1242
+ border: 2px solid var(--border-color);
1243
+ background-color: var(--background-color);
1244
+ border-radius: var(--corner-radius);
1245
+ margin-left: 0.5rem;
1246
+ display: flex;
1247
+ flex-direction: row;
1248
+ justify-content: center;
1249
+ align-items: center;
1250
+ padding: 0.5rem 1rem;
1251
+ font-weight: 600;
1252
+ }
1253
+ .Layer__chart-of-accounts-row__view-entries-button:active {
1254
+ background-color: var(--active);
1255
+ }
1256
+ .Layer__chart-of-accounts-new-form {
1257
+ display: grid;
1258
+ grid-template-columns: auto 1fr;
1259
+ border: 1px solid var(--border-color);
1260
+ border-radius: var(--corner-radius);
1261
+ font-size: 1rem;
1262
+ }
1263
+ .Layer__chart-of-accounts-new-form__field {
1264
+ display: grid;
1265
+ grid-column: span 2;
1266
+ grid-template-columns: subgrid;
1267
+ padding: 0.5rem;
1268
+ margin: 0.5rem;
1269
+ }
1270
+ .Layer__chart-of-accounts-new-form__field span {
1271
+ padding-right: 0.5rem;
1272
+ align-self: center;
1273
+ }
1274
+ .Layer__chevron {
1275
+ stroke: var(--text-color);
1276
+ transition: transform 0.33s;
1277
+ }
1278
+ .Layer__chevron__down {
1279
+ transform: rotate(0deg);
1280
+ }
1281
+ .Layer__chevron__up {
1282
+ transform: rotate(180deg);
1283
+ }
1284
+ .Layer__chevron__up--counterclockwise {
1285
+ transform: rotate(-180deg);
1286
+ }
1287
+ .Layer__loader {
1288
+ width: 100%;
1289
+ display: flex;
1290
+ align-items: center;
1291
+ justify-content: center;
1292
+ gap: 8px;
1293
+ padding: var(--spacing-md);
1294
+ color: var(--text-color-secondary);
1295
+ font-size: var(--text-sm);
1296
+ box-sizing: border-box;
1297
+ }
1298
+ .Layer__pill {
1299
+ background-color: var(--badge-bg-color);
1300
+ color: var(--badge-color);
1301
+ border-radius: var(--badge-border-radius);
1302
+ font-size: var(--text-sm);
1303
+ padding: var(--spacing-2xs) var(--spacing-sm);
1304
+ display: flex;
1305
+ flex-direction: row;
1306
+ align-items: center;
1307
+ white-space: nowrap;
1308
+ }
1309
+ .Layer__pill svg {
1310
+ margin-right: 0.25rem;
1311
+ }
1312
+ .Layer__profit-and-loss {
1313
+ background-color: white;
545
1314
  padding: 0.25rem;
546
- width: 5rem;
547
1315
  }
548
- .Layer__expanded-bank-transaction-row__split-amount--negative {
1316
+ .Layer__profit-and-loss * {
1317
+ color: var(--text-color);
1318
+ font-family: Inter;
1319
+ font-weight: 500;
1320
+ font-style: normal;
1321
+ }
1322
+ .Layer__profit-and-loss__title {
1323
+ font-size: 1.5rem;
1324
+ font-weight: 600;
1325
+ margin-bottom: 1.5rem;
1326
+ margin-left: 1.5rem;
1327
+ margin-right: 1.5rem;
1328
+ }
1329
+ .Layer__profit-and-loss-table {
1330
+ border: 1px solid var(--border-color);
1331
+ border-radius: var(--corner-radius);
1332
+ display: grid;
1333
+ grid-template-columns: 1fr auto;
1334
+ font-size: 1rem;
1335
+ overflow: hidden;
1336
+ }
1337
+ .Layer__profit-and-loss-table__outflows {
1338
+ margin-top: 1rem;
1339
+ }
1340
+ .Layer__profit-and-loss-row {
1341
+ padding: 1em;
1342
+ background-color: var(--background-color);
1343
+ font-size: 1em;
1344
+ }
1345
+ .Layer__profit-and-loss-row__children {
1346
+ display: grid;
1347
+ grid-column: span 2;
1348
+ grid-template-columns: subgrid;
1349
+ grid-template-rows: 0fr;
1350
+ overflow: hidden;
1351
+ transition: grid-template-rows var(--transition-speed);
1352
+ }
1353
+ .Layer__profit-and-loss-row__children--expanded {
1354
+ grid-template-rows: 1fr;
1355
+ }
1356
+ .Layer__profit-and-loss-row__children--content {
1357
+ min-height: 0;
1358
+ display: grid;
1359
+ grid-column: span 2;
1360
+ grid-template-columns: subgrid;
1361
+ }
1362
+ .Layer__profit-and-loss-row__label {
1363
+ display: flex;
1364
+ justify-content: flex-start;
1365
+ align-items: center;
1366
+ }
1367
+ .Layer__profit-and-loss-row__label svg {
1368
+ stroke: var(--text-color);
1369
+ width: 1.25rem;
1370
+ height: 1.25rem;
1371
+ margin-right: 0.25rem;
1372
+ transition: transform var(--transition-speed);
1373
+ transform: rotate(-90deg);
1374
+ }
1375
+ .Layer__profit-and-loss-row__label--expanded svg {
1376
+ transform: rotate(0deg);
1377
+ }
1378
+ .Layer__profit-and-loss-row__value--expanded {
1379
+ color: transparent;
1380
+ user-select: none;
1381
+ }
1382
+ .Layer__profit-and-loss-row__value {
1383
+ display: flex;
1384
+ justify-content: flex-end;
1385
+ align-items: center;
1386
+ }
1387
+ .Layer__profit-and-loss-row__label--display-children-true {
1388
+ font-weight: bold;
1389
+ }
1390
+ .Layer__profit-and-loss-row__value--display-children-true {
1391
+ font-weight: bold;
1392
+ }
1393
+ .Layer__profit-and-loss-row__label--display-children-false {
1394
+ font-weight: normal;
1395
+ }
1396
+ .Layer__profit-and-loss-row__label--display-children-false svg {
1397
+ visibility: hidden;
1398
+ }
1399
+ .Layer__profit-and-loss-row__label--display-children-false {
1400
+ font-weight: normal;
1401
+ }
1402
+ .Layer__profit-and-loss-row__label--display-children-false svg {
1403
+ visibility: hidden;
1404
+ }
1405
+ .Layer__profit-and-loss-row__label--variant-summation {
1406
+ font-weight: bold;
1407
+ border-top: 1px solid var(--border-color);
1408
+ }
1409
+ .Layer__profit-and-loss-row__value--variant-summation {
549
1410
  font-weight: bold;
550
- color: red;
551
- border: 2.5px dotted red;
1411
+ border-top: 1px solid var(--border-color);
1412
+ }
1413
+ .Layer__profit-and-loss-row__value--amount-positive::before {
1414
+ content: "$";
1415
+ }
1416
+ .Layer__profit-and-loss-row__value--amount-negative::before {
1417
+ content: "-$";
1418
+ }
1419
+ .Layer__profit-and-loss-row__label--depth-0 {
1420
+ font-weight: 700;
1421
+ }
1422
+ .Layer__profit-and-loss-row__value--depth-0 {
1423
+ font-weight: 700;
1424
+ }
1425
+ .Layer__profit-and-loss-row__label--depth-1 {
1426
+ padding-right: 2em;
1427
+ padding-left: 2em;
1428
+ font-size: 0.9em;
1429
+ }
1430
+ .Layer__profit-and-loss-row__value--depth-1 {
1431
+ font-size: 0.9em;
1432
+ }
1433
+ .Layer__profit-and-loss-date-picker {
1434
+ width: 20rem;
1435
+ display: flex;
1436
+ flex-direction: row;
1437
+ justify-content: center;
1438
+ align-items: center;
1439
+ padding: 0.25rem;
1440
+ margin: 0.5rem;
1441
+ border: 1px solid var(--border-color);
1442
+ border-radius: var(--corner-radius);
1443
+ }
1444
+ .Layer__profit-and-loss-date-picker__button {
1445
+ padding: 0.25rem;
1446
+ display: flex;
1447
+ justify-content: center;
1448
+ align-items: center;
1449
+ text-align: center;
1450
+ background-color: var(--background-color);
1451
+ border: 0;
1452
+ border-radius: var(--corner-radius);
1453
+ }
1454
+ .Layer__profit-and-loss-date-picker__button:active {
1455
+ background-color: var(--active);
1456
+ }
1457
+ .Layer__profit-and-loss-date-picker__button-icon path {
1458
+ stroke: var(--text-color);
1459
+ }
1460
+ .Layer__profit-and-loss-date-picker__label {
1461
+ flex: 1;
1462
+ font-size: 1rem;
1463
+ display: flex;
1464
+ justify-content: center;
1465
+ align-items: center;
1466
+ text-align: center;
1467
+ }
1468
+ .Layer__profit-and-loss-chart__bar--income {
1469
+ fill: var(--bar-color-income);
1470
+ }
1471
+ .Layer__profit-and-loss-chart__bar--expenses {
1472
+ fill: var(--bar-color-expenses);
1473
+ }
1474
+ .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
1475
+ font-size: 0.75rem;
1476
+ }
1477
+ .Layer__profit-and-loss-chart .recharts-legend-wrapper {
1478
+ margin-top: -1.25rem;
1479
+ }
1480
+ .Layer__profit-and-loss-chart .recharts-legend-item-text {
1481
+ font-size: 1rem;
1482
+ vertical-align: middle;
1483
+ }
1484
+ .Layer__profit-and-loss-chart .recharts-legend-item {
1485
+ fill: var(--bar-color-income);
1486
+ vertical-align: middle;
1487
+ }
1488
+ .Layer__profit-and-loss-chart .legend-item-0 {
1489
+ fill: var(--bar-color-income);
1490
+ }
1491
+ .Layer__profit-and-loss-chart .legend-item-1 {
1492
+ fill: var(--bar-color-expenses);
1493
+ }
1494
+ .Layer__profit-and-loss-chart__selection-indicator {
1495
+ height: 0.25rem;
1496
+ fill: var(--indicator-color);
1497
+ transition: x 0.5s;
1498
+ }
1499
+ .Layer__profit-and-loss-summaries {
1500
+ display: flex;
1501
+ flex: 1;
1502
+ flex-direction: row;
1503
+ justify-content: space-evenly;
1504
+ }
1505
+ .Layer__profit-and-loss-summaries__summary {
1506
+ display: flex;
1507
+ flex: 1;
1508
+ flex-direction: column;
1509
+ border: 1px solid var(--border-color);
1510
+ border-radius: var(--corner-radius);
1511
+ padding: 1.5rem;
1512
+ margin-right: 1.5rem;
1513
+ }
1514
+ .Layer__profit-and-loss-summaries__summary:first-child {
1515
+ margin-left: 1.5rem;
1516
+ }
1517
+ .Layer__profit-and-loss-summaries__title {
1518
+ font-weight: 600;
1519
+ font-size: 1.375rem;
1520
+ margin-bottom: 0.75rem;
1521
+ }
1522
+ .Layer__profit-and-loss-summaries__month {
1523
+ font-size: 1.125rem;
1524
+ margin-bottom: 0.25rem;
1525
+ }
1526
+ .Layer__profit-and-loss-summaries__amount,
1527
+ .Layer__profit-and-loss-summaries__amount--positive {
1528
+ font-weight: 600;
1529
+ font-size: 1.5rem;
1530
+ }
1531
+ .Layer__profit-and-loss-summaries__amount::before,
1532
+ .Layer__profit-and-loss-summaries__amount--positive::before {
1533
+ content: "$";
1534
+ }
1535
+ .Layer__profit-and-loss-summaries__amount--negative::before {
1536
+ content: "-$";
552
1537
  }
553
1538
  .Layer__radio-button-group {
554
1539
  display: flex;
@@ -561,6 +1546,7 @@
561
1546
  .Layer__radio-button-group__radio-button {
562
1547
  display: flex;
563
1548
  flex-direction: row;
1549
+ position: relative;
564
1550
  }
565
1551
  .Layer__radio-button-group__radio-button input {
566
1552
  position: absolute;
@@ -569,7 +1555,7 @@
569
1555
  }
570
1556
  .Layer__radio-button-group__radio-button div {
571
1557
  padding: 0.6rem 1rem;
572
- border: 1px solid var(--bank-transaction-buttons-border-color);
1558
+ border: 1px solid var(--buttons-border-color);
573
1559
  border-right: 0;
574
1560
  border-radius: 0;
575
1561
  font-weight: 600;
@@ -582,15 +1568,29 @@
582
1568
  padding: 0.6rem 1rem;
583
1569
  }
584
1570
  .Layer__radio-button-group__radio-button:first-of-type div {
585
- border-start-start-radius: 0.6rem;
586
- border-end-start-radius: 0.6rem;
1571
+ border-start-start-radius: var(--corner-radius);
1572
+ border-end-start-radius: var(--corner-radius);
587
1573
  }
588
1574
  .Layer__radio-button-group__radio-button:last-of-type div {
589
- border-right: 1px solid var(--bank-transaction-buttons-border-color);
590
- border-start-end-radius: 0.6rem;
591
- border-end-end-radius: 0.6rem;
1575
+ border-right: 1px solid var(--buttons-border-color);
1576
+ border-start-end-radius: var(--corner-radius);
1577
+ border-end-end-radius: var(--corner-radius);
592
1578
  }
593
1579
  .Layer__radio-button-group__radio-button input:checked + div {
594
- background: var(--bank-transaction-buttons-selected-background-color);
1580
+ background: var(--active);
1581
+ }
1582
+ .Layer__tooltip {
1583
+ background: #333333;
1584
+ color: #fff;
1585
+ padding: 6px;
1586
+ border-radius: 6px;
1587
+ box-sizing: border-box;
1588
+ width: max-content;
1589
+ max-width: calc(100vw - 10px);
1590
+ }
1591
+ .Layer__tooltip-trigger {
1592
+ flex: 1;
1593
+ padding-top: 2px;
1594
+ max-width: 100%;
595
1595
  }
596
1596
  /*# sourceMappingURL=index.css.map */