@liuk123/insui 0.0.1-alpha.1 → 0.0.1-alpha.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 (6) hide show
  1. package/README.md +79 -41
  2. package/fesm2022/liuk123-insui.mjs +178 -112
  3. package/fesm2022/liuk123-insui.mjs.map +1 -1
  4. package/index.d.ts +152 -157
  5. package/package.json +1 -1
  6. package/styles/ins-ui-global.css +1109 -1109
package/styles/ins-ui-global.css CHANGED
@@ -1,1109 +1,1109 @@
1
- :root {
2
- --ins-font-heading: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
3
- --ins-font-text: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
4
- --ins-font-code: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
5
- --ins-font-heading-1: 400 2.75rem / 3.5rem var(--ins-font-heading);
6
- --ins-font-heading-2: 400 2.25rem / 3rem var(--ins-font-heading);
7
- --ins-font-heading-3: 400 1.75rem / 2.5rem var(--ins-font-heading);
8
- --ins-font-heading-4: 400 1.5rem / 2rem var(--ins-font-heading);
9
- --ins-font-heading-5: 400 1.25rem / 1.75rem var(--ins-font-heading);
10
- --ins-font-heading-6: 400 1.125rem / 1.5rem var(--ins-font-heading);
11
- --ins-font-text-xl: normal 1.5rem / 1.75rem var(--ins-font-text);
12
- --ins-font-text-l: normal 1.25rem / 1.75rem var(--ins-font-text);
13
- --ins-font-text-m: normal 1rem / 1.5rem var(--ins-font-text);
14
- --ins-font-text-s: normal 0.875rem / 1.25rem var(--ins-font-text);
15
- --ins-font-text-xs: normal 0.7875rem / 1rem var(--ins-font-text);
16
- --ins-radius-xs: 0.25rem;
17
- --ins-radius-s: 0.5rem;
18
- --ins-radius-m: 0.725rem;
19
- --ins-radius-l: 1rem;
20
- --ins-radius-xl: 1.5rem;
21
- --ins-height-xs: 1.5rem;
22
- --ins-height-s: 2rem;
23
- --ins-height-m: 2.5rem;
24
- --ins-height-l: 3.25rem;
25
- --ins-padding-xs: 0.25rem;
26
- --ins-padding-s: 0.625rem;
27
- --ins-padding-m: 1rem;
28
- --ins-padding-l: 1.5rem;
29
- --ins-padding-xl: 2rem;
30
- --ins-duration: 0.3s;
31
- --ins-disabled-opacity: 0.56;
32
- }
33
- @media screen {
34
- [insTheme='dark'] {
35
- color-scheme: dark;
36
- --ins-background-base: #222;
37
- --ins-background-base-alt: #333;
38
- --ins-background-neutral-1: rgba(255, 255, 255, 0.08);
39
- --ins-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
40
- --ins-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
41
- --ins-background-accent-opposite: #fff;
42
- --ins-background-accent-opposite-hover: #f6f6f6;
43
- --ins-background-accent-opposite-pressed: #ededed;
44
- --ins-background-elevation-1: #292929;
45
- --ins-background-elevation-2: #333;
46
- --ins-service-autofill-background: #554a2a;
47
- --ins-border-normal: rgba(255, 255, 255, 0.14);
48
- --ins-border-hover: rgba(255, 255, 255, 0.6);
49
- --ins-border-focus: rgba(255, 255, 255, 0.64);
50
- --ins-status-negative: #ff8c67;
51
- --ins-status-negative-pale: rgba(244, 87, 37, 0.32);
52
- --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
53
- --ins-status-positive: #4ac99b;
54
- --ins-status-positive-pale: rgba(74, 201, 155, 0.32);
55
- --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
56
- --ins-status-warning: #ffc700;
57
- --ins-status-warning-pale: rgba(255, 199, 0, 0.32);
58
- --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
59
- --ins-status-info: #70b6f6;
60
- --ins-status-info-pale: rgba(112, 182, 246, 0.32);
61
- --ins-status-info-pale-hover: rgba(112, 182, 246, 0.4);
62
- --ins-status-neutral: #959ba4;
63
- --ins-text-primary: rgba(255, 255, 255, 0.95);
64
- --ins-text-secondary: rgba(255, 255, 255, 0.72);
65
- --ins-text-tertiary: rgba(255, 255, 255, 0.6);
66
- --ins-text-action: #6788ff;
67
- --ins-text-action-hover: #526ed3;
68
- --ins-text-positive: #44c596;
69
- --ins-text-positive-hover: #3aa981;
70
- --ins-text-negative: #ff8c67;
71
- --ins-text-negative-hover: #bb593a;
72
- }
73
- :root {
74
- color-scheme: light;
75
- --ins-background-base: #fafafa;
76
- --ins-background-base-alt: #f6f6f6;
77
- --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
78
- --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
79
- --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
80
- --ins-background-accent-1: #526ed3;
81
- --ins-background-accent-1-hover: #6c86e2;
82
- --ins-background-accent-1-pressed: #314692;
83
- --ins-background-accent-2: #ff7043;
84
- --ins-background-accent-2-hover: #ff9a94;
85
- --ins-background-accent-2-pressed: #e7716a;
86
- --ins-background-accent-opposite: #000;
87
- --ins-background-accent-opposite-hover: #333;
88
- --ins-background-accent-opposite-pressed: #808080;
89
- --ins-background-elevation-1: #fafafa;
90
- --ins-background-elevation-2: #f3f3f3;
91
- --ins-service-autofill-background: #fff5c0;
92
- --ins-service-backdrop: rgba(0, 0, 0, 0.45);
93
- --ins-border-normal: rgba(0, 0, 0, 0.1);
94
- --ins-border-hover: rgba(0, 0, 0, 0.25);
95
- --ins-border-focus: rgba(51, 51, 51, 0.64);
96
- --ins-status-negative: #f45725;
97
- --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
98
- --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
99
- --ins-status-positive: #4ac99b;
100
- --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
101
- --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
102
- --ins-status-warning: #ffc700;
103
- --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
104
- --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
105
- --ins-status-info: #70b6f6;
106
- --ins-status-info-pale: rgba(112, 182, 246, 0.12);
107
- --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
108
- --ins-status-neutral: #79818c;
109
- --ins-text-primary: #1b1f3b;
110
- --ins-text-secondary: rgba(27, 31, 59, 0.65);
111
- --ins-text-tertiary: rgba(27, 31, 59, 0.4);
112
- --ins-text-primary-on-accent: #fff;
113
- --ins-text-action: #4c66c3;
114
- --ins-text-action-hover: #6c86e2;
115
- --ins-text-positive: #3aa981;
116
- --ins-text-positive-hover: #7ac5aa;
117
- --ins-text-negative: #dd4c1e;
118
- --ins-text-negative-hover: #e38163;
119
- --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
120
- --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
121
- --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
122
- --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
123
- }
124
- }
125
- @media print {
126
- :root,
127
- [insTheme] {
128
- color-scheme: light;
129
- --ins-background-base: #fafafa;
130
- --ins-background-base-alt: #f6f6f6;
131
- --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
132
- --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
133
- --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
134
- --ins-background-accent-1: #526ed3;
135
- --ins-background-accent-1-hover: #6c86e2;
136
- --ins-background-accent-1-pressed: #314692;
137
- --ins-background-accent-2: #ff7043;
138
- --ins-background-accent-2-hover: #ff9a94;
139
- --ins-background-accent-2-pressed: #e7716a;
140
- --ins-background-accent-opposite: #000;
141
- --ins-background-accent-opposite-hover: #333;
142
- --ins-background-accent-opposite-pressed: #808080;
143
- --ins-background-elevation-1: #fafafa;
144
- --ins-background-elevation-2: #f3f3f3;
145
- --ins-service-autofill-background: #fff5c0;
146
- --ins-service-backdrop: rgba(0, 0, 0, 0.45);
147
- --ins-border-normal: rgba(0, 0, 0, 0.1);
148
- --ins-border-hover: rgba(0, 0, 0, 0.25);
149
- --ins-border-focus: rgba(51, 51, 51, 0.64);
150
- --ins-status-negative: #f45725;
151
- --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
152
- --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
153
- --ins-status-positive: #4ac99b;
154
- --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
155
- --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
156
- --ins-status-warning: #ffc700;
157
- --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
158
- --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
159
- --ins-status-info: #70b6f6;
160
- --ins-status-info-pale: rgba(112, 182, 246, 0.12);
161
- --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
162
- --ins-status-neutral: #79818c;
163
- --ins-text-primary: #1b1f3b;
164
- --ins-text-secondary: rgba(27, 31, 59, 0.65);
165
- --ins-text-tertiary: rgba(27, 31, 59, 0.4);
166
- --ins-text-primary-on-accent: #fff;
167
- --ins-text-action: #4c66c3;
168
- --ins-text-action-hover: #6c86e2;
169
- --ins-text-positive: #3aa981;
170
- --ins-text-positive-hover: #7ac5aa;
171
- --ins-text-negative: #dd4c1e;
172
- --ins-text-negative-hover: #e38163;
173
- --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
174
- --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
175
- --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
176
- --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
177
- }
178
- }
179
- [insAppearance][data-appearance='accent'] {
180
- background: var(--ins-background-accent-2);
181
- color: var(--ins-text-primary-on-accent);
182
- }
183
- @media (hover: hover) and (pointer: fine) {
184
- [insAppearance][data-appearance='accent']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
185
- background: var(--ins-background-accent-2-hover);
186
- }
187
- }
188
- [insAppearance][data-appearance='accent'][data-state='hover'] {
189
- background: var(--ins-background-accent-2-hover);
190
- }
191
- [insAppearance][data-appearance='accent']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
192
- background: var(--ins-background-accent-2-pressed);
193
- }
194
- [insAppearance][data-appearance='accent'][data-state='active'] {
195
- background: var(--ins-background-accent-2-pressed);
196
- }
197
- [insAppearance][data-appearance='action'] {
198
- color: var(--ins-text-action);
199
- background: transparent;
200
- }
201
- @media (hover: hover) and (pointer: fine) {
202
- [insAppearance][data-appearance='action']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
203
- color: var(--ins-text-action-hover);
204
- }
205
- }
206
- [insAppearance][data-appearance='action'][data-state='hover'] {
207
- color: var(--ins-text-action-hover);
208
- }
209
- [insAppearance][data-appearance='action']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
210
- color: var(--ins-text-action-hover);
211
- }
212
- [insAppearance][data-appearance='action'][data-state='active'] {
213
- color: var(--ins-text-action-hover);
214
- }
215
- [insAppearance][data-appearance='action-destructive'] {
216
- color: var(--ins-text-negative);
217
- background: transparent;
218
- }
219
- @media (hover: hover) and (pointer: fine) {
220
- [insAppearance][data-appearance='action-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
221
- color: var(--ins-text-negative-hover);
222
- }
223
- }
224
- [insAppearance][data-appearance='action-destructive'][data-state='hover'] {
225
- color: var(--ins-text-negative-hover);
226
- }
227
- [insAppearance][data-appearance='action-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
228
- color: var(--ins-text-negative-hover);
229
- }
230
- [insAppearance][data-appearance='action-destructive'][data-state='active'] {
231
- color: var(--ins-text-negative-hover);
232
- }
233
- [insAppearance][data-appearance='action-grayscale'] {
234
- color: var(--ins-text-secondary);
235
- background: transparent;
236
- }
237
- @media (hover: hover) and (pointer: fine) {
238
- [insAppearance][data-appearance='action-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
239
- color: var(--ins-text-primary);
240
- }
241
- }
242
- [insAppearance][data-appearance='action-grayscale'][data-state='hover'] {
243
- color: var(--ins-text-primary);
244
- }
245
- [insAppearance][data-appearance='action-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
246
- color: var(--ins-text-primary);
247
- }
248
- [insAppearance][data-appearance='action-grayscale'][data-state='active'] {
249
- color: var(--ins-text-primary);
250
- }
251
- @media (hover: hover) and (pointer: fine) {
252
- [insAppearance][data-appearance='flat']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
253
- [insAppearance][data-appearance='flat-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
254
- [insAppearance][data-appearance='flat-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
255
- background: var(--ins-background-neutral-1-hover);
256
- }
257
- }
258
- [insAppearance][data-appearance='flat'][data-state='hover'],
259
- [insAppearance][data-appearance='flat-destructive'][data-state='hover'],
260
- [insAppearance][data-appearance='flat-grayscale'][data-state='hover'] {
261
- background: var(--ins-background-neutral-1-hover);
262
- }
263
- [insAppearance][data-appearance='flat']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
264
- [insAppearance][data-appearance='flat-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
265
- [insAppearance][data-appearance='flat-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
266
- background: var(--ins-background-neutral-1-pressed);
267
- }
268
- [insAppearance][data-appearance='flat'][data-state='active'],
269
- [insAppearance][data-appearance='flat-destructive'][data-state='active'],
270
- [insAppearance][data-appearance='flat-grayscale'][data-state='active'] {
271
- background: var(--ins-background-neutral-1-pressed);
272
- }
273
- [insAppearance][data-appearance='flat'] {
274
- color: var(--ins-text-action);
275
- }
276
- [insAppearance][data-appearance='flat-destructive'] {
277
- color: var(--ins-text-negative);
278
- }
279
- [insAppearance][data-appearance='flat-grayscale'] {
280
- color: var(--ins-text-primary);
281
- }
282
- [insAppearance][data-appearance='outline'],
283
- [insAppearance][data-appearance='outline-destructive'],
284
- [insAppearance][data-appearance='outline-grayscale'] {
285
- --t-bs: var(--ins-border-normal);
286
- color: var(--ins-text-action);
287
- box-shadow: inset 0 0 0 1px var(--t-bs);
288
- }
289
- [insAppearance][data-appearance='outline']:checked:not([data-mode]),
290
- [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]),
291
- [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]),
292
- [insAppearance][data-appearance='outline'][data-mode~='checked'],
293
- [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'],
294
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'] {
295
- --t-bs: var(--ins-background-accent-1);
296
- box-shadow: inset 0 0 0 2px var(--t-bs);
297
- }
298
- @media (hover: hover) and (pointer: fine) {
299
- [insAppearance][data-appearance='outline']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
300
- [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
301
- [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
302
- [insAppearance][data-appearance='outline'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
303
- [insAppearance][data-appearance='outline-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
304
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
305
- --t-bs: var(--ins-background-accent-1-hover);
306
- }
307
- }
308
- [insAppearance][data-appearance='outline']:checked:not([data-mode])[data-state='hover'],
309
- [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode])[data-state='hover'],
310
- [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode])[data-state='hover'],
311
- [insAppearance][data-appearance='outline'][data-mode~='checked'][data-state='hover'],
312
- [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-state='hover'],
313
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-state='hover'] {
314
- --t-bs: var(--ins-background-accent-1-hover);
315
- }
316
- [insAppearance][data-appearance='outline']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
317
- [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
318
- [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
319
- [insAppearance][data-appearance='outline'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
320
- [insAppearance][data-appearance='outline-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
321
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
322
- --t-bs: var(--ins-background-accent-1-pressed);
323
- }
324
- [insAppearance][data-appearance='outline']:checked:not([data-mode])[data-state='active'],
325
- [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode])[data-state='active'],
326
- [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode])[data-state='active'],
327
- [insAppearance][data-appearance='outline'][data-mode~='checked'][data-state='active'],
328
- [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-state='active'],
329
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-state='active'] {
330
- --t-bs: var(--ins-background-accent-1-pressed);
331
- }
332
- [insAppearance][data-appearance='outline']:invalid:not([data-mode]),
333
- [insAppearance][data-appearance='outline-destructive']:invalid:not([data-mode]),
334
- [insAppearance][data-appearance='outline-grayscale']:invalid:not([data-mode]),
335
- [insAppearance][data-appearance='outline'][data-mode~='invalid'],
336
- [insAppearance][data-appearance='outline-destructive'][data-mode~='invalid'],
337
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='invalid'] {
338
- box-shadow: inset 0 0 0 1px var(--ins-status-negative-pale-hover);
339
- }
340
- [insAppearance][data-appearance='outline']:checked:invalid:not([data-mode]),
341
- [insAppearance][data-appearance='outline-destructive']:checked:invalid:not([data-mode]),
342
- [insAppearance][data-appearance='outline-grayscale']:checked:invalid:not([data-mode]),
343
- [insAppearance][data-appearance='outline'][data-mode~='checked'][data-mode~='invalid'],
344
- [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-mode~='invalid'],
345
- [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-mode~='invalid'] {
346
- box-shadow: inset 0 0 0 2px var(--ins-status-negative);
347
- }
348
- @media (hover: hover) and (pointer: fine) {
349
- [insAppearance][data-appearance='outline']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
350
- [insAppearance][data-appearance='outline-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
351
- [insAppearance][data-appearance='outline-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
352
- background: var(--ins-background-neutral-1);
353
- cursor: pointer;
354
- --t-bs: var(--ins-border-hover);
355
- }
356
- }
357
- [insAppearance][data-appearance='outline'][data-state='hover'],
358
- [insAppearance][data-appearance='outline-destructive'][data-state='hover'],
359
- [insAppearance][data-appearance='outline-grayscale'][data-state='hover'] {
360
- background: var(--ins-background-neutral-1);
361
- cursor: pointer;
362
- --t-bs: var(--ins-border-hover);
363
- }
364
- [insAppearance][data-appearance='outline']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
365
- [insAppearance][data-appearance='outline-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
366
- [insAppearance][data-appearance='outline-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
367
- background: var(--ins-background-neutral-1);
368
- --t-bs: var(--ins-border-hover);
369
- }
370
- [insAppearance][data-appearance='outline'][data-state='active'],
371
- [insAppearance][data-appearance='outline-destructive'][data-state='active'],
372
- [insAppearance][data-appearance='outline-grayscale'][data-state='active'] {
373
- background: var(--ins-background-neutral-1);
374
- --t-bs: var(--ins-border-hover);
375
- }
376
- [insAppearance][data-appearance='outline-grayscale'] {
377
- color: var(--ins-text-primary);
378
- }
379
- [insAppearance][data-appearance='outline-destructive'] {
380
- color: var(--ins-text-negative);
381
- }
382
- [insAppearance][data-appearance='primary'] {
383
- --t-bg: var(--ins-background-accent-1);
384
- background: var(--t-bg);
385
- color: var(--ins-text-primary-on-accent);
386
- }
387
- [insAppearance][data-appearance='primary']:invalid:not([data-mode]),
388
- [insAppearance][data-appearance='primary'][data-mode~='invalid'] {
389
- background: var(--ins-status-negative);
390
- }
391
- @media (hover: hover) and (pointer: fine) {
392
- [insAppearance][data-appearance='primary']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
393
- --t-bg: var(--ins-background-accent-1-hover);
394
- }
395
- }
396
- [insAppearance][data-appearance='primary'][data-state='hover'] {
397
- --t-bg: var(--ins-background-accent-1-hover);
398
- }
399
- [insAppearance][data-appearance='primary']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
400
- --t-bg: var(--ins-background-accent-1-pressed);
401
- }
402
- [insAppearance][data-appearance='primary'][data-state='active'] {
403
- --t-bg: var(--ins-background-accent-1-pressed);
404
- }
405
- [insAppearance][data-appearance='primary-destructive'] {
406
- color: #fff;
407
- background: var(--ins-status-negative);
408
- }
409
- @media (hover: hover) and (pointer: fine) {
410
- [insAppearance][data-appearance='primary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
411
- filter: saturate(1) brightness(1.3);
412
- }
413
- }
414
- [insAppearance][data-appearance='primary-destructive'][data-state='hover'] {
415
- filter: saturate(1) brightness(1.3);
416
- }
417
- [insAppearance][data-appearance='primary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
418
- filter: saturate(0.8) brightness(1);
419
- }
420
- [insAppearance][data-appearance='primary-destructive'][data-state='active'] {
421
- filter: saturate(0.8) brightness(1);
422
- }
423
- [insAppearance][data-appearance='primary-grayscale'] {
424
- --ins-border-focus: #979797;
425
- background: var(--ins-background-accent-opposite);
426
- color: var(--ins-background-base);
427
- }
428
- @media (hover: hover) and (pointer: fine) {
429
- [insAppearance][data-appearance='primary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
430
- background: var(--ins-background-accent-opposite-hover);
431
- }
432
- }
433
- [insAppearance][data-appearance='primary-grayscale'][data-state='hover'] {
434
- background: var(--ins-background-accent-opposite-hover);
435
- }
436
- [insAppearance][data-appearance='primary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
437
- background: var(--ins-background-accent-opposite-pressed);
438
- }
439
- [insAppearance][data-appearance='primary-grayscale'][data-state='active'] {
440
- background: var(--ins-background-accent-opposite-pressed);
441
- }
442
- [insAppearance][data-appearance='secondary'],
443
- [insAppearance][data-appearance='secondary-destructive'],
444
- [insAppearance][data-appearance='secondary-grayscale'] {
445
- background: var(--ins-background-neutral-1);
446
- color: var(--ins-text-action);
447
- }
448
- @media (hover: hover) and (pointer: fine) {
449
- [insAppearance][data-appearance='secondary']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
450
- [insAppearance][data-appearance='secondary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
451
- [insAppearance][data-appearance='secondary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
452
- background: var(--ins-background-neutral-1-hover);
453
- }
454
- }
455
- [insAppearance][data-appearance='secondary'][data-state='hover'],
456
- [insAppearance][data-appearance='secondary-destructive'][data-state='hover'],
457
- [insAppearance][data-appearance='secondary-grayscale'][data-state='hover'] {
458
- background: var(--ins-background-neutral-1-hover);
459
- }
460
- [insAppearance][data-appearance='secondary']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
461
- [insAppearance][data-appearance='secondary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
462
- [insAppearance][data-appearance='secondary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
463
- background: var(--ins-background-neutral-1-pressed);
464
- }
465
- [insAppearance][data-appearance='secondary'][data-state='active'],
466
- [insAppearance][data-appearance='secondary-destructive'][data-state='active'],
467
- [insAppearance][data-appearance='secondary-grayscale'][data-state='active'] {
468
- background: var(--ins-background-neutral-1-pressed);
469
- }
470
- [insAppearance][data-appearance='secondary']:checked:not([data-mode]),
471
- [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]),
472
- [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]),
473
- [insAppearance][data-appearance='secondary'][data-mode~='checked'],
474
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'],
475
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'] {
476
- background: var(--ins-background-accent-1);
477
- color: var(--ins-text-primary-on-accent);
478
- }
479
- @media (hover: hover) and (pointer: fine) {
480
- [insAppearance][data-appearance='secondary']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
481
- [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
482
- [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
483
- [insAppearance][data-appearance='secondary'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
484
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
485
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
486
- background: var(--ins-background-accent-1-hover);
487
- }
488
- }
489
- [insAppearance][data-appearance='secondary']:checked:not([data-mode])[data-state='hover'],
490
- [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode])[data-state='hover'],
491
- [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode])[data-state='hover'],
492
- [insAppearance][data-appearance='secondary'][data-mode~='checked'][data-state='hover'],
493
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'][data-state='hover'],
494
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'][data-state='hover'] {
495
- background: var(--ins-background-accent-1-hover);
496
- }
497
- [insAppearance][data-appearance='secondary']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
498
- [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
499
- [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
500
- [insAppearance][data-appearance='secondary'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
501
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
502
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
503
- background: var(--ins-background-accent-1-pressed);
504
- }
505
- [insAppearance][data-appearance='secondary']:checked:not([data-mode])[data-state='active'],
506
- [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode])[data-state='active'],
507
- [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode])[data-state='active'],
508
- [insAppearance][data-appearance='secondary'][data-mode~='checked'][data-state='active'],
509
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'][data-state='active'],
510
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'][data-state='active'] {
511
- background: var(--ins-background-accent-1-pressed);
512
- }
513
- [insAppearance][data-appearance='secondary']:invalid:not([data-mode]),
514
- [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]),
515
- [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]),
516
- [insAppearance][data-appearance='secondary'][data-mode~='invalid'],
517
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'],
518
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'] {
519
- color: var(--ins-text-negative);
520
- background: var(--ins-status-negative-pale);
521
- }
522
- @media (hover: hover) and (pointer: fine) {
523
- [insAppearance][data-appearance='secondary']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
524
- [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
525
- [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
526
- [insAppearance][data-appearance='secondary'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
527
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
528
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
529
- color: var(--ins-text-negative-hover);
530
- background: var(--ins-status-negative-pale-hover);
531
- }
532
- }
533
- [insAppearance][data-appearance='secondary']:invalid:not([data-mode])[data-state='hover'],
534
- [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode])[data-state='hover'],
535
- [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode])[data-state='hover'],
536
- [insAppearance][data-appearance='secondary'][data-mode~='invalid'][data-state='hover'],
537
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'][data-state='hover'],
538
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'][data-state='hover'] {
539
- color: var(--ins-text-negative-hover);
540
- background: var(--ins-status-negative-pale-hover);
541
- }
542
- [insAppearance][data-appearance='secondary']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
543
- [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
544
- [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
545
- [insAppearance][data-appearance='secondary'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
546
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
547
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
548
- color: var(--ins-text-negative-hover);
549
- background: var(--ins-status-negative-pale-hover);
550
- }
551
- [insAppearance][data-appearance='secondary']:invalid:not([data-mode])[data-state='active'],
552
- [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode])[data-state='active'],
553
- [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode])[data-state='active'],
554
- [insAppearance][data-appearance='secondary'][data-mode~='invalid'][data-state='active'],
555
- [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'][data-state='active'],
556
- [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'][data-state='active'] {
557
- color: var(--ins-text-negative-hover);
558
- background: var(--ins-status-negative-pale-hover);
559
- }
560
- [insAppearance][data-appearance='secondary-destructive'] {
561
- color: var(--ins-text-negative);
562
- }
563
- [insAppearance][data-appearance='secondary-grayscale'] {
564
- color: var(--ins-text-primary);
565
- }
566
- [insAppearance][data-appearance='negative'],
567
- [insAppearance][data-appearance='positive'],
568
- [insAppearance][data-appearance='warning'],
569
- [insAppearance][data-appearance='info'],
570
- [insAppearance][data-appearance='neutral'] {
571
- background: var(--t-bg);
572
- color: var(--ins-text-primary);
573
- }
574
- [insAppearance][data-appearance='negative']:checked:not([data-mode]),
575
- [insAppearance][data-appearance='positive']:checked:not([data-mode]),
576
- [insAppearance][data-appearance='warning']:checked:not([data-mode]),
577
- [insAppearance][data-appearance='info']:checked:not([data-mode]),
578
- [insAppearance][data-appearance='neutral']:checked:not([data-mode]),
579
- [insAppearance][data-appearance='negative'][data-mode~='checked'],
580
- [insAppearance][data-appearance='positive'][data-mode~='checked'],
581
- [insAppearance][data-appearance='warning'][data-mode~='checked'],
582
- [insAppearance][data-appearance='info'][data-mode~='checked'],
583
- [insAppearance][data-appearance='neutral'][data-mode~='checked'] {
584
- color: #fff;
585
- }
586
- [insAppearance][data-appearance='negative'] {
587
- --t-bg: var(--ins-status-negative-pale);
588
- }
589
- [insAppearance][data-appearance='negative']::before,
590
- [insAppearance][data-appearance='negative']::after {
591
- color: var(--ins-status-negative);
592
- }
593
- @media (hover: hover) and (pointer: fine) {
594
- [insAppearance][data-appearance='negative']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
595
- --t-bg: var(--ins-status-negative-pale-hover);
596
- }
597
- }
598
- [insAppearance][data-appearance='negative'][data-state='hover'] {
599
- --t-bg: var(--ins-status-negative-pale-hover);
600
- }
601
- [insAppearance][data-appearance='negative']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
602
- --t-bg: var(--ins-status-negative-pale-hover);
603
- }
604
- [insAppearance][data-appearance='negative'][data-state='active'] {
605
- --t-bg: var(--ins-status-negative-pale-hover);
606
- }
607
- [insAppearance][data-appearance='negative']:checked:not([data-mode]),
608
- [insAppearance][data-appearance='negative'][data-mode~='checked'] {
609
- background: var(--ins-status-negative);
610
- }
611
- [insAppearance][data-appearance='positive'] {
612
- --t-bg: var(--ins-status-positive-pale);
613
- }
614
- [insAppearance][data-appearance='positive']::before,
615
- [insAppearance][data-appearance='positive']::after {
616
- color: var(--ins-status-positive);
617
- }
618
- @media (hover: hover) and (pointer: fine) {
619
- [insAppearance][data-appearance='positive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
620
- --t-bg: var(--ins-status-positive-pale-hover);
621
- }
622
- }
623
- [insAppearance][data-appearance='positive'][data-state='hover'] {
624
- --t-bg: var(--ins-status-positive-pale-hover);
625
- }
626
- [insAppearance][data-appearance='positive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
627
- --t-bg: var(--ins-status-positive-pale-hover);
628
- }
629
- [insAppearance][data-appearance='positive'][data-state='active'] {
630
- --t-bg: var(--ins-status-positive-pale-hover);
631
- }
632
- [insAppearance][data-appearance='positive']:checked:not([data-mode]),
633
- [insAppearance][data-appearance='positive'][data-mode~='checked'] {
634
- background: var(--ins-status-positive);
635
- }
636
- [insAppearance][data-appearance='warning'] {
637
- --t-bg: var(--ins-status-warning-pale);
638
- }
639
- [insAppearance][data-appearance='warning']::before,
640
- [insAppearance][data-appearance='warning']::after {
641
- color: var(--ins-status-warning);
642
- }
643
- @media (hover: hover) and (pointer: fine) {
644
- [insAppearance][data-appearance='warning']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
645
- --t-bg: var(--ins-status-warning-pale-hover);
646
- }
647
- }
648
- [insAppearance][data-appearance='warning'][data-state='hover'] {
649
- --t-bg: var(--ins-status-warning-pale-hover);
650
- }
651
- [insAppearance][data-appearance='warning']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
652
- --t-bg: var(--ins-status-warning-pale-hover);
653
- }
654
- [insAppearance][data-appearance='warning'][data-state='active'] {
655
- --t-bg: var(--ins-status-warning-pale-hover);
656
- }
657
- [insAppearance][data-appearance='warning']:checked:not([data-mode]),
658
- [insAppearance][data-appearance='warning'][data-mode~='checked'] {
659
- background: var(--ins-status-warning);
660
- }
661
- [insAppearance][data-appearance='info'] {
662
- --t-bg: var(--ins-status-info-pale);
663
- }
664
- [insAppearance][data-appearance='info']::before,
665
- [insAppearance][data-appearance='info']::after {
666
- color: var(--ins-status-info);
667
- }
668
- @media (hover: hover) and (pointer: fine) {
669
- [insAppearance][data-appearance='info']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
670
- --t-bg: var(--ins-status-info-pale-hover);
671
- }
672
- }
673
- [insAppearance][data-appearance='info'][data-state='hover'] {
674
- --t-bg: var(--ins-status-info-pale-hover);
675
- }
676
- [insAppearance][data-appearance='info']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
677
- --t-bg: var(--ins-status-info-pale-hover);
678
- }
679
- [insAppearance][data-appearance='info'][data-state='active'] {
680
- --t-bg: var(--ins-status-info-pale-hover);
681
- }
682
- [insAppearance][data-appearance='info']:checked:not([data-mode]),
683
- [insAppearance][data-appearance='info'][data-mode~='checked'] {
684
- background: var(--ins-status-info);
685
- }
686
- [insAppearance][data-appearance='neutral'] {
687
- --t-bg: var(--ins-background-neutral-1);
688
- }
689
- [insAppearance][data-appearance='neutral']::before,
690
- [insAppearance][data-appearance='neutral']::after {
691
- color: var(--ins-status-neutral);
692
- }
693
- @media (hover: hover) and (pointer: fine) {
694
- [insAppearance][data-appearance='neutral']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
695
- --t-bg: var(--ins-background-neutral-1-hover);
696
- }
697
- }
698
- [insAppearance][data-appearance='neutral'][data-state='hover'] {
699
- --t-bg: var(--ins-background-neutral-1-hover);
700
- }
701
- [insAppearance][data-appearance='neutral']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
702
- --t-bg: var(--ins-background-neutral-1-pressed);
703
- }
704
- [insAppearance][data-appearance='neutral'][data-state='active'] {
705
- --t-bg: var(--ins-background-neutral-1-pressed);
706
- }
707
- [insAppearance][data-appearance='neutral']:checked:not([data-mode]),
708
- [insAppearance][data-appearance='neutral'][data-mode~='checked'] {
709
- background: var(--ins-status-neutral);
710
- }
711
- [insAppearance][data-appearance='glass'] {
712
- background: rgba(0, 0, 0, 0.4);
713
- color: #fff;
714
- backdrop-filter: blur(1rem);
715
- --ins-border-focus: rgba(255, 255, 255, 0.64);
716
- }
717
- @media (hover: hover) and (pointer: fine) {
718
- [insAppearance][data-appearance='glass']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
719
- background: rgba(0, 0, 0, 0.48);
720
- }
721
- }
722
- [insAppearance][data-appearance='glass'][data-state='hover'] {
723
- background: rgba(0, 0, 0, 0.48);
724
- }
725
- [insAppearance][data-appearance='glass']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
726
- background: rgba(0, 0, 0, 0.6);
727
- }
728
- [insAppearance][data-appearance='glass'][data-state='active'] {
729
- background: rgba(0, 0, 0, 0.6);
730
- }
731
- /*
732
- Every max-width of breakpoint is equal:
733
- next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
734
- */
735
- [insAppearance][data-appearance='textfield'] {
736
- transition-property: box-shadow, background, outline-color, border-color;
737
- transition-duration: var(--ins-duration, 300ms);
738
- transition-timing-function: ease-in-out;
739
- --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
740
- background-color: var(--ins-background-base);
741
- color: var(--ins-text-primary);
742
- box-shadow: var(--t-shadow);
743
- outline: 1px solid var(--ins-border-normal);
744
- outline-offset: -1px;
745
- border: none;
746
- }
747
- @media (hover: hover) and (pointer: fine) {
748
- [insAppearance][data-appearance='textfield']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
749
- --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
750
- }
751
- }
752
- [insAppearance][data-appearance='textfield'][data-state='hover'] {
753
- --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
754
- }
755
- [insAppearance][data-appearance='textfield']:focus-visible:not([data-focus='false']) {
756
- box-shadow: none;
757
- outline: 0.125rem solid var(--ins-background-accent-1);
758
- outline-offset: -0.125rem;
759
- }
760
- [insAppearance][data-appearance='textfield'][data-focus='true'] {
761
- box-shadow: none;
762
- outline: 0.125rem solid var(--ins-background-accent-1);
763
- outline-offset: -0.125rem;
764
- }
765
- [insAppearance][data-appearance='textfield']:disabled:not([data-state]),
766
- [insAppearance][data-appearance='textfield'][data-state='disabled'] {
767
- box-shadow: none;
768
- }
769
- [insAppearance][data-appearance='textfield'][data-mode~='invalid'][data-mode~='invalid'],
770
- [insAppearance][data-appearance='textfield']:invalid:not([data-mode]) {
771
- outline-color: var(--ins-status-negative);
772
- }
773
- [insAppearance][data-appearance='textfield'][data-mode~='readonly'],
774
- input[insAppearance][data-appearance='textfield']:read-only:not([data-mode]) {
775
- background: transparent !important;
776
- box-shadow: none !important;
777
- outline-color: var(--ins-border-normal) !important;
778
- }
779
- [insAppearance][data-appearance='textfield']:-webkit-autofill {
780
- -webkit-text-fill-color: var(--ins-text-primary) !important;
781
- box-shadow: 0 0 0 100rem var(--ins-service-autofill-background) inset !important;
782
- transition: background-color 600000s 0s;
783
- }
784
- body {
785
- text-rendering: optimizeLegibility;
786
- -webkit-font-smoothing: antialiased;
787
- -moz-osx-font-smoothing: grayscale;
788
- }
789
- ul,
790
- ol {
791
- list-style: none;
792
- padding: 0;
793
- margin: 0;
794
- }
795
- table {
796
- border-collapse: collapse;
797
- border-spacing: 0;
798
- }
799
- hr {
800
- margin: 0;
801
- block-size: 1px;
802
- border: none;
803
- background: var(--ins-border-normal);
804
- }
805
- iframe {
806
- border: none;
807
- }
808
- ::-ms-clear {
809
- display: none;
810
- }
811
- ::-ms-reveal {
812
- display: none;
813
- }
814
- .ins-list {
815
- font: var(--ins-font-text-m);
816
- line-height: 1.5rem;
817
- list-style-type: none;
818
- color: var(--ins-text-primary);
819
- }
820
- .ins-list_large {
821
- font: var(--ins-font-text-l);
822
- line-height: 1.75rem;
823
- }
824
- .ins-list_small,
825
- .ins-list_extra-small {
826
- font: var(--ins-font-text-s);
827
- line-height: 1.25rem;
828
- }
829
- .ins-list_nested {
830
- margin: 0.75rem 0 0.75rem 1.25rem;
831
- color: var(--ins-text-secondary);
832
- }
833
- .ins-list_large .ins-list_nested {
834
- margin-inline-start: 0.75rem;
835
- }
836
- .ins-list_small .ins-list_nested {
837
- margin-block-start: 0.5rem;
838
- margin-block-end: 0.5rem;
839
- }
840
- .ins-list_ordered {
841
- counter-reset: counter;
842
- }
843
- .ins-list__item {
844
- position: relative;
845
- padding-inline-start: 1.5rem;
846
- overflow-wrap: break-word;
847
- margin-block-start: 0.75rem;
848
- }
849
- .ins-list__item:first-child {
850
- margin-block-start: 0;
851
- }
852
- .ins-list__item::before {
853
- content: '';
854
- position: absolute;
855
- left: 0;
856
- top: 0.5rem;
857
- inline-size: 0.5rem;
858
- block-size: 0.5rem;
859
- border-radius: 100%;
860
- background-color: var(--ins-background-accent-1);
861
- }
862
- .ins-list_large > .ins-list__item::before {
863
- top: 0.625rem;
864
- }
865
- .ins-list_small > .ins-list__item::before {
866
- top: 0.375rem;
867
- }
868
- .ins-list_extra-small > .ins-list__item {
869
- margin-block-start: 0.5rem;
870
- }
871
- .ins-list_linear .ins-list__item {
872
- padding-inline-start: 1.75rem;
873
- }
874
- .ins-list_linear .ins-list__item::before {
875
- content: '\2014';
876
- left: 0;
877
- top: auto;
878
- inline-size: auto;
879
- block-size: auto;
880
- background-color: transparent;
881
- }
882
- .ins-list_ordered .ins-list__item {
883
- padding-inline-start: 1.25rem;
884
- }
885
- .ins-list_ordered .ins-list__item::before {
886
- content: counter(counter) '.';
887
- left: 0;
888
- top: auto;
889
- counter-increment: counter;
890
- inline-size: auto;
891
- block-size: auto;
892
- color: var(--ins-text-tertiary);
893
- background-color: transparent;
894
- }
895
- .ins-list_triangle > .ins-list__item {
896
- padding-inline-start: 1.75rem;
897
- }
898
- .ins-list_triangle > .ins-list__item::before {
899
- content: '\25E4';
900
- left: 0;
901
- top: 1px;
902
- inline-size: auto;
903
- block-size: auto;
904
- background-color: transparent;
905
- color: var(--ins-text-tertiary);
906
- font-size: 0.75rem;
907
- }
908
- .ins-list__item-title {
909
- font: var(--ins-font-heading-5);
910
- margin: 0;
911
- }
912
- .ins-list_small .ins-list__item-title {
913
- line-height: 1.25rem;
914
- font-weight: bold;
915
- }
916
- .ins-list__description {
917
- margin: 0.5rem 0 0;
918
- color: var(--ins-text-secondary);
919
- }
920
- .ins-list_small .ins-list__description {
921
- margin-block-start: 0.25rem;
922
- }
923
- .ins-list_large .ins-list__description {
924
- line-height: 1.75rem;
925
- margin-block-start: 0.75rem;
926
- }
927
- .ins-table {
928
- inline-size: 100%;
929
- }
930
- .ins-table_layout_fixed {
931
- table-layout: fixed;
932
- }
933
- .ins-table__tr {
934
- transition-property: background;
935
- transition-duration: var(--ins-duration, 300ms);
936
- transition-timing-function: ease-in-out;
937
- outline: none;
938
- }
939
- .ins-table__tr:not(.ins-table__tr_hover_disabled):hover {
940
- background: var(--ins-background-base-alt);
941
- }
942
- .ins-table__tr:not(.ins-table__tr_border_none) {
943
- border-block-end: 1px solid var(--ins-border-normal);
944
- }
945
- .ins-table__tr_border_top {
946
- border-block-start: 1px solid var(--ins-border-normal);
947
- }
948
- .ins-table__tr_cursor_pointer {
949
- cursor: pointer;
950
- }
951
- .ins-table__th {
952
- white-space: nowrap;
953
- overflow: hidden;
954
- text-overflow: ellipsis;
955
- font: var(--ins-font-text-s);
956
- padding: 0.5rem 1rem;
957
- vertical-align: middle;
958
- block-size: 2.5rem;
959
- color: var(--ins-text-secondary);
960
- background: inherit;
961
- }
962
- .ins-table__th_font-size_l,
963
- .ins-table_font-size_l .ins-table__th {
964
- font: var(--ins-font-text-m);
965
- }
966
- .ins-table__td {
967
- font: var(--ins-font-text-m);
968
- padding: 1rem 1rem 0.875rem;
969
- vertical-align: top;
970
- overflow-wrap: break-word;
971
- block-size: 3.4375rem;
972
- color: var(--ins-text-primary);
973
- background: inherit;
974
- }
975
- .ins-table__td_size_l,
976
- .ins-table_size_l .ins-table__td {
977
- block-size: 4.9375rem;
978
- }
979
- .ins-table__td_font-size_l,
980
- .ins-table_font-size_l .ins-table__td {
981
- font: var(--ins-font-text-l);
982
- }
983
- .ins-table__td_font-size_s,
984
- .ins-table_font-size_s .ins-table__td {
985
- font: var(--ins-font-text-s);
986
- }
987
- .ins-table__td_align_center {
988
- vertical-align: middle;
989
- }
990
- .ins-table__td,
991
- .ins-table__th {
992
- box-sizing: border-box;
993
- text-align: start;
994
- }
995
- .ins-table_size_l .ins-table__td::before,
996
- .ins-table_size_l .ins-table__th::before {
997
- inline-size: 1rem;
998
- border-start-start-radius: 1rem;
999
- border-end-start-radius: 1rem;
1000
- }
1001
- .ins-table__td_first::before,
1002
- .ins-table__th_first::before,
1003
- .ins-table__td_last::before,
1004
- .ins-table__th_last::before {
1005
- content: '';
1006
- position: absolute;
1007
- top: 0;
1008
- inline-size: 0.75rem;
1009
- block-size: 100%;
1010
- background: inherit;
1011
- border-start-start-radius: 0.75rem;
1012
- border-end-start-radius: 0.75rem;
1013
- }
1014
- .ins-table__td_first,
1015
- .ins-table__th_first {
1016
- position: relative;
1017
- padding-left: 0;
1018
- overflow: visible;
1019
- }
1020
- .ins-table__td_first::before,
1021
- .ins-table__th_first::before {
1022
- right: 100%;
1023
- }
1024
- .ins-table__td_last,
1025
- .ins-table__th_last {
1026
- position: relative;
1027
- padding-right: 0;
1028
- overflow: visible;
1029
- }
1030
- .ins-table__td_last::before,
1031
- .ins-table__th_last::before {
1032
- left: 100%;
1033
- transform: scaleX(-1);
1034
- }
1035
- .ins-table__td_text_center,
1036
- .ins-table__th_text_center {
1037
- text-align: center;
1038
- }
1039
- .ins-table__td_text_right,
1040
- .ins-table__th_text_right {
1041
- text-align: end;
1042
- }
1043
- .ins-table__td_text_overflow,
1044
- .ins-table__th_text_overflow {
1045
- white-space: nowrap;
1046
- overflow: hidden;
1047
- text-overflow: ellipsis;
1048
- }
1049
- .ins-table__subtext {
1050
- font: var(--ins-font-text-s);
1051
- margin: 0.25rem 0 0;
1052
- color: var(--ins-text-tertiary);
1053
- }
1054
- .ins-table__sort {
1055
- appearance: none;
1056
- padding: 0;
1057
- border: 0;
1058
- background: none;
1059
- font: inherit;
1060
- line-height: inherit;
1061
- text-decoration: none;
1062
- transition-property: color;
1063
- transition-duration: var(--ins-duration, 300ms);
1064
- transition-timing-function: ease-in-out;
1065
- position: relative;
1066
- display: inline-flex;
1067
- align-items: center;
1068
- outline: none;
1069
- cursor: pointer;
1070
- }
1071
- .ins-table__sort:hover {
1072
- color: var(--ins-text-primary);
1073
- }
1074
- .ins-table__sort_active {
1075
- color: var(--ins-text-action);
1076
- }
1077
- .ins-table__sort_active:hover {
1078
- color: var(--ins-text-action-hover);
1079
- }
1080
- .ins-table__sort-icon {
1081
- position: absolute;
1082
- top: 50%;
1083
- transform: translate(0, -50%);
1084
- left: 100%;
1085
- margin-left: 0.125rem;
1086
- inline-size: 1rem;
1087
- block-size: 1rem;
1088
- flex-shrink: 0;
1089
- opacity: 0;
1090
- }
1091
- .ins-table__sort_active .ins-table__sort-icon,
1092
- .ins-table__sort:hover .ins-table__sort-icon {
1093
- transition-property: transform;
1094
- transition-duration: var(--ins-duration, 300ms);
1095
- transition-timing-function: ease-in-out;
1096
- opacity: 1;
1097
- }
1098
- .ins-table__sort_active.ins-table__sort_up .ins-table__sort-icon {
1099
- transform: rotate(180deg) translateY(50%);
1100
- }
1101
- .ins-required::after {
1102
- content: '*';
1103
- }
1104
- .ins-required_float::after {
1105
- position: absolute;
1106
- }
1107
- .ins-required_spacing::after {
1108
- content: '\0000a0*';
1109
- }
1
+ :root {
2
+ --ins-font-heading: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
3
+ --ins-font-text: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
4
+ --ins-font-code: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
5
+ --ins-font-heading-1: 400 2.75rem / 3.5rem var(--ins-font-heading);
6
+ --ins-font-heading-2: 400 2.25rem / 3rem var(--ins-font-heading);
7
+ --ins-font-heading-3: 400 1.75rem / 2.5rem var(--ins-font-heading);
8
+ --ins-font-heading-4: 400 1.5rem / 2rem var(--ins-font-heading);
9
+ --ins-font-heading-5: 400 1.25rem / 1.75rem var(--ins-font-heading);
10
+ --ins-font-heading-6: 400 1.125rem / 1.5rem var(--ins-font-heading);
11
+ --ins-font-text-xl: normal 1.5rem / 1.75rem var(--ins-font-text);
12
+ --ins-font-text-l: normal 1.25rem / 1.75rem var(--ins-font-text);
13
+ --ins-font-text-m: normal 1rem / 1.5rem var(--ins-font-text);
14
+ --ins-font-text-s: normal 0.875rem / 1.25rem var(--ins-font-text);
15
+ --ins-font-text-xs: normal 0.7875rem / 1rem var(--ins-font-text);
16
+ --ins-radius-xs: 0.25rem;
17
+ --ins-radius-s: 0.5rem;
18
+ --ins-radius-m: 0.725rem;
19
+ --ins-radius-l: 1rem;
20
+ --ins-radius-xl: 1.5rem;
21
+ --ins-height-xs: 1.5rem;
22
+ --ins-height-s: 2rem;
23
+ --ins-height-m: 2.5rem;
24
+ --ins-height-l: 3.25rem;
25
+ --ins-padding-xs: 0.25rem;
26
+ --ins-padding-s: 0.625rem;
27
+ --ins-padding-m: 1rem;
28
+ --ins-padding-l: 1.5rem;
29
+ --ins-padding-xl: 2rem;
30
+ --ins-duration: 0.3s;
31
+ --ins-disabled-opacity: 0.56;
32
+ }
33
+ @media screen {
34
+ [insTheme='dark'] {
35
+ color-scheme: dark;
36
+ --ins-background-base: #222;
37
+ --ins-background-base-alt: #333;
38
+ --ins-background-neutral-1: rgba(255, 255, 255, 0.08);
39
+ --ins-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
40
+ --ins-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
41
+ --ins-background-accent-opposite: #fff;
42
+ --ins-background-accent-opposite-hover: #f6f6f6;
43
+ --ins-background-accent-opposite-pressed: #ededed;
44
+ --ins-background-elevation-1: #292929;
45
+ --ins-background-elevation-2: #333;
46
+ --ins-service-autofill-background: #554a2a;
47
+ --ins-border-normal: rgba(255, 255, 255, 0.14);
48
+ --ins-border-hover: rgba(255, 255, 255, 0.6);
49
+ --ins-border-focus: rgba(255, 255, 255, 0.64);
50
+ --ins-status-negative: #ff8c67;
51
+ --ins-status-negative-pale: rgba(244, 87, 37, 0.32);
52
+ --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
53
+ --ins-status-positive: #4ac99b;
54
+ --ins-status-positive-pale: rgba(74, 201, 155, 0.32);
55
+ --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
56
+ --ins-status-warning: #ffc700;
57
+ --ins-status-warning-pale: rgba(255, 199, 0, 0.32);
58
+ --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
59
+ --ins-status-info: #70b6f6;
60
+ --ins-status-info-pale: rgba(112, 182, 246, 0.32);
61
+ --ins-status-info-pale-hover: rgba(112, 182, 246, 0.4);
62
+ --ins-status-neutral: #959ba4;
63
+ --ins-text-primary: rgba(255, 255, 255, 0.95);
64
+ --ins-text-secondary: rgba(255, 255, 255, 0.72);
65
+ --ins-text-tertiary: rgba(255, 255, 255, 0.6);
66
+ --ins-text-action: #6788ff;
67
+ --ins-text-action-hover: #526ed3;
68
+ --ins-text-positive: #44c596;
69
+ --ins-text-positive-hover: #3aa981;
70
+ --ins-text-negative: #ff8c67;
71
+ --ins-text-negative-hover: #bb593a;
72
+ }
73
+ :root {
74
+ color-scheme: light;
75
+ --ins-background-base: #fafafa;
76
+ --ins-background-base-alt: #f6f6f6;
77
+ --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
78
+ --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
79
+ --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
80
+ --ins-background-accent-1: #526ed3;
81
+ --ins-background-accent-1-hover: #6c86e2;
82
+ --ins-background-accent-1-pressed: #314692;
83
+ --ins-background-accent-2: #ff7043;
84
+ --ins-background-accent-2-hover: #ff9a94;
85
+ --ins-background-accent-2-pressed: #e7716a;
86
+ --ins-background-accent-opposite: #000;
87
+ --ins-background-accent-opposite-hover: #333;
88
+ --ins-background-accent-opposite-pressed: #808080;
89
+ --ins-background-elevation-1: #fafafa;
90
+ --ins-background-elevation-2: #f3f3f3;
91
+ --ins-service-autofill-background: #fff5c0;
92
+ --ins-service-backdrop: rgba(0, 0, 0, 0.45);
93
+ --ins-border-normal: rgba(0, 0, 0, 0.1);
94
+ --ins-border-hover: rgba(0, 0, 0, 0.25);
95
+ --ins-border-focus: rgba(51, 51, 51, 0.64);
96
+ --ins-status-negative: #f45725;
97
+ --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
98
+ --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
99
+ --ins-status-positive: #4ac99b;
100
+ --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
101
+ --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
102
+ --ins-status-warning: #ffc700;
103
+ --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
104
+ --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
105
+ --ins-status-info: #70b6f6;
106
+ --ins-status-info-pale: rgba(112, 182, 246, 0.12);
107
+ --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
108
+ --ins-status-neutral: #79818c;
109
+ --ins-text-primary: #1b1f3b;
110
+ --ins-text-secondary: rgba(27, 31, 59, 0.65);
111
+ --ins-text-tertiary: rgba(27, 31, 59, 0.4);
112
+ --ins-text-primary-on-accent: #fff;
113
+ --ins-text-action: #4c66c3;
114
+ --ins-text-action-hover: #6c86e2;
115
+ --ins-text-positive: #3aa981;
116
+ --ins-text-positive-hover: #7ac5aa;
117
+ --ins-text-negative: #dd4c1e;
118
+ --ins-text-negative-hover: #e38163;
119
+ --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
120
+ --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
121
+ --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
122
+ --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
123
+ }
124
+ }
125
+ @media print {
126
+ :root,
127
+ [insTheme] {
128
+ color-scheme: light;
129
+ --ins-background-base: #fafafa;
130
+ --ins-background-base-alt: #f6f6f6;
131
+ --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
132
+ --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
133
+ --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
134
+ --ins-background-accent-1: #526ed3;
135
+ --ins-background-accent-1-hover: #6c86e2;
136
+ --ins-background-accent-1-pressed: #314692;
137
+ --ins-background-accent-2: #ff7043;
138
+ --ins-background-accent-2-hover: #ff9a94;
139
+ --ins-background-accent-2-pressed: #e7716a;
140
+ --ins-background-accent-opposite: #000;
141
+ --ins-background-accent-opposite-hover: #333;
142
+ --ins-background-accent-opposite-pressed: #808080;
143
+ --ins-background-elevation-1: #fafafa;
144
+ --ins-background-elevation-2: #f3f3f3;
145
+ --ins-service-autofill-background: #fff5c0;
146
+ --ins-service-backdrop: rgba(0, 0, 0, 0.45);
147
+ --ins-border-normal: rgba(0, 0, 0, 0.1);
148
+ --ins-border-hover: rgba(0, 0, 0, 0.25);
149
+ --ins-border-focus: rgba(51, 51, 51, 0.64);
150
+ --ins-status-negative: #f45725;
151
+ --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
152
+ --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
153
+ --ins-status-positive: #4ac99b;
154
+ --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
155
+ --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
156
+ --ins-status-warning: #ffc700;
157
+ --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
158
+ --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
159
+ --ins-status-info: #70b6f6;
160
+ --ins-status-info-pale: rgba(112, 182, 246, 0.12);
161
+ --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
162
+ --ins-status-neutral: #79818c;
163
+ --ins-text-primary: #1b1f3b;
164
+ --ins-text-secondary: rgba(27, 31, 59, 0.65);
165
+ --ins-text-tertiary: rgba(27, 31, 59, 0.4);
166
+ --ins-text-primary-on-accent: #fff;
167
+ --ins-text-action: #4c66c3;
168
+ --ins-text-action-hover: #6c86e2;
169
+ --ins-text-positive: #3aa981;
170
+ --ins-text-positive-hover: #7ac5aa;
171
+ --ins-text-negative: #dd4c1e;
172
+ --ins-text-negative-hover: #e38163;
173
+ --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
174
+ --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
175
+ --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
176
+ --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
177
+ }
178
+ }
179
+ [insAppearance][data-appearance='accent'] {
180
+ background: var(--ins-background-accent-2);
181
+ color: var(--ins-text-primary-on-accent);
182
+ }
183
+ @media (hover: hover) and (pointer: fine) {
184
+ [insAppearance][data-appearance='accent']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
185
+ background: var(--ins-background-accent-2-hover);
186
+ }
187
+ }
188
+ [insAppearance][data-appearance='accent'][data-state='hover'] {
189
+ background: var(--ins-background-accent-2-hover);
190
+ }
191
+ [insAppearance][data-appearance='accent']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
192
+ background: var(--ins-background-accent-2-pressed);
193
+ }
194
+ [insAppearance][data-appearance='accent'][data-state='active'] {
195
+ background: var(--ins-background-accent-2-pressed);
196
+ }
197
+ [insAppearance][data-appearance='action'] {
198
+ color: var(--ins-text-action);
199
+ background: transparent;
200
+ }
201
+ @media (hover: hover) and (pointer: fine) {
202
+ [insAppearance][data-appearance='action']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
203
+ color: var(--ins-text-action-hover);
204
+ }
205
+ }
206
+ [insAppearance][data-appearance='action'][data-state='hover'] {
207
+ color: var(--ins-text-action-hover);
208
+ }
209
+ [insAppearance][data-appearance='action']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
210
+ color: var(--ins-text-action-hover);
211
+ }
212
+ [insAppearance][data-appearance='action'][data-state='active'] {
213
+ color: var(--ins-text-action-hover);
214
+ }
215
+ [insAppearance][data-appearance='action-destructive'] {
216
+ color: var(--ins-text-negative);
217
+ background: transparent;
218
+ }
219
+ @media (hover: hover) and (pointer: fine) {
220
+ [insAppearance][data-appearance='action-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
221
+ color: var(--ins-text-negative-hover);
222
+ }
223
+ }
224
+ [insAppearance][data-appearance='action-destructive'][data-state='hover'] {
225
+ color: var(--ins-text-negative-hover);
226
+ }
227
+ [insAppearance][data-appearance='action-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
228
+ color: var(--ins-text-negative-hover);
229
+ }
230
+ [insAppearance][data-appearance='action-destructive'][data-state='active'] {
231
+ color: var(--ins-text-negative-hover);
232
+ }
233
+ [insAppearance][data-appearance='action-grayscale'] {
234
+ color: var(--ins-text-secondary);
235
+ background: transparent;
236
+ }
237
+ @media (hover: hover) and (pointer: fine) {
238
+ [insAppearance][data-appearance='action-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
239
+ color: var(--ins-text-primary);
240
+ }
241
+ }
242
+ [insAppearance][data-appearance='action-grayscale'][data-state='hover'] {
243
+ color: var(--ins-text-primary);
244
+ }
245
+ [insAppearance][data-appearance='action-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
246
+ color: var(--ins-text-primary);
247
+ }
248
+ [insAppearance][data-appearance='action-grayscale'][data-state='active'] {
249
+ color: var(--ins-text-primary);
250
+ }
251
+ @media (hover: hover) and (pointer: fine) {
252
+ [insAppearance][data-appearance='flat']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
253
+ [insAppearance][data-appearance='flat-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
254
+ [insAppearance][data-appearance='flat-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
255
+ background: var(--ins-background-neutral-1-hover);
256
+ }
257
+ }
258
+ [insAppearance][data-appearance='flat'][data-state='hover'],
259
+ [insAppearance][data-appearance='flat-destructive'][data-state='hover'],
260
+ [insAppearance][data-appearance='flat-grayscale'][data-state='hover'] {
261
+ background: var(--ins-background-neutral-1-hover);
262
+ }
263
+ [insAppearance][data-appearance='flat']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
264
+ [insAppearance][data-appearance='flat-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
265
+ [insAppearance][data-appearance='flat-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
266
+ background: var(--ins-background-neutral-1-pressed);
267
+ }
268
+ [insAppearance][data-appearance='flat'][data-state='active'],
269
+ [insAppearance][data-appearance='flat-destructive'][data-state='active'],
270
+ [insAppearance][data-appearance='flat-grayscale'][data-state='active'] {
271
+ background: var(--ins-background-neutral-1-pressed);
272
+ }
273
+ [insAppearance][data-appearance='flat'] {
274
+ color: var(--ins-text-action);
275
+ }
276
+ [insAppearance][data-appearance='flat-destructive'] {
277
+ color: var(--ins-text-negative);
278
+ }
279
+ [insAppearance][data-appearance='flat-grayscale'] {
280
+ color: var(--ins-text-primary);
281
+ }
282
+ [insAppearance][data-appearance='outline'],
283
+ [insAppearance][data-appearance='outline-destructive'],
284
+ [insAppearance][data-appearance='outline-grayscale'] {
285
+ --t-bs: var(--ins-border-normal);
286
+ color: var(--ins-text-action);
287
+ box-shadow: inset 0 0 0 1px var(--t-bs);
288
+ }
289
+ [insAppearance][data-appearance='outline']:checked:not([data-mode]),
290
+ [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]),
291
+ [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]),
292
+ [insAppearance][data-appearance='outline'][data-mode~='checked'],
293
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'],
294
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'] {
295
+ --t-bs: var(--ins-background-accent-1);
296
+ box-shadow: inset 0 0 0 2px var(--t-bs);
297
+ }
298
+ @media (hover: hover) and (pointer: fine) {
299
+ [insAppearance][data-appearance='outline']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
300
+ [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
301
+ [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
302
+ [insAppearance][data-appearance='outline'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
303
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
304
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
305
+ --t-bs: var(--ins-background-accent-1-hover);
306
+ }
307
+ }
308
+ [insAppearance][data-appearance='outline']:checked:not([data-mode])[data-state='hover'],
309
+ [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode])[data-state='hover'],
310
+ [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode])[data-state='hover'],
311
+ [insAppearance][data-appearance='outline'][data-mode~='checked'][data-state='hover'],
312
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-state='hover'],
313
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-state='hover'] {
314
+ --t-bs: var(--ins-background-accent-1-hover);
315
+ }
316
+ [insAppearance][data-appearance='outline']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
317
+ [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
318
+ [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
319
+ [insAppearance][data-appearance='outline'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
320
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
321
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
322
+ --t-bs: var(--ins-background-accent-1-pressed);
323
+ }
324
+ [insAppearance][data-appearance='outline']:checked:not([data-mode])[data-state='active'],
325
+ [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode])[data-state='active'],
326
+ [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode])[data-state='active'],
327
+ [insAppearance][data-appearance='outline'][data-mode~='checked'][data-state='active'],
328
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-state='active'],
329
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-state='active'] {
330
+ --t-bs: var(--ins-background-accent-1-pressed);
331
+ }
332
+ [insAppearance][data-appearance='outline']:invalid:not([data-mode]),
333
+ [insAppearance][data-appearance='outline-destructive']:invalid:not([data-mode]),
334
+ [insAppearance][data-appearance='outline-grayscale']:invalid:not([data-mode]),
335
+ [insAppearance][data-appearance='outline'][data-mode~='invalid'],
336
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='invalid'],
337
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='invalid'] {
338
+ box-shadow: inset 0 0 0 1px var(--ins-status-negative-pale-hover);
339
+ }
340
+ [insAppearance][data-appearance='outline']:checked:invalid:not([data-mode]),
341
+ [insAppearance][data-appearance='outline-destructive']:checked:invalid:not([data-mode]),
342
+ [insAppearance][data-appearance='outline-grayscale']:checked:invalid:not([data-mode]),
343
+ [insAppearance][data-appearance='outline'][data-mode~='checked'][data-mode~='invalid'],
344
+ [insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-mode~='invalid'],
345
+ [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-mode~='invalid'] {
346
+ box-shadow: inset 0 0 0 2px var(--ins-status-negative);
347
+ }
348
+ @media (hover: hover) and (pointer: fine) {
349
+ [insAppearance][data-appearance='outline']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
350
+ [insAppearance][data-appearance='outline-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
351
+ [insAppearance][data-appearance='outline-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
352
+ background: var(--ins-background-neutral-1);
353
+ cursor: pointer;
354
+ --t-bs: var(--ins-border-hover);
355
+ }
356
+ }
357
+ [insAppearance][data-appearance='outline'][data-state='hover'],
358
+ [insAppearance][data-appearance='outline-destructive'][data-state='hover'],
359
+ [insAppearance][data-appearance='outline-grayscale'][data-state='hover'] {
360
+ background: var(--ins-background-neutral-1);
361
+ cursor: pointer;
362
+ --t-bs: var(--ins-border-hover);
363
+ }
364
+ [insAppearance][data-appearance='outline']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
365
+ [insAppearance][data-appearance='outline-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
366
+ [insAppearance][data-appearance='outline-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
367
+ background: var(--ins-background-neutral-1);
368
+ --t-bs: var(--ins-border-hover);
369
+ }
370
+ [insAppearance][data-appearance='outline'][data-state='active'],
371
+ [insAppearance][data-appearance='outline-destructive'][data-state='active'],
372
+ [insAppearance][data-appearance='outline-grayscale'][data-state='active'] {
373
+ background: var(--ins-background-neutral-1);
374
+ --t-bs: var(--ins-border-hover);
375
+ }
376
+ [insAppearance][data-appearance='outline-grayscale'] {
377
+ color: var(--ins-text-primary);
378
+ }
379
+ [insAppearance][data-appearance='outline-destructive'] {
380
+ color: var(--ins-text-negative);
381
+ }
382
+ [insAppearance][data-appearance='primary'] {
383
+ --t-bg: var(--ins-background-accent-1);
384
+ background: var(--t-bg);
385
+ color: var(--ins-text-primary-on-accent);
386
+ }
387
+ [insAppearance][data-appearance='primary']:invalid:not([data-mode]),
388
+ [insAppearance][data-appearance='primary'][data-mode~='invalid'] {
389
+ background: var(--ins-status-negative);
390
+ }
391
+ @media (hover: hover) and (pointer: fine) {
392
+ [insAppearance][data-appearance='primary']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
393
+ --t-bg: var(--ins-background-accent-1-hover);
394
+ }
395
+ }
396
+ [insAppearance][data-appearance='primary'][data-state='hover'] {
397
+ --t-bg: var(--ins-background-accent-1-hover);
398
+ }
399
+ [insAppearance][data-appearance='primary']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
400
+ --t-bg: var(--ins-background-accent-1-pressed);
401
+ }
402
+ [insAppearance][data-appearance='primary'][data-state='active'] {
403
+ --t-bg: var(--ins-background-accent-1-pressed);
404
+ }
405
+ [insAppearance][data-appearance='primary-destructive'] {
406
+ color: #fff;
407
+ background: var(--ins-status-negative);
408
+ }
409
+ @media (hover: hover) and (pointer: fine) {
410
+ [insAppearance][data-appearance='primary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
411
+ filter: saturate(1) brightness(1.3);
412
+ }
413
+ }
414
+ [insAppearance][data-appearance='primary-destructive'][data-state='hover'] {
415
+ filter: saturate(1) brightness(1.3);
416
+ }
417
+ [insAppearance][data-appearance='primary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
418
+ filter: saturate(0.8) brightness(1);
419
+ }
420
+ [insAppearance][data-appearance='primary-destructive'][data-state='active'] {
421
+ filter: saturate(0.8) brightness(1);
422
+ }
423
+ [insAppearance][data-appearance='primary-grayscale'] {
424
+ --ins-border-focus: #979797;
425
+ background: var(--ins-background-accent-opposite);
426
+ color: var(--ins-background-base);
427
+ }
428
+ @media (hover: hover) and (pointer: fine) {
429
+ [insAppearance][data-appearance='primary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
430
+ background: var(--ins-background-accent-opposite-hover);
431
+ }
432
+ }
433
+ [insAppearance][data-appearance='primary-grayscale'][data-state='hover'] {
434
+ background: var(--ins-background-accent-opposite-hover);
435
+ }
436
+ [insAppearance][data-appearance='primary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
437
+ background: var(--ins-background-accent-opposite-pressed);
438
+ }
439
+ [insAppearance][data-appearance='primary-grayscale'][data-state='active'] {
440
+ background: var(--ins-background-accent-opposite-pressed);
441
+ }
442
+ [insAppearance][data-appearance='secondary'],
443
+ [insAppearance][data-appearance='secondary-destructive'],
444
+ [insAppearance][data-appearance='secondary-grayscale'] {
445
+ background: var(--ins-background-neutral-1);
446
+ color: var(--ins-text-action);
447
+ }
448
+ @media (hover: hover) and (pointer: fine) {
449
+ [insAppearance][data-appearance='secondary']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
450
+ [insAppearance][data-appearance='secondary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
451
+ [insAppearance][data-appearance='secondary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
452
+ background: var(--ins-background-neutral-1-hover);
453
+ }
454
+ }
455
+ [insAppearance][data-appearance='secondary'][data-state='hover'],
456
+ [insAppearance][data-appearance='secondary-destructive'][data-state='hover'],
457
+ [insAppearance][data-appearance='secondary-grayscale'][data-state='hover'] {
458
+ background: var(--ins-background-neutral-1-hover);
459
+ }
460
+ [insAppearance][data-appearance='secondary']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
461
+ [insAppearance][data-appearance='secondary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
462
+ [insAppearance][data-appearance='secondary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
463
+ background: var(--ins-background-neutral-1-pressed);
464
+ }
465
+ [insAppearance][data-appearance='secondary'][data-state='active'],
466
+ [insAppearance][data-appearance='secondary-destructive'][data-state='active'],
467
+ [insAppearance][data-appearance='secondary-grayscale'][data-state='active'] {
468
+ background: var(--ins-background-neutral-1-pressed);
469
+ }
470
+ [insAppearance][data-appearance='secondary']:checked:not([data-mode]),
471
+ [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]),
472
+ [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]),
473
+ [insAppearance][data-appearance='secondary'][data-mode~='checked'],
474
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'],
475
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'] {
476
+ background: var(--ins-background-accent-1);
477
+ color: var(--ins-text-primary-on-accent);
478
+ }
479
+ @media (hover: hover) and (pointer: fine) {
480
+ [insAppearance][data-appearance='secondary']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
481
+ [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
482
+ [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
483
+ [insAppearance][data-appearance='secondary'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
484
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
485
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
486
+ background: var(--ins-background-accent-1-hover);
487
+ }
488
+ }
489
+ [insAppearance][data-appearance='secondary']:checked:not([data-mode])[data-state='hover'],
490
+ [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode])[data-state='hover'],
491
+ [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode])[data-state='hover'],
492
+ [insAppearance][data-appearance='secondary'][data-mode~='checked'][data-state='hover'],
493
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'][data-state='hover'],
494
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'][data-state='hover'] {
495
+ background: var(--ins-background-accent-1-hover);
496
+ }
497
+ [insAppearance][data-appearance='secondary']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
498
+ [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
499
+ [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
500
+ [insAppearance][data-appearance='secondary'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
501
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
502
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
503
+ background: var(--ins-background-accent-1-pressed);
504
+ }
505
+ [insAppearance][data-appearance='secondary']:checked:not([data-mode])[data-state='active'],
506
+ [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode])[data-state='active'],
507
+ [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode])[data-state='active'],
508
+ [insAppearance][data-appearance='secondary'][data-mode~='checked'][data-state='active'],
509
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'][data-state='active'],
510
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'][data-state='active'] {
511
+ background: var(--ins-background-accent-1-pressed);
512
+ }
513
+ [insAppearance][data-appearance='secondary']:invalid:not([data-mode]),
514
+ [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]),
515
+ [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]),
516
+ [insAppearance][data-appearance='secondary'][data-mode~='invalid'],
517
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'],
518
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'] {
519
+ color: var(--ins-text-negative);
520
+ background: var(--ins-status-negative-pale);
521
+ }
522
+ @media (hover: hover) and (pointer: fine) {
523
+ [insAppearance][data-appearance='secondary']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
524
+ [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
525
+ [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
526
+ [insAppearance][data-appearance='secondary'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
527
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
528
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
529
+ color: var(--ins-text-negative-hover);
530
+ background: var(--ins-status-negative-pale-hover);
531
+ }
532
+ }
533
+ [insAppearance][data-appearance='secondary']:invalid:not([data-mode])[data-state='hover'],
534
+ [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode])[data-state='hover'],
535
+ [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode])[data-state='hover'],
536
+ [insAppearance][data-appearance='secondary'][data-mode~='invalid'][data-state='hover'],
537
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'][data-state='hover'],
538
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'][data-state='hover'] {
539
+ color: var(--ins-text-negative-hover);
540
+ background: var(--ins-status-negative-pale-hover);
541
+ }
542
+ [insAppearance][data-appearance='secondary']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
543
+ [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
544
+ [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
545
+ [insAppearance][data-appearance='secondary'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
546
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
547
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
548
+ color: var(--ins-text-negative-hover);
549
+ background: var(--ins-status-negative-pale-hover);
550
+ }
551
+ [insAppearance][data-appearance='secondary']:invalid:not([data-mode])[data-state='active'],
552
+ [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode])[data-state='active'],
553
+ [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode])[data-state='active'],
554
+ [insAppearance][data-appearance='secondary'][data-mode~='invalid'][data-state='active'],
555
+ [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'][data-state='active'],
556
+ [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'][data-state='active'] {
557
+ color: var(--ins-text-negative-hover);
558
+ background: var(--ins-status-negative-pale-hover);
559
+ }
560
+ [insAppearance][data-appearance='secondary-destructive'] {
561
+ color: var(--ins-text-negative);
562
+ }
563
+ [insAppearance][data-appearance='secondary-grayscale'] {
564
+ color: var(--ins-text-primary);
565
+ }
566
+ [insAppearance][data-appearance='negative'],
567
+ [insAppearance][data-appearance='positive'],
568
+ [insAppearance][data-appearance='warning'],
569
+ [insAppearance][data-appearance='info'],
570
+ [insAppearance][data-appearance='neutral'] {
571
+ background: var(--t-bg);
572
+ color: var(--ins-text-primary);
573
+ }
574
+ [insAppearance][data-appearance='negative']:checked:not([data-mode]),
575
+ [insAppearance][data-appearance='positive']:checked:not([data-mode]),
576
+ [insAppearance][data-appearance='warning']:checked:not([data-mode]),
577
+ [insAppearance][data-appearance='info']:checked:not([data-mode]),
578
+ [insAppearance][data-appearance='neutral']:checked:not([data-mode]),
579
+ [insAppearance][data-appearance='negative'][data-mode~='checked'],
580
+ [insAppearance][data-appearance='positive'][data-mode~='checked'],
581
+ [insAppearance][data-appearance='warning'][data-mode~='checked'],
582
+ [insAppearance][data-appearance='info'][data-mode~='checked'],
583
+ [insAppearance][data-appearance='neutral'][data-mode~='checked'] {
584
+ color: #fff;
585
+ }
586
+ [insAppearance][data-appearance='negative'] {
587
+ --t-bg: var(--ins-status-negative-pale);
588
+ }
589
+ [insAppearance][data-appearance='negative']::before,
590
+ [insAppearance][data-appearance='negative']::after {
591
+ color: var(--ins-status-negative);
592
+ }
593
+ @media (hover: hover) and (pointer: fine) {
594
+ [insAppearance][data-appearance='negative']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
595
+ --t-bg: var(--ins-status-negative-pale-hover);
596
+ }
597
+ }
598
+ [insAppearance][data-appearance='negative'][data-state='hover'] {
599
+ --t-bg: var(--ins-status-negative-pale-hover);
600
+ }
601
+ [insAppearance][data-appearance='negative']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
602
+ --t-bg: var(--ins-status-negative-pale-hover);
603
+ }
604
+ [insAppearance][data-appearance='negative'][data-state='active'] {
605
+ --t-bg: var(--ins-status-negative-pale-hover);
606
+ }
607
+ [insAppearance][data-appearance='negative']:checked:not([data-mode]),
608
+ [insAppearance][data-appearance='negative'][data-mode~='checked'] {
609
+ background: var(--ins-status-negative);
610
+ }
611
+ [insAppearance][data-appearance='positive'] {
612
+ --t-bg: var(--ins-status-positive-pale);
613
+ }
614
+ [insAppearance][data-appearance='positive']::before,
615
+ [insAppearance][data-appearance='positive']::after {
616
+ color: var(--ins-status-positive);
617
+ }
618
+ @media (hover: hover) and (pointer: fine) {
619
+ [insAppearance][data-appearance='positive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
620
+ --t-bg: var(--ins-status-positive-pale-hover);
621
+ }
622
+ }
623
+ [insAppearance][data-appearance='positive'][data-state='hover'] {
624
+ --t-bg: var(--ins-status-positive-pale-hover);
625
+ }
626
+ [insAppearance][data-appearance='positive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
627
+ --t-bg: var(--ins-status-positive-pale-hover);
628
+ }
629
+ [insAppearance][data-appearance='positive'][data-state='active'] {
630
+ --t-bg: var(--ins-status-positive-pale-hover);
631
+ }
632
+ [insAppearance][data-appearance='positive']:checked:not([data-mode]),
633
+ [insAppearance][data-appearance='positive'][data-mode~='checked'] {
634
+ background: var(--ins-status-positive);
635
+ }
636
+ [insAppearance][data-appearance='warning'] {
637
+ --t-bg: var(--ins-status-warning-pale);
638
+ }
639
+ [insAppearance][data-appearance='warning']::before,
640
+ [insAppearance][data-appearance='warning']::after {
641
+ color: var(--ins-status-warning);
642
+ }
643
+ @media (hover: hover) and (pointer: fine) {
644
+ [insAppearance][data-appearance='warning']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
645
+ --t-bg: var(--ins-status-warning-pale-hover);
646
+ }
647
+ }
648
+ [insAppearance][data-appearance='warning'][data-state='hover'] {
649
+ --t-bg: var(--ins-status-warning-pale-hover);
650
+ }
651
+ [insAppearance][data-appearance='warning']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
652
+ --t-bg: var(--ins-status-warning-pale-hover);
653
+ }
654
+ [insAppearance][data-appearance='warning'][data-state='active'] {
655
+ --t-bg: var(--ins-status-warning-pale-hover);
656
+ }
657
+ [insAppearance][data-appearance='warning']:checked:not([data-mode]),
658
+ [insAppearance][data-appearance='warning'][data-mode~='checked'] {
659
+ background: var(--ins-status-warning);
660
+ }
661
+ [insAppearance][data-appearance='info'] {
662
+ --t-bg: var(--ins-status-info-pale);
663
+ }
664
+ [insAppearance][data-appearance='info']::before,
665
+ [insAppearance][data-appearance='info']::after {
666
+ color: var(--ins-status-info);
667
+ }
668
+ @media (hover: hover) and (pointer: fine) {
669
+ [insAppearance][data-appearance='info']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
670
+ --t-bg: var(--ins-status-info-pale-hover);
671
+ }
672
+ }
673
+ [insAppearance][data-appearance='info'][data-state='hover'] {
674
+ --t-bg: var(--ins-status-info-pale-hover);
675
+ }
676
+ [insAppearance][data-appearance='info']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
677
+ --t-bg: var(--ins-status-info-pale-hover);
678
+ }
679
+ [insAppearance][data-appearance='info'][data-state='active'] {
680
+ --t-bg: var(--ins-status-info-pale-hover);
681
+ }
682
+ [insAppearance][data-appearance='info']:checked:not([data-mode]),
683
+ [insAppearance][data-appearance='info'][data-mode~='checked'] {
684
+ background: var(--ins-status-info);
685
+ }
686
+ [insAppearance][data-appearance='neutral'] {
687
+ --t-bg: var(--ins-background-neutral-1);
688
+ }
689
+ [insAppearance][data-appearance='neutral']::before,
690
+ [insAppearance][data-appearance='neutral']::after {
691
+ color: var(--ins-status-neutral);
692
+ }
693
+ @media (hover: hover) and (pointer: fine) {
694
+ [insAppearance][data-appearance='neutral']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
695
+ --t-bg: var(--ins-background-neutral-1-hover);
696
+ }
697
+ }
698
+ [insAppearance][data-appearance='neutral'][data-state='hover'] {
699
+ --t-bg: var(--ins-background-neutral-1-hover);
700
+ }
701
+ [insAppearance][data-appearance='neutral']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
702
+ --t-bg: var(--ins-background-neutral-1-pressed);
703
+ }
704
+ [insAppearance][data-appearance='neutral'][data-state='active'] {
705
+ --t-bg: var(--ins-background-neutral-1-pressed);
706
+ }
707
+ [insAppearance][data-appearance='neutral']:checked:not([data-mode]),
708
+ [insAppearance][data-appearance='neutral'][data-mode~='checked'] {
709
+ background: var(--ins-status-neutral);
710
+ }
711
+ [insAppearance][data-appearance='glass'] {
712
+ background: rgba(0, 0, 0, 0.4);
713
+ color: #fff;
714
+ backdrop-filter: blur(1rem);
715
+ --ins-border-focus: rgba(255, 255, 255, 0.64);
716
+ }
717
+ @media (hover: hover) and (pointer: fine) {
718
+ [insAppearance][data-appearance='glass']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
719
+ background: rgba(0, 0, 0, 0.48);
720
+ }
721
+ }
722
+ [insAppearance][data-appearance='glass'][data-state='hover'] {
723
+ background: rgba(0, 0, 0, 0.48);
724
+ }
725
+ [insAppearance][data-appearance='glass']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
726
+ background: rgba(0, 0, 0, 0.6);
727
+ }
728
+ [insAppearance][data-appearance='glass'][data-state='active'] {
729
+ background: rgba(0, 0, 0, 0.6);
730
+ }
731
+ /*
732
+ Every max-width of breakpoint is equal:
733
+ next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
734
+ */
735
+ [insAppearance][data-appearance='textfield'] {
736
+ transition-property: box-shadow, background, outline-color, border-color;
737
+ transition-duration: var(--ins-duration, 300ms);
738
+ transition-timing-function: ease-in-out;
739
+ --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
740
+ background-color: var(--ins-background-base);
741
+ color: var(--ins-text-primary);
742
+ box-shadow: var(--t-shadow);
743
+ outline: 1px solid var(--ins-border-normal);
744
+ outline-offset: -1px;
745
+ border: none;
746
+ }
747
+ @media (hover: hover) and (pointer: fine) {
748
+ [insAppearance][data-appearance='textfield']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
749
+ --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
750
+ }
751
+ }
752
+ [insAppearance][data-appearance='textfield'][data-state='hover'] {
753
+ --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
754
+ }
755
+ [insAppearance][data-appearance='textfield']:focus-visible:not([data-focus='false']) {
756
+ box-shadow: none;
757
+ outline: 0.125rem solid var(--ins-background-accent-1);
758
+ outline-offset: -0.125rem;
759
+ }
760
+ [insAppearance][data-appearance='textfield'][data-focus='true'] {
761
+ box-shadow: none;
762
+ outline: 0.125rem solid var(--ins-background-accent-1);
763
+ outline-offset: -0.125rem;
764
+ }
765
+ [insAppearance][data-appearance='textfield']:disabled:not([data-state]),
766
+ [insAppearance][data-appearance='textfield'][data-state='disabled'] {
767
+ box-shadow: none;
768
+ }
769
+ [insAppearance][data-appearance='textfield'][data-mode~='invalid'][data-mode~='invalid'],
770
+ [insAppearance][data-appearance='textfield']:invalid:not([data-mode]) {
771
+ outline-color: var(--ins-status-negative);
772
+ }
773
+ [insAppearance][data-appearance='textfield'][data-mode~='readonly'],
774
+ input[insAppearance][data-appearance='textfield']:read-only:not([data-mode]) {
775
+ background: transparent !important;
776
+ box-shadow: none !important;
777
+ outline-color: var(--ins-border-normal) !important;
778
+ }
779
+ [insAppearance][data-appearance='textfield']:-webkit-autofill {
780
+ -webkit-text-fill-color: var(--ins-text-primary) !important;
781
+ box-shadow: 0 0 0 100rem var(--ins-service-autofill-background) inset !important;
782
+ transition: background-color 600000s 0s;
783
+ }
784
+ body {
785
+ text-rendering: optimizeLegibility;
786
+ -webkit-font-smoothing: antialiased;
787
+ -moz-osx-font-smoothing: grayscale;
788
+ }
789
+ ul,
790
+ ol {
791
+ list-style: none;
792
+ padding: 0;
793
+ margin: 0;
794
+ }
795
+ table {
796
+ border-collapse: collapse;
797
+ border-spacing: 0;
798
+ }
799
+ hr {
800
+ margin: 0;
801
+ block-size: 1px;
802
+ border: none;
803
+ background: var(--ins-border-normal);
804
+ }
805
+ iframe {
806
+ border: none;
807
+ }
808
+ ::-ms-clear {
809
+ display: none;
810
+ }
811
+ ::-ms-reveal {
812
+ display: none;
813
+ }
814
+ .ins-list {
815
+ font: var(--ins-font-text-m);
816
+ line-height: 1.5rem;
817
+ list-style-type: none;
818
+ color: var(--ins-text-primary);
819
+ }
820
+ .ins-list_large {
821
+ font: var(--ins-font-text-l);
822
+ line-height: 1.75rem;
823
+ }
824
+ .ins-list_small,
825
+ .ins-list_extra-small {
826
+ font: var(--ins-font-text-s);
827
+ line-height: 1.25rem;
828
+ }
829
+ .ins-list_nested {
830
+ margin: 0.75rem 0 0.75rem 1.25rem;
831
+ color: var(--ins-text-secondary);
832
+ }
833
+ .ins-list_large .ins-list_nested {
834
+ margin-inline-start: 0.75rem;
835
+ }
836
+ .ins-list_small .ins-list_nested {
837
+ margin-block-start: 0.5rem;
838
+ margin-block-end: 0.5rem;
839
+ }
840
+ .ins-list_ordered {
841
+ counter-reset: counter;
842
+ }
843
+ .ins-list__item {
844
+ position: relative;
845
+ padding-inline-start: 1.5rem;
846
+ overflow-wrap: break-word;
847
+ margin-block-start: 0.75rem;
848
+ }
849
+ .ins-list__item:first-child {
850
+ margin-block-start: 0;
851
+ }
852
+ .ins-list__item::before {
853
+ content: '';
854
+ position: absolute;
855
+ left: 0;
856
+ top: 0.5rem;
857
+ inline-size: 0.5rem;
858
+ block-size: 0.5rem;
859
+ border-radius: 100%;
860
+ background-color: var(--ins-background-accent-1);
861
+ }
862
+ .ins-list_large > .ins-list__item::before {
863
+ top: 0.625rem;
864
+ }
865
+ .ins-list_small > .ins-list__item::before {
866
+ top: 0.375rem;
867
+ }
868
+ .ins-list_extra-small > .ins-list__item {
869
+ margin-block-start: 0.5rem;
870
+ }
871
+ .ins-list_linear .ins-list__item {
872
+ padding-inline-start: 1.75rem;
873
+ }
874
+ .ins-list_linear .ins-list__item::before {
875
+ content: '\2014';
876
+ left: 0;
877
+ top: auto;
878
+ inline-size: auto;
879
+ block-size: auto;
880
+ background-color: transparent;
881
+ }
882
+ .ins-list_ordered .ins-list__item {
883
+ padding-inline-start: 1.25rem;
884
+ }
885
+ .ins-list_ordered .ins-list__item::before {
886
+ content: counter(counter) '.';
887
+ left: 0;
888
+ top: auto;
889
+ counter-increment: counter;
890
+ inline-size: auto;
891
+ block-size: auto;
892
+ color: var(--ins-text-tertiary);
893
+ background-color: transparent;
894
+ }
895
+ .ins-list_triangle > .ins-list__item {
896
+ padding-inline-start: 1.75rem;
897
+ }
898
+ .ins-list_triangle > .ins-list__item::before {
899
+ content: '\25E4';
900
+ left: 0;
901
+ top: 1px;
902
+ inline-size: auto;
903
+ block-size: auto;
904
+ background-color: transparent;
905
+ color: var(--ins-text-tertiary);
906
+ font-size: 0.75rem;
907
+ }
908
+ .ins-list__item-title {
909
+ font: var(--ins-font-heading-5);
910
+ margin: 0;
911
+ }
912
+ .ins-list_small .ins-list__item-title {
913
+ line-height: 1.25rem;
914
+ font-weight: bold;
915
+ }
916
+ .ins-list__description {
917
+ margin: 0.5rem 0 0;
918
+ color: var(--ins-text-secondary);
919
+ }
920
+ .ins-list_small .ins-list__description {
921
+ margin-block-start: 0.25rem;
922
+ }
923
+ .ins-list_large .ins-list__description {
924
+ line-height: 1.75rem;
925
+ margin-block-start: 0.75rem;
926
+ }
927
+ .ins-table {
928
+ inline-size: 100%;
929
+ }
930
+ .ins-table_layout_fixed {
931
+ table-layout: fixed;
932
+ }
933
+ .ins-table__tr {
934
+ transition-property: background;
935
+ transition-duration: var(--ins-duration, 300ms);
936
+ transition-timing-function: ease-in-out;
937
+ outline: none;
938
+ }
939
+ .ins-table__tr:not(.ins-table__tr_hover_disabled):hover {
940
+ background: var(--ins-background-base-alt);
941
+ }
942
+ .ins-table__tr:not(.ins-table__tr_border_none) {
943
+ border-block-end: 1px solid var(--ins-border-normal);
944
+ }
945
+ .ins-table__tr_border_top {
946
+ border-block-start: 1px solid var(--ins-border-normal);
947
+ }
948
+ .ins-table__tr_cursor_pointer {
949
+ cursor: pointer;
950
+ }
951
+ .ins-table__th {
952
+ white-space: nowrap;
953
+ overflow: hidden;
954
+ text-overflow: ellipsis;
955
+ font: var(--ins-font-text-s);
956
+ padding: 0.5rem 1rem;
957
+ vertical-align: middle;
958
+ block-size: 2.5rem;
959
+ color: var(--ins-text-secondary);
960
+ background: inherit;
961
+ }
962
+ .ins-table__th_font-size_l,
963
+ .ins-table_font-size_l .ins-table__th {
964
+ font: var(--ins-font-text-m);
965
+ }
966
+ .ins-table__td {
967
+ font: var(--ins-font-text-m);
968
+ padding: 1rem 1rem 0.875rem;
969
+ vertical-align: top;
970
+ overflow-wrap: break-word;
971
+ block-size: 3.4375rem;
972
+ color: var(--ins-text-primary);
973
+ background: inherit;
974
+ }
975
+ .ins-table__td_size_l,
976
+ .ins-table_size_l .ins-table__td {
977
+ block-size: 4.9375rem;
978
+ }
979
+ .ins-table__td_font-size_l,
980
+ .ins-table_font-size_l .ins-table__td {
981
+ font: var(--ins-font-text-l);
982
+ }
983
+ .ins-table__td_font-size_s,
984
+ .ins-table_font-size_s .ins-table__td {
985
+ font: var(--ins-font-text-s);
986
+ }
987
+ .ins-table__td_align_center {
988
+ vertical-align: middle;
989
+ }
990
+ .ins-table__td,
991
+ .ins-table__th {
992
+ box-sizing: border-box;
993
+ text-align: start;
994
+ }
995
+ .ins-table_size_l .ins-table__td::before,
996
+ .ins-table_size_l .ins-table__th::before {
997
+ inline-size: 1rem;
998
+ border-start-start-radius: 1rem;
999
+ border-end-start-radius: 1rem;
1000
+ }
1001
+ .ins-table__td_first::before,
1002
+ .ins-table__th_first::before,
1003
+ .ins-table__td_last::before,
1004
+ .ins-table__th_last::before {
1005
+ content: '';
1006
+ position: absolute;
1007
+ top: 0;
1008
+ inline-size: 0.75rem;
1009
+ block-size: 100%;
1010
+ background: inherit;
1011
+ border-start-start-radius: 0.75rem;
1012
+ border-end-start-radius: 0.75rem;
1013
+ }
1014
+ .ins-table__td_first,
1015
+ .ins-table__th_first {
1016
+ position: relative;
1017
+ padding-left: 0;
1018
+ overflow: visible;
1019
+ }
1020
+ .ins-table__td_first::before,
1021
+ .ins-table__th_first::before {
1022
+ right: 100%;
1023
+ }
1024
+ .ins-table__td_last,
1025
+ .ins-table__th_last {
1026
+ position: relative;
1027
+ padding-right: 0;
1028
+ overflow: visible;
1029
+ }
1030
+ .ins-table__td_last::before,
1031
+ .ins-table__th_last::before {
1032
+ left: 100%;
1033
+ transform: scaleX(-1);
1034
+ }
1035
+ .ins-table__td_text_center,
1036
+ .ins-table__th_text_center {
1037
+ text-align: center;
1038
+ }
1039
+ .ins-table__td_text_right,
1040
+ .ins-table__th_text_right {
1041
+ text-align: end;
1042
+ }
1043
+ .ins-table__td_text_overflow,
1044
+ .ins-table__th_text_overflow {
1045
+ white-space: nowrap;
1046
+ overflow: hidden;
1047
+ text-overflow: ellipsis;
1048
+ }
1049
+ .ins-table__subtext {
1050
+ font: var(--ins-font-text-s);
1051
+ margin: 0.25rem 0 0;
1052
+ color: var(--ins-text-tertiary);
1053
+ }
1054
+ .ins-table__sort {
1055
+ appearance: none;
1056
+ padding: 0;
1057
+ border: 0;
1058
+ background: none;
1059
+ font: inherit;
1060
+ line-height: inherit;
1061
+ text-decoration: none;
1062
+ transition-property: color;
1063
+ transition-duration: var(--ins-duration, 300ms);
1064
+ transition-timing-function: ease-in-out;
1065
+ position: relative;
1066
+ display: inline-flex;
1067
+ align-items: center;
1068
+ outline: none;
1069
+ cursor: pointer;
1070
+ }
1071
+ .ins-table__sort:hover {
1072
+ color: var(--ins-text-primary);
1073
+ }
1074
+ .ins-table__sort_active {
1075
+ color: var(--ins-text-action);
1076
+ }
1077
+ .ins-table__sort_active:hover {
1078
+ color: var(--ins-text-action-hover);
1079
+ }
1080
+ .ins-table__sort-icon {
1081
+ position: absolute;
1082
+ top: 50%;
1083
+ transform: translate(0, -50%);
1084
+ left: 100%;
1085
+ margin-left: 0.125rem;
1086
+ inline-size: 1rem;
1087
+ block-size: 1rem;
1088
+ flex-shrink: 0;
1089
+ opacity: 0;
1090
+ }
1091
+ .ins-table__sort_active .ins-table__sort-icon,
1092
+ .ins-table__sort:hover .ins-table__sort-icon {
1093
+ transition-property: transform;
1094
+ transition-duration: var(--ins-duration, 300ms);
1095
+ transition-timing-function: ease-in-out;
1096
+ opacity: 1;
1097
+ }
1098
+ .ins-table__sort_active.ins-table__sort_up .ins-table__sort-icon {
1099
+ transform: rotate(180deg) translateY(50%);
1100
+ }
1101
+ .ins-required::after {
1102
+ content: '*';
1103
+ }
1104
+ .ins-required_float::after {
1105
+ position: absolute;
1106
+ }
1107
+ .ins-required_spacing::after {
1108
+ content: '\0000a0*';
1109
+ }