@echothink-ui/identity 0.1.0

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 (48) hide show
  1. package/README.md +5 -0
  2. package/dist/components/AccessReviewPanel.d.ts +9 -0
  3. package/dist/components/AccountMenu.d.ts +8 -0
  4. package/dist/components/ApprovalPolicyEditor.d.ts +8 -0
  5. package/dist/components/AuditTrail.d.ts +6 -0
  6. package/dist/components/GroupPicker.d.ts +12 -0
  7. package/dist/components/IdentityCard.d.ts +14 -0
  8. package/dist/components/InviteUserPanel.d.ts +14 -0
  9. package/dist/components/OrganizationSwitcher.d.ts +9 -0
  10. package/dist/components/PermissionMatrix.d.ts +10 -0
  11. package/dist/components/PolicyRuleViewer.d.ts +6 -0
  12. package/dist/components/RoleBadge.d.ts +6 -0
  13. package/dist/components/SessionStatus.d.ts +9 -0
  14. package/dist/components/TeamList.d.ts +13 -0
  15. package/dist/components/UserPicker.d.ts +12 -0
  16. package/dist/components/types.d.ts +77 -0
  17. package/dist/index.cjs +1629 -0
  18. package/dist/index.cjs.map +1 -0
  19. package/dist/index.css +2238 -0
  20. package/dist/index.css.map +1 -0
  21. package/dist/index.d.ts +18 -0
  22. package/dist/index.js +1610 -0
  23. package/dist/index.js.map +1 -0
  24. package/package.json +43 -0
  25. package/src/components/AccessReviewPanel.tsx +169 -0
  26. package/src/components/AccountMenu.tsx +144 -0
  27. package/src/components/ApprovalPolicyEditor.tsx +131 -0
  28. package/src/components/AuditTrail.tsx +105 -0
  29. package/src/components/GroupPicker.tsx +175 -0
  30. package/src/components/IdentityCard.tsx +78 -0
  31. package/src/components/InviteUserPanel.tsx +162 -0
  32. package/src/components/OrganizationSwitcher.test.tsx +59 -0
  33. package/src/components/OrganizationSwitcher.tsx +161 -0
  34. package/src/components/PermissionMatrix.test.tsx +96 -0
  35. package/src/components/PermissionMatrix.tsx +271 -0
  36. package/src/components/PolicyRuleViewer.test.tsx +29 -0
  37. package/src/components/PolicyRuleViewer.tsx +78 -0
  38. package/src/components/RoleBadge.test.tsx +35 -0
  39. package/src/components/RoleBadge.tsx +38 -0
  40. package/src/components/SessionStatus.test.tsx +40 -0
  41. package/src/components/SessionStatus.tsx +194 -0
  42. package/src/components/TeamList.test.tsx +48 -0
  43. package/src/components/TeamList.tsx +98 -0
  44. package/src/components/UserPicker.test.tsx +52 -0
  45. package/src/components/UserPicker.tsx +174 -0
  46. package/src/components/types.ts +89 -0
  47. package/src/index.tsx +35 -0
  48. package/src/styles.css +2578 -0
package/src/styles.css ADDED
@@ -0,0 +1,2578 @@
1
+ @import "@echothink-ui/core/styles.css";
2
+
3
+ .eth-id-access-review,
4
+ .eth-identity-access-review,
5
+ .eth-id-identity-card,
6
+ .eth-identity-card,
7
+ .eth-id-invite-user,
8
+ .eth-identity-invite-user,
9
+ .eth-id-approval-policy-editor,
10
+ .eth-identity-approval-policy-editor,
11
+ .eth-identity-session-status.eth-surface {
12
+ background: var(--eth-color-layer-01);
13
+ border: 1px solid var(--eth-color-border-subtle);
14
+ border-radius: 0;
15
+ color: var(--eth-color-text-primary);
16
+ }
17
+
18
+ .eth-id-identity-card.eth-surface,
19
+ .eth-identity-card.eth-surface {
20
+ gap: 0;
21
+ inline-size: 100%;
22
+ min-inline-size: 0;
23
+ padding: var(--eth-space-lg);
24
+ }
25
+
26
+ .eth-id-identity-card__body,
27
+ .eth-identity-card__body {
28
+ align-items: center;
29
+ display: grid;
30
+ column-gap: var(--eth-space-lg);
31
+ grid-template-columns: max-content minmax(0, 1fr) max-content;
32
+ min-inline-size: 0;
33
+ row-gap: var(--eth-space-md);
34
+ }
35
+
36
+ .eth-id-identity-card__avatar,
37
+ .eth-identity-card__avatar {
38
+ align-items: center;
39
+ background: var(--eth-color-layer-02);
40
+ border: 1px solid var(--eth-color-border-subtle);
41
+ border-radius: 0;
42
+ color: var(--eth-color-text-secondary);
43
+ display: inline-flex;
44
+ flex: 0 0 auto;
45
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
46
+ font-weight: 600;
47
+ block-size: 3rem;
48
+ inline-size: 3rem;
49
+ justify-content: center;
50
+ line-height: 1;
51
+ object-fit: cover;
52
+ }
53
+
54
+ .eth-identity-card--service-account .eth-identity-card__avatar {
55
+ font-family: var(--eth-font-mono, monospace);
56
+ }
57
+
58
+ .eth-id-identity-card__main,
59
+ .eth-identity-card__main {
60
+ min-width: 0;
61
+ }
62
+
63
+ .eth-id-identity-card__main h3,
64
+ .eth-identity-card__main h3 {
65
+ font-size: calc(1rem * var(--eth-text-scale, 1));
66
+ font-weight: 600;
67
+ line-height: 1.375;
68
+ margin: 0;
69
+ overflow: hidden;
70
+ text-overflow: ellipsis;
71
+ white-space: nowrap;
72
+ }
73
+
74
+ .eth-id-identity-card__main p,
75
+ .eth-identity-card__main p,
76
+ .eth-identity-team-list__item p,
77
+ .eth-id-team-list__item p {
78
+ color: var(--eth-color-text-secondary);
79
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
80
+ line-height: 1.4286;
81
+ margin: var(--eth-space-xs) 0 0;
82
+ overflow-wrap: anywhere;
83
+ }
84
+
85
+ .eth-id-identity-card__meta,
86
+ .eth-identity-card__meta {
87
+ align-items: center;
88
+ display: flex;
89
+ flex-wrap: wrap;
90
+ column-gap: var(--eth-space-sm);
91
+ margin-block-start: var(--eth-space-sm);
92
+ row-gap: var(--eth-space-xs);
93
+ }
94
+
95
+ .eth-id-identity-card__meta .cds--tag,
96
+ .eth-identity-card__meta .cds--tag,
97
+ .eth-id-identity-card__meta .eth-badge,
98
+ .eth-identity-card__meta .eth-badge {
99
+ margin: 0;
100
+ }
101
+
102
+ .eth-id-identity-card__body > .eth-actions,
103
+ .eth-identity-card__body > .eth-actions {
104
+ justify-content: flex-end;
105
+ justify-self: end;
106
+ min-inline-size: max-content;
107
+ }
108
+
109
+ .eth-id-account-menu,
110
+ .eth-identity-account-menu,
111
+ .eth-id-organization-switcher,
112
+ .eth-identity-organization-switcher {
113
+ position: relative;
114
+ }
115
+
116
+ .eth-id-account-menu .eth-popover summary,
117
+ .eth-identity-account-menu .eth-popover summary,
118
+ .eth-id-organization-switcher .eth-popover summary,
119
+ .eth-identity-organization-switcher .eth-popover summary,
120
+ .eth-id-group-picker .eth-popover summary,
121
+ .eth-identity-group-picker .eth-popover summary,
122
+ .eth-id-user-picker .eth-popover summary,
123
+ .eth-identity-user-picker .eth-popover summary {
124
+ align-items: center;
125
+ background: var(--eth-color-layer-01);
126
+ border: 1px solid var(--eth-color-border-subtle);
127
+ border-radius: 0;
128
+ color: var(--eth-color-text-primary);
129
+ cursor: pointer;
130
+ display: inline-flex;
131
+ min-block-size: var(--eth-space-2xl);
132
+ padding: 0 var(--eth-space-md);
133
+ transition:
134
+ background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
135
+ border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
136
+ }
137
+
138
+ .eth-id-account-menu .eth-popover summary:hover,
139
+ .eth-identity-account-menu .eth-popover summary:hover,
140
+ .eth-id-organization-switcher .eth-popover summary:hover,
141
+ .eth-identity-organization-switcher .eth-popover summary:hover,
142
+ .eth-id-group-picker .eth-popover summary:hover,
143
+ .eth-identity-group-picker .eth-popover summary:hover,
144
+ .eth-id-user-picker .eth-popover summary:hover,
145
+ .eth-identity-user-picker .eth-popover summary:hover {
146
+ background: var(--eth-color-layer-hover);
147
+ }
148
+
149
+ .eth-id-account-menu .eth-popover summary:focus-visible,
150
+ .eth-identity-account-menu .eth-popover summary:focus-visible,
151
+ .eth-id-organization-switcher .eth-popover summary:focus-visible,
152
+ .eth-identity-organization-switcher .eth-popover summary:focus-visible,
153
+ .eth-id-group-picker .eth-popover summary:focus-visible,
154
+ .eth-identity-group-picker .eth-popover summary:focus-visible,
155
+ .eth-id-user-picker .eth-popover summary:focus-visible,
156
+ .eth-identity-user-picker .eth-popover summary:focus-visible {
157
+ outline: 2px solid var(--eth-color-focus);
158
+ outline-offset: -2px;
159
+ }
160
+
161
+ .eth-id-account-menu__content,
162
+ .eth-identity-account-menu__content,
163
+ .eth-id-organization-switcher__list,
164
+ .eth-identity-organization-switcher__list,
165
+ .eth-popover__content {
166
+ background: var(--eth-color-layer-01);
167
+ border: 1px solid var(--eth-color-border-subtle);
168
+ border-radius: 0;
169
+ box-shadow: var(--eth-shadow-overlay);
170
+ color: var(--eth-color-text-primary);
171
+ display: grid;
172
+ gap: var(--eth-space-sm);
173
+ margin-block-start: var(--eth-space-xs);
174
+ min-inline-size: 16rem;
175
+ padding: var(--eth-space-sm);
176
+ position: absolute;
177
+ z-index: 600;
178
+ }
179
+
180
+ .eth-id-account-menu__content p,
181
+ .eth-identity-account-menu__content p {
182
+ color: var(--eth-color-text-secondary);
183
+ margin: var(--eth-space-xs) 0 var(--eth-space-sm);
184
+ }
185
+
186
+ .eth-identity-account-menu .eth-popover summary {
187
+ min-block-size: 3rem;
188
+ padding: 0;
189
+ }
190
+
191
+ .eth-identity-account-menu .eth-popover summary::-webkit-details-marker {
192
+ display: none;
193
+ }
194
+
195
+ .eth-identity-account-menu .eth-popover summary::marker {
196
+ content: "";
197
+ }
198
+
199
+ .eth-identity-account-menu .eth-popover[open] summary {
200
+ border-color: var(--eth-color-interactive-primary);
201
+ box-shadow: inset 0 -2px 0 var(--eth-color-focus);
202
+ }
203
+
204
+ .eth-identity-account-menu__trigger {
205
+ align-items: center;
206
+ display: grid;
207
+ gap: var(--eth-space-sm);
208
+ grid-template-columns: auto minmax(0, 1fr) auto;
209
+ inline-size: 100%;
210
+ min-inline-size: 14rem;
211
+ padding: var(--eth-space-sm) var(--eth-space-md);
212
+ }
213
+
214
+ .eth-identity-account-menu__avatar {
215
+ align-items: center;
216
+ background: var(--eth-color-layer-02);
217
+ border: 1px solid var(--eth-color-border-subtle);
218
+ border-radius: 0;
219
+ color: var(--eth-color-text-primary);
220
+ display: inline-flex;
221
+ flex: 0 0 auto;
222
+ font-size: calc(0.8125rem * var(--eth-text-scale, 1));
223
+ font-weight: 600;
224
+ block-size: var(--eth-space-3xl);
225
+ inline-size: var(--eth-space-3xl);
226
+ justify-content: center;
227
+ object-fit: cover;
228
+ }
229
+
230
+ .eth-identity-account-menu__trigger-copy,
231
+ .eth-identity-account-menu__profile-copy {
232
+ min-width: 0;
233
+ }
234
+
235
+ .eth-identity-account-menu__trigger-label,
236
+ .eth-identity-account-menu__profile strong {
237
+ color: var(--eth-color-text-primary);
238
+ display: block;
239
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
240
+ font-weight: 600;
241
+ line-height: 1.2857;
242
+ overflow: hidden;
243
+ text-overflow: ellipsis;
244
+ white-space: nowrap;
245
+ }
246
+
247
+ .eth-identity-account-menu__trigger-meta {
248
+ color: var(--eth-color-text-secondary);
249
+ display: block;
250
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
251
+ line-height: 1.333;
252
+ margin-block-start: var(--eth-space-2xs);
253
+ overflow: hidden;
254
+ text-overflow: ellipsis;
255
+ white-space: nowrap;
256
+ }
257
+
258
+ .eth-identity-account-menu__chevron {
259
+ border-block-end: 1.5px solid currentcolor;
260
+ border-inline-end: 1.5px solid currentcolor;
261
+ block-size: 0.5rem;
262
+ color: var(--eth-color-text-secondary);
263
+ inline-size: 0.5rem;
264
+ transform: rotate(45deg) translateY(-0.125rem);
265
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
266
+ }
267
+
268
+ .eth-identity-account-menu .eth-popover[open] .eth-identity-account-menu__chevron {
269
+ transform: rotate(225deg) translate(-0.125rem, -0.125rem);
270
+ }
271
+
272
+ .eth-identity-account-menu__content {
273
+ gap: 0;
274
+ inline-size: min(20rem, calc(100vw - var(--eth-space-xl)));
275
+ overflow: hidden;
276
+ padding: 0;
277
+ }
278
+
279
+ .eth-identity-account-menu__profile {
280
+ align-items: start;
281
+ border-block-end: 1px solid var(--eth-color-border-subtle);
282
+ display: grid;
283
+ gap: var(--eth-space-sm);
284
+ grid-template-columns: auto minmax(0, 1fr);
285
+ padding: var(--eth-space-lg);
286
+ }
287
+
288
+ .eth-identity-account-menu__profile p {
289
+ color: var(--eth-color-text-secondary);
290
+ font-size: calc(0.8125rem * var(--eth-text-scale, 1));
291
+ line-height: 1.3846;
292
+ margin: var(--eth-space-xs) 0 0;
293
+ overflow-wrap: anywhere;
294
+ }
295
+
296
+ .eth-identity-account-menu__meta {
297
+ align-items: center;
298
+ display: flex;
299
+ flex-wrap: wrap;
300
+ gap: var(--eth-space-xs);
301
+ margin-block-start: var(--eth-space-sm);
302
+ }
303
+
304
+ .eth-identity-account-menu__actions {
305
+ display: grid;
306
+ padding-block: var(--eth-space-xs);
307
+ }
308
+
309
+ .eth-identity-account-menu__action {
310
+ align-items: center;
311
+ background: transparent;
312
+ border: 0;
313
+ color: var(--eth-color-text-primary);
314
+ cursor: pointer;
315
+ display: flex;
316
+ font: inherit;
317
+ inline-size: 100%;
318
+ min-block-size: var(--eth-space-3xl);
319
+ padding: 0 var(--eth-space-lg);
320
+ text-align: start;
321
+ text-decoration: none;
322
+ }
323
+
324
+ .eth-identity-account-menu__action:hover {
325
+ background: var(--eth-color-layer-hover);
326
+ color: var(--eth-color-text-primary);
327
+ }
328
+
329
+ .eth-identity-account-menu__action:focus-visible {
330
+ outline: 2px solid var(--eth-color-focus);
331
+ outline-offset: -2px;
332
+ }
333
+
334
+ .eth-identity-account-menu__action--danger {
335
+ color: var(--eth-color-danger);
336
+ }
337
+
338
+ .eth-identity-account-menu__action--danger:hover {
339
+ background: var(--eth-color-layer-hover);
340
+ color: var(--eth-color-danger);
341
+ }
342
+
343
+ .eth-identity-account-menu__action:disabled,
344
+ .eth-identity-account-menu__action[aria-disabled="true"] {
345
+ color: var(--eth-color-text-helper);
346
+ cursor: not-allowed;
347
+ }
348
+
349
+ .eth-identity-account-menu__action:disabled:hover,
350
+ .eth-identity-account-menu__action[aria-disabled="true"]:hover {
351
+ background: transparent;
352
+ }
353
+
354
+ .eth-identity-organization-switcher {
355
+ inline-size: min(100%, 24rem);
356
+ }
357
+
358
+ .eth-identity-organization-switcher .eth-popover {
359
+ position: relative;
360
+ }
361
+
362
+ .eth-identity-organization-switcher .eth-popover summary {
363
+ border-color: var(--eth-color-border-strong);
364
+ inline-size: 100%;
365
+ min-block-size: 4rem;
366
+ padding: 0;
367
+ }
368
+
369
+ .eth-identity-organization-switcher .eth-popover summary::-webkit-details-marker {
370
+ display: none;
371
+ }
372
+
373
+ .eth-identity-organization-switcher .eth-popover summary::marker {
374
+ content: "";
375
+ }
376
+
377
+ .eth-identity-organization-switcher .eth-popover[open] summary {
378
+ border-color: var(--eth-color-interactive-primary);
379
+ box-shadow: inset 0 -2px 0 var(--eth-color-focus);
380
+ }
381
+
382
+ .eth-identity-organization-switcher__trigger {
383
+ align-items: center;
384
+ column-gap: var(--eth-space-sm);
385
+ display: grid;
386
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
387
+ inline-size: 100%;
388
+ min-inline-size: 18rem;
389
+ padding: var(--eth-space-sm) var(--eth-space-md);
390
+ }
391
+
392
+ .eth-identity-organization-switcher__avatar {
393
+ align-items: center;
394
+ background: var(--eth-color-layer-02);
395
+ border: 1px solid var(--eth-color-border-subtle);
396
+ color: var(--eth-color-text-primary);
397
+ display: inline-flex;
398
+ flex: 0 0 auto;
399
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
400
+ font-weight: 600;
401
+ block-size: var(--eth-space-3xl);
402
+ inline-size: var(--eth-space-3xl);
403
+ justify-content: center;
404
+ line-height: 1;
405
+ }
406
+
407
+ .eth-identity-organization-switcher__copy {
408
+ display: grid;
409
+ gap: var(--eth-space-2xs);
410
+ min-inline-size: 0;
411
+ }
412
+
413
+ .eth-identity-organization-switcher__label,
414
+ .eth-identity-organization-switcher__option-label {
415
+ color: var(--eth-color-text-primary);
416
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
417
+ font-weight: 600;
418
+ line-height: 1.2857;
419
+ overflow: hidden;
420
+ text-overflow: ellipsis;
421
+ white-space: nowrap;
422
+ }
423
+
424
+ .eth-identity-organization-switcher__meta,
425
+ .eth-identity-organization-switcher__option-meta {
426
+ color: var(--eth-color-text-secondary);
427
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
428
+ line-height: 1.333;
429
+ overflow: hidden;
430
+ text-overflow: ellipsis;
431
+ white-space: nowrap;
432
+ }
433
+
434
+ .eth-identity-organization-switcher__trigger .eth-status-dot {
435
+ justify-self: end;
436
+ max-inline-size: 7rem;
437
+ min-inline-size: max-content;
438
+ }
439
+
440
+ .eth-identity-organization-switcher__chevron {
441
+ border-block-end: 1.5px solid currentcolor;
442
+ border-inline-end: 1.5px solid currentcolor;
443
+ block-size: 0.5rem;
444
+ color: var(--eth-color-text-secondary);
445
+ inline-size: 0.5rem;
446
+ transform: rotate(45deg) translateY(-0.125rem);
447
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
448
+ }
449
+
450
+ .eth-identity-organization-switcher .eth-popover[open] .eth-identity-organization-switcher__chevron {
451
+ transform: rotate(225deg) translate(-0.125rem, -0.125rem);
452
+ }
453
+
454
+ .eth-identity-organization-switcher__list {
455
+ gap: 0;
456
+ inline-size: 100%;
457
+ inset-block-start: calc(100% + var(--eth-space-xs));
458
+ inset-inline-start: 0;
459
+ margin-block-start: 0;
460
+ max-inline-size: calc(100vw - var(--eth-space-xl));
461
+ min-inline-size: 22rem;
462
+ overflow: hidden;
463
+ padding: 0;
464
+ }
465
+
466
+ .eth-identity-organization-switcher__option {
467
+ align-items: center;
468
+ background: var(--eth-color-layer-01);
469
+ border: 0;
470
+ border-block-end: 1px solid var(--eth-color-border-subtle);
471
+ color: var(--eth-color-text-primary);
472
+ cursor: pointer;
473
+ display: grid;
474
+ font: inherit;
475
+ gap: var(--eth-space-md);
476
+ grid-template-columns: minmax(0, 1fr) auto;
477
+ inline-size: 100%;
478
+ min-block-size: 4rem;
479
+ padding: var(--eth-space-sm) var(--eth-space-md);
480
+ text-align: start;
481
+ }
482
+
483
+ .eth-identity-organization-switcher__option:last-child {
484
+ border-block-end: 0;
485
+ }
486
+
487
+ .eth-identity-organization-switcher__option:hover {
488
+ background: var(--eth-color-layer-hover);
489
+ }
490
+
491
+ .eth-identity-organization-switcher__option:focus-visible {
492
+ outline: 2px solid var(--eth-color-focus);
493
+ outline-offset: -2px;
494
+ }
495
+
496
+ .eth-identity-organization-switcher__option[aria-checked="true"] {
497
+ background: var(--eth-color-layer-selected);
498
+ }
499
+
500
+ .eth-identity-organization-switcher__option[aria-checked="true"]:hover {
501
+ background: var(--eth-color-layer-selected);
502
+ }
503
+
504
+ .eth-identity-organization-switcher__option-main {
505
+ display: grid;
506
+ gap: var(--eth-space-2xs);
507
+ min-inline-size: 0;
508
+ }
509
+
510
+ .eth-identity-organization-switcher__option-state {
511
+ align-items: center;
512
+ display: inline-flex;
513
+ gap: var(--eth-space-sm);
514
+ justify-self: end;
515
+ min-inline-size: max-content;
516
+ }
517
+
518
+ .eth-identity-organization-switcher__option-check {
519
+ block-size: 1rem;
520
+ border: 1px solid transparent;
521
+ display: inline-flex;
522
+ inline-size: 1rem;
523
+ position: relative;
524
+ }
525
+
526
+ .eth-identity-organization-switcher__option[aria-checked="true"]
527
+ .eth-identity-organization-switcher__option-check {
528
+ background: var(--eth-color-text-primary);
529
+ border-color: var(--eth-color-text-primary);
530
+ }
531
+
532
+ .eth-identity-organization-switcher__option[aria-checked="true"]
533
+ .eth-identity-organization-switcher__option-check::after {
534
+ border-block-end: 2px solid var(--eth-color-background);
535
+ border-inline-end: 2px solid var(--eth-color-background);
536
+ block-size: 0.5625rem;
537
+ content: "";
538
+ inline-size: 0.3125rem;
539
+ inset-block-start: 0.0625rem;
540
+ inset-inline-start: 0.3125rem;
541
+ position: absolute;
542
+ transform: rotate(45deg);
543
+ }
544
+
545
+ .eth-identity-organization-switcher__empty {
546
+ color: var(--eth-color-text-secondary);
547
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
548
+ line-height: 1.4286;
549
+ min-block-size: 3rem;
550
+ padding: var(--eth-space-md);
551
+ }
552
+
553
+ @media (max-width: 31.25rem) {
554
+ .eth-identity-organization-switcher,
555
+ .eth-identity-organization-switcher__trigger,
556
+ .eth-identity-organization-switcher__list {
557
+ min-inline-size: 0;
558
+ inline-size: 100%;
559
+ }
560
+
561
+ .eth-identity-organization-switcher__trigger {
562
+ grid-template-columns: auto minmax(0, 1fr) auto;
563
+ }
564
+
565
+ .eth-identity-organization-switcher__trigger .eth-status-dot {
566
+ display: none;
567
+ }
568
+ }
569
+
570
+ .eth-id-approval-policy-editor,
571
+ .eth-identity-approval-policy-editor,
572
+ .eth-id-invite-user,
573
+ .eth-identity-invite-user {
574
+ display: grid;
575
+ gap: var(--eth-space-lg);
576
+ }
577
+
578
+ .eth-identity-invite-user {
579
+ inline-size: min(100%, 48rem);
580
+ }
581
+
582
+ .eth-id-approval-policy-editor__layout,
583
+ .eth-identity-approval-policy-editor__layout {
584
+ align-items: start;
585
+ display: grid;
586
+ gap: var(--eth-space-xl);
587
+ grid-template-columns: minmax(18rem, 32rem) minmax(16rem, 1fr);
588
+ }
589
+
590
+ .eth-id-approval-policy-editor__fields,
591
+ .eth-identity-approval-policy-editor__fields,
592
+ .eth-id-invite-user form,
593
+ .eth-identity-invite-user form {
594
+ display: grid;
595
+ gap: var(--eth-space-lg);
596
+ }
597
+
598
+ .eth-identity-invite-user form {
599
+ gap: var(--eth-space-xl);
600
+ }
601
+
602
+ .eth-identity-invite-user__layout {
603
+ align-items: start;
604
+ display: grid;
605
+ gap: var(--eth-space-xl);
606
+ grid-template-columns: minmax(18rem, 1fr) minmax(14rem, 0.72fr);
607
+ }
608
+
609
+ .eth-identity-invite-user__fields {
610
+ display: grid;
611
+ gap: var(--eth-space-lg);
612
+ min-inline-size: 0;
613
+ }
614
+
615
+ .eth-id-approval-policy-editor__fields .cds--form-item,
616
+ .eth-identity-approval-policy-editor__fields .cds--form-item,
617
+ .eth-id-approval-policy-editor__fields .cds--text-input-wrapper,
618
+ .eth-identity-approval-policy-editor__fields .cds--text-input-wrapper,
619
+ .eth-id-approval-policy-editor__fields .cds--text-input,
620
+ .eth-identity-approval-policy-editor__fields .cds--text-input,
621
+ .eth-id-approval-policy-editor__fields .cds--text-area,
622
+ .eth-identity-approval-policy-editor__fields .cds--text-area,
623
+ .eth-id-approval-policy-editor__fields .cds--number,
624
+ .eth-identity-approval-policy-editor__fields .cds--number,
625
+ .eth-identity-invite-user__fields .cds--form-item,
626
+ .eth-identity-invite-user__fields .cds--text-input-wrapper,
627
+ .eth-identity-invite-user__fields .cds--text-input,
628
+ .eth-identity-invite-user__fields .cds--select,
629
+ .eth-identity-invite-user__fields .cds--select-input {
630
+ inline-size: 100%;
631
+ }
632
+
633
+ .eth-identity-invite-user__summary {
634
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
635
+ color: var(--eth-color-text-primary);
636
+ min-inline-size: 0;
637
+ padding-inline-start: var(--eth-space-lg);
638
+ }
639
+
640
+ .eth-identity-invite-user__summary-label {
641
+ color: var(--eth-color-text-secondary);
642
+ display: block;
643
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
644
+ font-weight: 600;
645
+ line-height: 1.333;
646
+ margin-block-end: var(--eth-space-sm);
647
+ text-transform: uppercase;
648
+ }
649
+
650
+ .eth-identity-invite-user__summary dl {
651
+ display: grid;
652
+ gap: var(--eth-space-md);
653
+ margin: 0;
654
+ }
655
+
656
+ .eth-identity-invite-user__summary div {
657
+ display: grid;
658
+ gap: var(--eth-space-2xs);
659
+ min-inline-size: 0;
660
+ }
661
+
662
+ .eth-identity-invite-user__summary dt {
663
+ color: var(--eth-color-text-secondary);
664
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
665
+ line-height: 1.333;
666
+ }
667
+
668
+ .eth-identity-invite-user__summary dd {
669
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
670
+ font-weight: 600;
671
+ line-height: 1.4286;
672
+ margin: 0;
673
+ min-inline-size: 0;
674
+ overflow: hidden;
675
+ text-overflow: ellipsis;
676
+ white-space: nowrap;
677
+ }
678
+
679
+ .eth-identity-invite-user__actions {
680
+ align-items: center;
681
+ display: flex;
682
+ flex-wrap: wrap;
683
+ gap: var(--eth-space-md);
684
+ }
685
+
686
+ .eth-identity-invite-user__actions p {
687
+ color: var(--eth-color-text-secondary);
688
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
689
+ line-height: 1.4286;
690
+ margin: 0;
691
+ max-inline-size: 32rem;
692
+ }
693
+
694
+ .eth-id-approval-policy-editor__summary,
695
+ .eth-identity-approval-policy-editor__summary {
696
+ background: var(--eth-color-layer-02);
697
+ border: 1px solid var(--eth-color-border-subtle);
698
+ color: var(--eth-color-text-primary);
699
+ display: grid;
700
+ gap: var(--eth-space-lg);
701
+ padding: var(--eth-space-lg);
702
+ }
703
+
704
+ .eth-id-approval-policy-editor__summary-header,
705
+ .eth-identity-approval-policy-editor__summary-header {
706
+ align-items: center;
707
+ display: flex;
708
+ gap: var(--eth-space-sm);
709
+ justify-content: space-between;
710
+ }
711
+
712
+ .eth-id-approval-policy-editor__summary-header h3,
713
+ .eth-identity-approval-policy-editor__summary-header h3 {
714
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
715
+ font-weight: 600;
716
+ line-height: 1.2857;
717
+ margin: 0;
718
+ }
719
+
720
+ .eth-id-approval-policy-editor__summary-grid,
721
+ .eth-identity-approval-policy-editor__summary-grid {
722
+ border: 1px solid var(--eth-color-border-subtle);
723
+ display: grid;
724
+ grid-template-columns: repeat(3, minmax(0, 1fr));
725
+ margin: 0;
726
+ }
727
+
728
+ .eth-id-approval-policy-editor__summary-grid div,
729
+ .eth-identity-approval-policy-editor__summary-grid div {
730
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
731
+ min-inline-size: 0;
732
+ padding: var(--eth-space-md);
733
+ }
734
+
735
+ .eth-id-approval-policy-editor__summary-grid div:last-child,
736
+ .eth-identity-approval-policy-editor__summary-grid div:last-child {
737
+ border-inline-end: 0;
738
+ }
739
+
740
+ .eth-id-approval-policy-editor__summary-grid dt,
741
+ .eth-identity-approval-policy-editor__summary-grid dt,
742
+ .eth-id-approval-policy-editor__approvers > span,
743
+ .eth-identity-approval-policy-editor__approvers > span {
744
+ color: var(--eth-color-text-secondary);
745
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
746
+ line-height: 1.333;
747
+ }
748
+
749
+ .eth-id-approval-policy-editor__summary-grid dd,
750
+ .eth-identity-approval-policy-editor__summary-grid dd {
751
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
752
+ font-weight: 600;
753
+ line-height: 1.4;
754
+ margin: var(--eth-space-xs) 0 0;
755
+ overflow-wrap: anywhere;
756
+ }
757
+
758
+ .eth-id-approval-policy-editor__approvers,
759
+ .eth-identity-approval-policy-editor__approvers {
760
+ display: grid;
761
+ gap: var(--eth-space-sm);
762
+ }
763
+
764
+ .eth-id-approval-policy-editor__approvers p,
765
+ .eth-identity-approval-policy-editor__approvers p {
766
+ color: var(--eth-color-text-secondary);
767
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
768
+ line-height: 1.4286;
769
+ margin: 0;
770
+ }
771
+
772
+ .eth-id-approval-policy-editor__approver-list,
773
+ .eth-identity-approval-policy-editor__approver-list {
774
+ align-items: center;
775
+ display: flex;
776
+ flex-wrap: wrap;
777
+ gap: var(--eth-space-xs);
778
+ }
779
+
780
+ .eth-id-approval-policy-editor__rules,
781
+ .eth-identity-approval-policy-editor__rules {
782
+ border-block-start: 1px solid var(--eth-color-border-subtle);
783
+ padding-block-start: var(--eth-space-lg);
784
+ }
785
+
786
+ .eth-id-audit-trail,
787
+ .eth-identity-audit-trail {
788
+ background: var(--eth-color-layer-01);
789
+ border: 1px solid var(--eth-color-border-subtle);
790
+ border-radius: 0;
791
+ color: var(--eth-color-text-primary);
792
+ gap: 0;
793
+ inline-size: 100%;
794
+ overflow: hidden;
795
+ padding: 0;
796
+ }
797
+
798
+ .eth-id-audit-trail > .eth-surface__header,
799
+ .eth-identity-audit-trail > .eth-surface__header {
800
+ border-block-end: 1px solid var(--eth-color-border-subtle);
801
+ padding: var(--eth-space-lg);
802
+ }
803
+
804
+ .eth-id-audit-trail .eth-meta-grid,
805
+ .eth-identity-audit-trail .eth-meta-grid {
806
+ border-block: 0 1px solid var(--eth-color-border-subtle);
807
+ border-inline: 0;
808
+ grid-template-columns: repeat(3, minmax(0, 1fr));
809
+ }
810
+
811
+ .eth-id-audit-trail .eth-meta-grid div,
812
+ .eth-identity-audit-trail .eth-meta-grid div {
813
+ background: var(--eth-color-layer-02);
814
+ padding-block: var(--eth-space-sm);
815
+ }
816
+
817
+ .eth-id-audit-trail .eth-data-table-wrap,
818
+ .eth-identity-audit-trail .eth-data-table-wrap {
819
+ inline-size: 100%;
820
+ overflow-x: auto;
821
+ }
822
+
823
+ .eth-id-audit-trail .eth-data-table,
824
+ .eth-identity-audit-trail .eth-data-table {
825
+ border-collapse: collapse;
826
+ inline-size: 100%;
827
+ min-inline-size: 42rem;
828
+ table-layout: fixed;
829
+ }
830
+
831
+ .eth-id-audit-trail .eth-data-table th,
832
+ .eth-id-audit-trail .eth-data-table td,
833
+ .eth-identity-audit-trail .eth-data-table th,
834
+ .eth-identity-audit-trail .eth-data-table td {
835
+ border-block-end: 1px solid var(--eth-color-border-subtle);
836
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
837
+ line-height: 1.4286;
838
+ padding: var(--eth-space-sm) var(--eth-space-md);
839
+ text-align: start;
840
+ vertical-align: middle;
841
+ }
842
+
843
+ .eth-id-audit-trail .eth-data-table thead th,
844
+ .eth-identity-audit-trail .eth-data-table thead th {
845
+ background: var(--eth-color-layer-02);
846
+ color: var(--eth-color-text-secondary);
847
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
848
+ font-weight: 600;
849
+ line-height: 1.3333;
850
+ }
851
+
852
+ .eth-id-audit-trail .eth-data-table tbody tr:hover,
853
+ .eth-identity-audit-trail .eth-data-table tbody tr:hover {
854
+ background: var(--eth-color-layer-hover);
855
+ }
856
+
857
+ .eth-id-audit-trail .eth-data-table tbody tr:last-child td,
858
+ .eth-identity-audit-trail .eth-data-table tbody tr:last-child td {
859
+ border-block-end: 0;
860
+ }
861
+
862
+ .eth-id-audit-trail time,
863
+ .eth-identity-audit-trail time,
864
+ .eth-id-audit-trail td:first-child,
865
+ .eth-identity-audit-trail td:first-child {
866
+ color: var(--eth-color-text-helper);
867
+ }
868
+
869
+ .eth-id-audit-trail__time,
870
+ .eth-identity-audit-trail__time {
871
+ display: inline-block;
872
+ font-variant-numeric: tabular-nums;
873
+ white-space: nowrap;
874
+ }
875
+
876
+ .eth-id-audit-trail__actor,
877
+ .eth-identity-audit-trail__actor,
878
+ .eth-id-audit-trail__action,
879
+ .eth-identity-audit-trail__action,
880
+ .eth-id-audit-trail__resource,
881
+ .eth-identity-audit-trail__resource {
882
+ display: inline-block;
883
+ max-inline-size: 100%;
884
+ overflow-wrap: anywhere;
885
+ }
886
+
887
+ .eth-id-audit-trail__actor,
888
+ .eth-identity-audit-trail__actor,
889
+ .eth-id-audit-trail__action,
890
+ .eth-identity-audit-trail__action {
891
+ color: var(--eth-color-text-primary);
892
+ font-weight: 600;
893
+ }
894
+
895
+ .eth-id-audit-trail__resource,
896
+ .eth-identity-audit-trail__resource {
897
+ color: var(--eth-color-text-secondary);
898
+ }
899
+
900
+ .eth-id-audit-trail__outcome,
901
+ .eth-identity-audit-trail__outcome {
902
+ align-items: center;
903
+ display: inline-flex;
904
+ min-inline-size: 0;
905
+ }
906
+
907
+ .eth-id-audit-trail__outcome .cds--tag,
908
+ .eth-identity-audit-trail__outcome .cds--tag {
909
+ margin: 0;
910
+ }
911
+
912
+ .eth-id-audit-trail > .eth-state,
913
+ .eth-identity-audit-trail > .eth-state {
914
+ margin: var(--eth-space-lg);
915
+ }
916
+
917
+ .eth-id-group-picker,
918
+ .eth-identity-group-picker,
919
+ .eth-id-user-picker,
920
+ .eth-identity-user-picker {
921
+ display: grid;
922
+ gap: var(--eth-space-sm);
923
+ }
924
+
925
+ .eth-identity-group-picker {
926
+ inline-size: min(100%, 42rem);
927
+ }
928
+
929
+ .eth-identity-group-picker__control {
930
+ background: var(--eth-color-layer-01);
931
+ border: 1px solid var(--eth-color-border-strong);
932
+ display: grid;
933
+ grid-template-columns: minmax(0, 1fr) auto;
934
+ min-block-size: 3rem;
935
+ position: relative;
936
+ }
937
+
938
+ .eth-identity-group-picker[data-open="true"] .eth-identity-group-picker__control {
939
+ border-color: var(--eth-color-focus);
940
+ box-shadow: inset 0 -2px 0 var(--eth-color-focus);
941
+ }
942
+
943
+ .eth-identity-group-picker__popover {
944
+ position: static;
945
+ }
946
+
947
+ .eth-identity-group-picker .eth-popover summary {
948
+ align-items: stretch;
949
+ background: transparent;
950
+ border: 0;
951
+ display: flex;
952
+ block-size: 100%;
953
+ inline-size: 100%;
954
+ min-block-size: 100%;
955
+ padding: 0;
956
+ }
957
+
958
+ .eth-identity-group-picker .eth-popover summary::-webkit-details-marker {
959
+ display: none;
960
+ }
961
+
962
+ .eth-identity-group-picker .eth-popover summary::marker {
963
+ content: "";
964
+ }
965
+
966
+ .eth-identity-group-picker .eth-popover summary:hover {
967
+ background: transparent;
968
+ }
969
+
970
+ .eth-identity-group-picker .eth-popover[open] summary {
971
+ border-color: transparent;
972
+ box-shadow: none;
973
+ }
974
+
975
+ .eth-id-group-picker__chips,
976
+ .eth-identity-group-picker__chips,
977
+ .eth-id-user-picker__chips,
978
+ .eth-identity-user-picker__chips {
979
+ align-items: center;
980
+ background: var(--eth-color-layer-01);
981
+ border: 1px solid var(--eth-color-border-subtle);
982
+ border-radius: 0;
983
+ display: flex;
984
+ flex-wrap: wrap;
985
+ gap: var(--eth-space-xs);
986
+ min-block-size: var(--eth-space-3xl);
987
+ padding: var(--eth-space-sm);
988
+ }
989
+
990
+ .eth-identity-group-picker__chips {
991
+ background: transparent;
992
+ border: 0;
993
+ min-block-size: 3rem;
994
+ min-inline-size: 0;
995
+ padding: var(--eth-space-sm) var(--eth-space-md);
996
+ }
997
+
998
+ .eth-identity-group-picker__chips .cds--tag {
999
+ margin: 0;
1000
+ max-inline-size: 100%;
1001
+ }
1002
+
1003
+ .eth-identity-group-picker__chips .cds--tag__label {
1004
+ overflow: hidden;
1005
+ text-overflow: ellipsis;
1006
+ }
1007
+
1008
+ .eth-identity-group-picker__placeholder {
1009
+ color: var(--eth-color-text-helper);
1010
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1011
+ line-height: 1.4286;
1012
+ }
1013
+
1014
+ .eth-identity-group-picker__trigger {
1015
+ align-content: center;
1016
+ background: var(--eth-color-layer-02);
1017
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1018
+ color: var(--eth-color-text-primary);
1019
+ column-gap: var(--eth-space-md);
1020
+ display: grid;
1021
+ grid-template-columns: minmax(0, 1fr) auto;
1022
+ min-block-size: 100%;
1023
+ min-inline-size: 10.5rem;
1024
+ padding: var(--eth-space-sm) var(--eth-space-md);
1025
+ }
1026
+
1027
+ .eth-identity-group-picker .eth-popover summary:hover .eth-identity-group-picker__trigger {
1028
+ background: var(--eth-color-layer-hover);
1029
+ }
1030
+
1031
+ .eth-identity-group-picker__trigger > span:first-child {
1032
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1033
+ font-weight: 600;
1034
+ line-height: 1.2857;
1035
+ overflow: hidden;
1036
+ text-overflow: ellipsis;
1037
+ white-space: nowrap;
1038
+ }
1039
+
1040
+ .eth-identity-group-picker__count {
1041
+ color: var(--eth-color-text-secondary);
1042
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1043
+ grid-column: 1;
1044
+ line-height: 1.333;
1045
+ overflow: hidden;
1046
+ text-overflow: ellipsis;
1047
+ white-space: nowrap;
1048
+ }
1049
+
1050
+ .eth-identity-group-picker__chevron {
1051
+ border-block-end: 1.5px solid currentcolor;
1052
+ border-inline-end: 1.5px solid currentcolor;
1053
+ block-size: 0.5rem;
1054
+ color: var(--eth-color-text-secondary);
1055
+ grid-column: 2;
1056
+ grid-row: 1 / span 2;
1057
+ inline-size: 0.5rem;
1058
+ justify-self: end;
1059
+ transform: rotate(45deg);
1060
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1061
+ }
1062
+
1063
+ .eth-identity-group-picker .eth-popover[open] .eth-identity-group-picker__chevron {
1064
+ transform: rotate(225deg);
1065
+ }
1066
+
1067
+ .eth-identity-group-picker[data-disabled="true"] .eth-popover summary {
1068
+ color: var(--eth-color-text-helper);
1069
+ cursor: not-allowed;
1070
+ }
1071
+
1072
+ .eth-identity-group-picker[data-disabled="true"] .eth-identity-group-picker__trigger,
1073
+ .eth-identity-group-picker[data-disabled="true"] .eth-identity-group-picker__count,
1074
+ .eth-identity-group-picker[data-disabled="true"] .eth-identity-group-picker__placeholder,
1075
+ .eth-identity-group-picker[data-disabled="true"] .eth-identity-group-picker__chevron {
1076
+ color: var(--eth-color-text-helper);
1077
+ }
1078
+
1079
+ .eth-identity-group-picker__content {
1080
+ gap: var(--eth-space-sm);
1081
+ inline-size: 100%;
1082
+ inset-block-start: calc(100% + var(--eth-space-xs));
1083
+ inset-inline-start: 0;
1084
+ margin-block-start: 0;
1085
+ max-inline-size: calc(100vw - var(--eth-space-xl));
1086
+ }
1087
+
1088
+ .eth-identity-group-picker__content .cds--form-item,
1089
+ .eth-identity-group-picker__content .cds--text-input-wrapper,
1090
+ .eth-identity-group-picker__content .cds--text-input {
1091
+ inline-size: 100%;
1092
+ }
1093
+
1094
+ .eth-id-group-picker__suggestions,
1095
+ .eth-identity-group-picker__suggestions,
1096
+ .eth-id-user-picker__suggestions,
1097
+ .eth-identity-user-picker__suggestions {
1098
+ display: grid;
1099
+ gap: var(--eth-space-xs);
1100
+ margin-block-start: var(--eth-space-sm);
1101
+ }
1102
+
1103
+ .eth-identity-group-picker__suggestions {
1104
+ border: 1px solid var(--eth-color-border-subtle);
1105
+ display: grid;
1106
+ gap: 0;
1107
+ margin-block-start: 0;
1108
+ max-block-size: 16rem;
1109
+ overflow-y: auto;
1110
+ }
1111
+
1112
+ .eth-identity-group-picker__option {
1113
+ align-items: center;
1114
+ background: var(--eth-color-layer-01);
1115
+ border: 0;
1116
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1117
+ color: var(--eth-color-text-primary);
1118
+ cursor: pointer;
1119
+ display: grid;
1120
+ font: inherit;
1121
+ gap: var(--eth-space-md);
1122
+ grid-template-columns: minmax(0, 1fr) auto;
1123
+ min-block-size: 3rem;
1124
+ padding: var(--eth-space-sm) var(--eth-space-md);
1125
+ text-align: start;
1126
+ }
1127
+
1128
+ .eth-identity-group-picker__option:last-child {
1129
+ border-block-end: 0;
1130
+ }
1131
+
1132
+ .eth-identity-group-picker__option:hover {
1133
+ background: var(--eth-color-layer-hover);
1134
+ }
1135
+
1136
+ .eth-identity-group-picker__option:focus-visible {
1137
+ outline: 2px solid var(--eth-color-focus);
1138
+ outline-offset: -2px;
1139
+ }
1140
+
1141
+ .eth-identity-group-picker__option[aria-selected="true"] {
1142
+ background: var(--eth-color-layer-selected);
1143
+ }
1144
+
1145
+ .eth-identity-group-picker__option[aria-selected="true"]:hover {
1146
+ background: var(--eth-color-layer-selected);
1147
+ }
1148
+
1149
+ .eth-identity-group-picker__option-main {
1150
+ display: grid;
1151
+ gap: var(--eth-space-2xs);
1152
+ min-inline-size: 0;
1153
+ }
1154
+
1155
+ .eth-identity-group-picker__option-label {
1156
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1157
+ font-weight: 600;
1158
+ line-height: 1.2857;
1159
+ overflow: hidden;
1160
+ text-overflow: ellipsis;
1161
+ white-space: nowrap;
1162
+ }
1163
+
1164
+ .eth-identity-group-picker__option-meta {
1165
+ color: var(--eth-color-text-secondary);
1166
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1167
+ line-height: 1.333;
1168
+ overflow: hidden;
1169
+ text-overflow: ellipsis;
1170
+ white-space: nowrap;
1171
+ }
1172
+
1173
+ .eth-identity-group-picker__option-check {
1174
+ block-size: 1rem;
1175
+ border: 1px solid transparent;
1176
+ display: inline-flex;
1177
+ inline-size: 1rem;
1178
+ position: relative;
1179
+ }
1180
+
1181
+ .eth-identity-group-picker__option[aria-selected="true"] .eth-identity-group-picker__option-check {
1182
+ background: var(--eth-color-text-primary);
1183
+ border-color: var(--eth-color-text-primary);
1184
+ }
1185
+
1186
+ .eth-identity-group-picker__option[aria-selected="true"]
1187
+ .eth-identity-group-picker__option-check::after {
1188
+ border-block-end: 2px solid var(--eth-color-background);
1189
+ border-inline-end: 2px solid var(--eth-color-background);
1190
+ block-size: 0.5625rem;
1191
+ content: "";
1192
+ inline-size: 0.3125rem;
1193
+ inset-block-start: 0.0625rem;
1194
+ inset-inline-start: 0.3125rem;
1195
+ position: absolute;
1196
+ transform: rotate(45deg);
1197
+ }
1198
+
1199
+ .eth-identity-group-picker__empty {
1200
+ color: var(--eth-color-text-secondary);
1201
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1202
+ line-height: 1.4286;
1203
+ min-block-size: 3rem;
1204
+ padding: var(--eth-space-md);
1205
+ }
1206
+
1207
+ @media (max-width: 31.25rem) {
1208
+ .eth-identity-group-picker__control {
1209
+ grid-template-columns: minmax(0, 1fr);
1210
+ }
1211
+
1212
+ .eth-identity-group-picker__popover {
1213
+ inline-size: 100%;
1214
+ }
1215
+
1216
+ .eth-identity-group-picker__trigger {
1217
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1218
+ border-inline-start: 0;
1219
+ inline-size: 100%;
1220
+ }
1221
+ }
1222
+
1223
+ .eth-identity-user-picker {
1224
+ inline-size: min(100%, 42rem);
1225
+ }
1226
+
1227
+ .eth-identity-user-picker__control {
1228
+ background: var(--eth-color-layer-01);
1229
+ border: 1px solid var(--eth-color-border-strong);
1230
+ display: grid;
1231
+ grid-template-columns: minmax(0, 1fr) auto;
1232
+ min-block-size: 3rem;
1233
+ position: relative;
1234
+ }
1235
+
1236
+ .eth-identity-user-picker[data-open="true"] .eth-identity-user-picker__control {
1237
+ border-color: var(--eth-color-focus);
1238
+ box-shadow: inset 0 -2px 0 var(--eth-color-focus);
1239
+ }
1240
+
1241
+ .eth-identity-user-picker__popover {
1242
+ position: static;
1243
+ }
1244
+
1245
+ .eth-identity-user-picker .eth-popover summary {
1246
+ align-items: stretch;
1247
+ background: transparent;
1248
+ border: 0;
1249
+ display: flex;
1250
+ block-size: 100%;
1251
+ inline-size: 100%;
1252
+ min-block-size: 100%;
1253
+ padding: 0;
1254
+ }
1255
+
1256
+ .eth-identity-user-picker .eth-popover summary::-webkit-details-marker {
1257
+ display: none;
1258
+ }
1259
+
1260
+ .eth-identity-user-picker .eth-popover summary::marker {
1261
+ content: "";
1262
+ }
1263
+
1264
+ .eth-identity-user-picker .eth-popover summary:hover {
1265
+ background: transparent;
1266
+ }
1267
+
1268
+ .eth-identity-user-picker .eth-popover[open] summary {
1269
+ border-color: transparent;
1270
+ box-shadow: none;
1271
+ }
1272
+
1273
+ .eth-identity-user-picker__chips {
1274
+ background: transparent;
1275
+ border: 0;
1276
+ min-block-size: 3rem;
1277
+ min-inline-size: 0;
1278
+ padding: var(--eth-space-sm) var(--eth-space-md);
1279
+ }
1280
+
1281
+ .eth-identity-user-picker__chips .cds--tag {
1282
+ margin: 0;
1283
+ max-inline-size: 100%;
1284
+ }
1285
+
1286
+ .eth-identity-user-picker__chips .cds--tag__label {
1287
+ overflow: hidden;
1288
+ text-overflow: ellipsis;
1289
+ }
1290
+
1291
+ .eth-identity-user-picker__placeholder {
1292
+ color: var(--eth-color-text-helper);
1293
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1294
+ line-height: 1.4286;
1295
+ }
1296
+
1297
+ .eth-identity-user-picker__trigger {
1298
+ align-content: center;
1299
+ background: var(--eth-color-layer-02);
1300
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1301
+ color: var(--eth-color-text-primary);
1302
+ column-gap: var(--eth-space-md);
1303
+ display: grid;
1304
+ grid-template-columns: minmax(0, 1fr) auto;
1305
+ min-block-size: 100%;
1306
+ min-inline-size: 10.5rem;
1307
+ padding: var(--eth-space-sm) var(--eth-space-md);
1308
+ }
1309
+
1310
+ .eth-identity-user-picker .eth-popover summary:hover .eth-identity-user-picker__trigger {
1311
+ background: var(--eth-color-layer-hover);
1312
+ }
1313
+
1314
+ .eth-identity-user-picker__trigger > span:first-child {
1315
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1316
+ font-weight: 600;
1317
+ line-height: 1.2857;
1318
+ overflow: hidden;
1319
+ text-overflow: ellipsis;
1320
+ white-space: nowrap;
1321
+ }
1322
+
1323
+ .eth-identity-user-picker__count {
1324
+ color: var(--eth-color-text-secondary);
1325
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1326
+ grid-column: 1;
1327
+ line-height: 1.333;
1328
+ overflow: hidden;
1329
+ text-overflow: ellipsis;
1330
+ white-space: nowrap;
1331
+ }
1332
+
1333
+ .eth-identity-user-picker__chevron {
1334
+ border-block-end: 1.5px solid currentcolor;
1335
+ border-inline-end: 1.5px solid currentcolor;
1336
+ block-size: 0.5rem;
1337
+ color: var(--eth-color-text-secondary);
1338
+ grid-column: 2;
1339
+ grid-row: 1 / span 2;
1340
+ inline-size: 0.5rem;
1341
+ justify-self: end;
1342
+ transform: rotate(45deg);
1343
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1344
+ }
1345
+
1346
+ .eth-identity-user-picker .eth-popover[open] .eth-identity-user-picker__chevron {
1347
+ transform: rotate(225deg);
1348
+ }
1349
+
1350
+ .eth-identity-user-picker[data-disabled="true"] .eth-popover summary {
1351
+ color: var(--eth-color-text-helper);
1352
+ cursor: not-allowed;
1353
+ }
1354
+
1355
+ .eth-identity-user-picker[data-disabled="true"] .eth-identity-user-picker__trigger,
1356
+ .eth-identity-user-picker[data-disabled="true"] .eth-identity-user-picker__count,
1357
+ .eth-identity-user-picker[data-disabled="true"] .eth-identity-user-picker__placeholder,
1358
+ .eth-identity-user-picker[data-disabled="true"] .eth-identity-user-picker__chevron {
1359
+ color: var(--eth-color-text-helper);
1360
+ }
1361
+
1362
+ .eth-identity-user-picker__content {
1363
+ gap: var(--eth-space-sm);
1364
+ inline-size: 100%;
1365
+ inset-block-start: calc(100% + var(--eth-space-xs));
1366
+ inset-inline-start: 0;
1367
+ margin-block-start: 0;
1368
+ max-inline-size: calc(100vw - var(--eth-space-xl));
1369
+ }
1370
+
1371
+ .eth-identity-user-picker__content .cds--form-item,
1372
+ .eth-identity-user-picker__content .cds--text-input-wrapper,
1373
+ .eth-identity-user-picker__content .cds--text-input {
1374
+ inline-size: 100%;
1375
+ }
1376
+
1377
+ .eth-identity-user-picker__suggestions {
1378
+ border: 1px solid var(--eth-color-border-subtle);
1379
+ display: grid;
1380
+ gap: 0;
1381
+ margin-block-start: 0;
1382
+ max-block-size: 16rem;
1383
+ overflow-y: auto;
1384
+ }
1385
+
1386
+ .eth-identity-user-picker__option {
1387
+ align-items: center;
1388
+ background: var(--eth-color-layer-01);
1389
+ border: 0;
1390
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1391
+ color: var(--eth-color-text-primary);
1392
+ cursor: pointer;
1393
+ display: grid;
1394
+ font: inherit;
1395
+ gap: var(--eth-space-md);
1396
+ grid-template-columns: minmax(0, 1fr) auto;
1397
+ min-block-size: 3rem;
1398
+ padding: var(--eth-space-sm) var(--eth-space-md);
1399
+ text-align: start;
1400
+ }
1401
+
1402
+ .eth-identity-user-picker__option:last-child {
1403
+ border-block-end: 0;
1404
+ }
1405
+
1406
+ .eth-identity-user-picker__option:hover {
1407
+ background: var(--eth-color-layer-hover);
1408
+ }
1409
+
1410
+ .eth-identity-user-picker__option:disabled {
1411
+ color: var(--eth-color-text-helper);
1412
+ cursor: not-allowed;
1413
+ }
1414
+
1415
+ .eth-identity-user-picker__option:focus-visible {
1416
+ outline: 2px solid var(--eth-color-focus);
1417
+ outline-offset: -2px;
1418
+ }
1419
+
1420
+ .eth-identity-user-picker__option[aria-selected="true"] {
1421
+ background: var(--eth-color-layer-selected);
1422
+ }
1423
+
1424
+ .eth-identity-user-picker__option[aria-selected="true"]:hover {
1425
+ background: var(--eth-color-layer-selected);
1426
+ }
1427
+
1428
+ .eth-identity-user-picker__option-main {
1429
+ display: grid;
1430
+ gap: var(--eth-space-2xs);
1431
+ min-inline-size: 0;
1432
+ }
1433
+
1434
+ .eth-identity-user-picker__option-label {
1435
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1436
+ font-weight: 600;
1437
+ line-height: 1.2857;
1438
+ overflow: hidden;
1439
+ text-overflow: ellipsis;
1440
+ white-space: nowrap;
1441
+ }
1442
+
1443
+ .eth-identity-user-picker__option-meta {
1444
+ color: var(--eth-color-text-secondary);
1445
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1446
+ line-height: 1.333;
1447
+ overflow: hidden;
1448
+ text-overflow: ellipsis;
1449
+ white-space: nowrap;
1450
+ }
1451
+
1452
+ .eth-identity-user-picker__option-check {
1453
+ block-size: 1rem;
1454
+ border: 1px solid transparent;
1455
+ display: inline-flex;
1456
+ inline-size: 1rem;
1457
+ position: relative;
1458
+ }
1459
+
1460
+ .eth-identity-user-picker__option[aria-selected="true"] .eth-identity-user-picker__option-check {
1461
+ background: var(--eth-color-text-primary);
1462
+ border-color: var(--eth-color-text-primary);
1463
+ }
1464
+
1465
+ .eth-identity-user-picker__option[aria-selected="true"]
1466
+ .eth-identity-user-picker__option-check::after {
1467
+ border-block-end: 2px solid var(--eth-color-background);
1468
+ border-inline-end: 2px solid var(--eth-color-background);
1469
+ block-size: 0.5625rem;
1470
+ content: "";
1471
+ inline-size: 0.3125rem;
1472
+ inset-block-start: 0.0625rem;
1473
+ inset-inline-start: 0.3125rem;
1474
+ position: absolute;
1475
+ transform: rotate(45deg);
1476
+ }
1477
+
1478
+ .eth-identity-user-picker__empty {
1479
+ color: var(--eth-color-text-secondary);
1480
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1481
+ line-height: 1.4286;
1482
+ min-block-size: 3rem;
1483
+ padding: var(--eth-space-md);
1484
+ }
1485
+
1486
+ @media (max-width: 31.25rem) {
1487
+ .eth-identity-user-picker__control {
1488
+ grid-template-columns: minmax(0, 1fr);
1489
+ }
1490
+
1491
+ .eth-identity-user-picker__popover {
1492
+ inline-size: 100%;
1493
+ }
1494
+
1495
+ .eth-identity-user-picker__trigger {
1496
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1497
+ border-inline-start: 0;
1498
+ inline-size: 100%;
1499
+ }
1500
+ }
1501
+
1502
+ .eth-id-permission-matrix,
1503
+ .eth-identity-permission-matrix {
1504
+ background: var(--eth-color-layer-01);
1505
+ border: 1px solid var(--eth-color-border-subtle);
1506
+ border-radius: 0;
1507
+ color: var(--eth-color-text-primary);
1508
+ inline-size: 100%;
1509
+ min-inline-size: 0;
1510
+ }
1511
+
1512
+ .eth-id-permission-matrix .eth-meta-grid,
1513
+ .eth-identity-permission-matrix .eth-meta-grid {
1514
+ background: var(--eth-color-layer-02);
1515
+ grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
1516
+ }
1517
+
1518
+ .eth-id-permission-matrix__summary,
1519
+ .eth-identity-permission-matrix__summary {
1520
+ align-items: stretch;
1521
+ background: var(--eth-color-layer-01);
1522
+ border: 1px solid var(--eth-color-border-subtle);
1523
+ display: flex;
1524
+ flex-wrap: wrap;
1525
+ min-block-size: 3rem;
1526
+ }
1527
+
1528
+ .eth-id-permission-matrix__summary-item,
1529
+ .eth-identity-permission-matrix__summary-item {
1530
+ align-items: center;
1531
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
1532
+ color: var(--eth-color-text-secondary);
1533
+ display: inline-flex;
1534
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1535
+ gap: var(--eth-space-xs);
1536
+ line-height: 1.4286;
1537
+ min-block-size: 3rem;
1538
+ padding: 0 var(--eth-space-md);
1539
+ }
1540
+
1541
+ .eth-id-permission-matrix__summary-item::before,
1542
+ .eth-identity-permission-matrix__summary-item::before {
1543
+ block-size: 0.625rem;
1544
+ content: "";
1545
+ flex: 0 0 auto;
1546
+ inline-size: 0.625rem;
1547
+ }
1548
+
1549
+ .eth-id-permission-matrix__summary-item strong,
1550
+ .eth-identity-permission-matrix__summary-item strong {
1551
+ color: var(--eth-color-text-primary);
1552
+ font-weight: 600;
1553
+ }
1554
+
1555
+ .eth-id-permission-matrix__summary-item--allow::before,
1556
+ .eth-identity-permission-matrix__summary-item--allow::before {
1557
+ background: var(--eth-color-success);
1558
+ }
1559
+
1560
+ .eth-id-permission-matrix__summary-item--deny::before,
1561
+ .eth-identity-permission-matrix__summary-item--deny::before {
1562
+ background: var(--eth-color-danger);
1563
+ }
1564
+
1565
+ .eth-id-permission-matrix__summary-item--inherit::before,
1566
+ .eth-identity-permission-matrix__summary-item--inherit::before {
1567
+ background: transparent;
1568
+ border: 1px solid var(--eth-color-border-strong);
1569
+ }
1570
+
1571
+ .eth-id-permission-matrix__mode,
1572
+ .eth-identity-permission-matrix__mode {
1573
+ align-items: center;
1574
+ background: var(--eth-color-layer-02);
1575
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1576
+ color: var(--eth-color-text-secondary);
1577
+ display: inline-flex;
1578
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1579
+ font-weight: 600;
1580
+ line-height: 1.3333;
1581
+ margin-inline-start: auto;
1582
+ padding: 0 var(--eth-space-md);
1583
+ text-transform: uppercase;
1584
+ }
1585
+
1586
+ .eth-id-permission-matrix__table-wrap,
1587
+ .eth-identity-permission-matrix__table-wrap {
1588
+ background: var(--eth-color-layer-01);
1589
+ border: 1px solid var(--eth-color-border-subtle);
1590
+ inline-size: 100%;
1591
+ min-inline-size: 0;
1592
+ overflow-x: auto;
1593
+ }
1594
+
1595
+ .eth-id-permission-matrix__table,
1596
+ .eth-identity-permission-matrix__table {
1597
+ border-collapse: collapse;
1598
+ color: var(--eth-color-text-primary);
1599
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1600
+ inline-size: 100%;
1601
+ line-height: 1.4286;
1602
+ min-inline-size: 46rem;
1603
+ table-layout: fixed;
1604
+ }
1605
+
1606
+ .eth-id-permission-matrix__caption,
1607
+ .eth-identity-permission-matrix__caption {
1608
+ block-size: 1px;
1609
+ clip: rect(0 0 0 0);
1610
+ clip-path: inset(50%);
1611
+ inline-size: 1px;
1612
+ overflow: hidden;
1613
+ position: absolute;
1614
+ white-space: nowrap;
1615
+ }
1616
+
1617
+ .eth-id-permission-matrix__table th,
1618
+ .eth-id-permission-matrix__table td,
1619
+ .eth-identity-permission-matrix__table th,
1620
+ .eth-identity-permission-matrix__table td {
1621
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1622
+ padding: var(--eth-space-md) var(--eth-space-lg);
1623
+ text-align: start;
1624
+ vertical-align: middle;
1625
+ }
1626
+
1627
+ .eth-id-permission-matrix__table thead th,
1628
+ .eth-identity-permission-matrix__table thead th {
1629
+ background: var(--eth-color-layer-02);
1630
+ color: var(--eth-color-text-secondary);
1631
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1632
+ font-weight: 600;
1633
+ line-height: 1.3333;
1634
+ }
1635
+
1636
+ .eth-id-permission-matrix__table thead tr:first-child th,
1637
+ .eth-identity-permission-matrix__table thead tr:first-child th {
1638
+ border-block-end-color: var(--eth-color-border-strong);
1639
+ color: var(--eth-color-text-primary);
1640
+ }
1641
+
1642
+ .eth-id-permission-matrix__subject-col,
1643
+ .eth-identity-permission-matrix__subject-col,
1644
+ .eth-id-permission-matrix__subject-heading,
1645
+ .eth-identity-permission-matrix__subject-heading,
1646
+ .eth-id-permission-matrix__subject,
1647
+ .eth-identity-permission-matrix__subject {
1648
+ inline-size: 13rem;
1649
+ }
1650
+
1651
+ .eth-id-permission-matrix__table tbody th,
1652
+ .eth-identity-permission-matrix__table tbody th,
1653
+ .eth-id-permission-matrix__subject-col,
1654
+ .eth-identity-permission-matrix__subject-col {
1655
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
1656
+ position: sticky;
1657
+ inset-inline-start: 0;
1658
+ z-index: 1;
1659
+ }
1660
+
1661
+ .eth-id-permission-matrix__subject-col,
1662
+ .eth-identity-permission-matrix__subject-col {
1663
+ z-index: 2;
1664
+ }
1665
+
1666
+ .eth-id-permission-matrix__table tbody th,
1667
+ .eth-identity-permission-matrix__table tbody th {
1668
+ background: var(--eth-color-layer-01);
1669
+ color: var(--eth-color-text-primary);
1670
+ font-weight: 400;
1671
+ }
1672
+
1673
+ .eth-id-permission-matrix__subject-label,
1674
+ .eth-identity-permission-matrix__subject-label,
1675
+ .eth-id-permission-matrix__action-label,
1676
+ .eth-identity-permission-matrix__action-label {
1677
+ color: var(--eth-color-text-primary);
1678
+ display: block;
1679
+ }
1680
+
1681
+ .eth-id-permission-matrix__subject-label,
1682
+ .eth-identity-permission-matrix__subject-label {
1683
+ font-weight: 600;
1684
+ max-inline-size: 100%;
1685
+ overflow: hidden;
1686
+ text-overflow: ellipsis;
1687
+ white-space: nowrap;
1688
+ }
1689
+
1690
+ .eth-id-permission-matrix__table tbody th small,
1691
+ .eth-identity-permission-matrix__table tbody th small {
1692
+ color: var(--eth-color-text-helper);
1693
+ display: block;
1694
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1695
+ font-weight: 400;
1696
+ margin-block-start: var(--eth-space-2xs);
1697
+ overflow: hidden;
1698
+ text-overflow: ellipsis;
1699
+ white-space: nowrap;
1700
+ }
1701
+
1702
+ .eth-id-permission-matrix__action-meta,
1703
+ .eth-identity-permission-matrix__action-meta {
1704
+ color: var(--eth-color-text-helper);
1705
+ display: flex;
1706
+ flex-wrap: wrap;
1707
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1708
+ font-weight: 400;
1709
+ gap: var(--eth-space-xs);
1710
+ line-height: 1.3333;
1711
+ margin-block-start: var(--eth-space-xs);
1712
+ }
1713
+
1714
+ .eth-id-permission-matrix__action-meta span,
1715
+ .eth-identity-permission-matrix__action-meta span {
1716
+ background: var(--eth-color-layer-02);
1717
+ padding: 0 var(--eth-space-xs);
1718
+ }
1719
+
1720
+ .eth-id-permission-matrix__cell,
1721
+ .eth-identity-permission-matrix__cell,
1722
+ .eth-id-permission-matrix td,
1723
+ .eth-identity-permission-matrix td {
1724
+ --eth-permission-accent: transparent;
1725
+
1726
+ block-size: 3rem;
1727
+ box-shadow: inset 0.1875rem 0 var(--eth-permission-accent);
1728
+ min-inline-size: 8rem;
1729
+ position: relative;
1730
+ text-align: center;
1731
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1732
+ }
1733
+
1734
+ .eth-id-permission-matrix__cell[data-permission-value="allow"],
1735
+ .eth-identity-permission-matrix__cell[data-permission-value="allow"] {
1736
+ --eth-permission-accent: var(--eth-color-success);
1737
+ }
1738
+
1739
+ .eth-id-permission-matrix__cell[data-permission-value="deny"],
1740
+ .eth-identity-permission-matrix__cell[data-permission-value="deny"] {
1741
+ --eth-permission-accent: var(--eth-color-danger);
1742
+ }
1743
+
1744
+ .eth-id-permission-matrix__cell[data-permission-value="inherit"],
1745
+ .eth-identity-permission-matrix__cell[data-permission-value="inherit"] {
1746
+ --eth-permission-accent: var(--eth-color-border-subtle);
1747
+ }
1748
+
1749
+ .eth-id-permission-matrix__select.cds--form-item,
1750
+ .eth-identity-permission-matrix__select.cds--form-item,
1751
+ .eth-id-permission-matrix__select .cds--select,
1752
+ .eth-identity-permission-matrix__select .cds--select,
1753
+ .eth-id-permission-matrix__select .cds--select-input,
1754
+ .eth-identity-permission-matrix__select .cds--select-input {
1755
+ inline-size: min(100%, 9.5rem);
1756
+ max-inline-size: 9.5rem;
1757
+ }
1758
+
1759
+ .eth-id-permission-matrix__select.cds--form-item,
1760
+ .eth-identity-permission-matrix__select.cds--form-item {
1761
+ inline-size: 100%;
1762
+ margin-block-end: 0;
1763
+ min-inline-size: 8rem;
1764
+ }
1765
+
1766
+ .eth-id-permission-matrix__select .cds--select-input,
1767
+ .eth-identity-permission-matrix__select .cds--select-input {
1768
+ background: var(--eth-color-layer-01);
1769
+ color: var(--eth-color-text-primary);
1770
+ }
1771
+
1772
+ .eth-id-permission-matrix__select .cds--select-input:disabled,
1773
+ .eth-identity-permission-matrix__select .cds--select-input:disabled {
1774
+ border-block-end-color: var(--eth-color-border-subtle);
1775
+ }
1776
+
1777
+ .eth-id-permission-matrix__table tbody tr:hover th,
1778
+ .eth-identity-permission-matrix__table tbody tr:hover th,
1779
+ .eth-id-permission-matrix__table tbody tr:hover td,
1780
+ .eth-identity-permission-matrix__table tbody tr:hover td {
1781
+ background: var(--eth-color-layer-hover);
1782
+ }
1783
+
1784
+ .eth-id-permission-matrix__table tbody tr:last-child th,
1785
+ .eth-identity-permission-matrix__table tbody tr:last-child th,
1786
+ .eth-id-permission-matrix__table tbody tr:last-child td,
1787
+ .eth-identity-permission-matrix__table tbody tr:last-child td {
1788
+ border-block-end: 0;
1789
+ }
1790
+
1791
+ .eth-id-permission-matrix__badge,
1792
+ .eth-identity-permission-matrix__badge {
1793
+ justify-content: center;
1794
+ margin: 0;
1795
+ min-inline-size: 6.75rem;
1796
+ }
1797
+
1798
+ .eth-id-permission-matrix__badge .cds--tag__label,
1799
+ .eth-identity-permission-matrix__badge .cds--tag__label {
1800
+ align-items: center;
1801
+ display: inline-flex;
1802
+ gap: var(--eth-space-xs);
1803
+ }
1804
+
1805
+ .eth-id-permission-matrix__status-mark,
1806
+ .eth-identity-permission-matrix__status-mark {
1807
+ block-size: 0.5rem;
1808
+ flex: 0 0 auto;
1809
+ inline-size: 0.5rem;
1810
+ }
1811
+
1812
+ .eth-id-permission-matrix__badge--allow .eth-id-permission-matrix__status-mark,
1813
+ .eth-identity-permission-matrix__badge--allow .eth-identity-permission-matrix__status-mark {
1814
+ background: var(--eth-color-success);
1815
+ }
1816
+
1817
+ .eth-id-permission-matrix__badge--deny .eth-id-permission-matrix__status-mark,
1818
+ .eth-identity-permission-matrix__badge--deny .eth-identity-permission-matrix__status-mark {
1819
+ background: var(--eth-color-danger);
1820
+ }
1821
+
1822
+ .eth-id-permission-matrix__badge--inherit .eth-id-permission-matrix__status-mark,
1823
+ .eth-identity-permission-matrix__badge--inherit .eth-identity-permission-matrix__status-mark {
1824
+ background: transparent;
1825
+ border: 1px solid var(--eth-color-border-strong);
1826
+ }
1827
+
1828
+ .eth-id-permission-matrix__select,
1829
+ .eth-identity-permission-matrix__select {
1830
+ inline-size: 100%;
1831
+ min-inline-size: 8rem;
1832
+ }
1833
+
1834
+ @media (max-width: 48rem) {
1835
+ .eth-id-permission-matrix__summary,
1836
+ .eth-identity-permission-matrix__summary {
1837
+ display: grid;
1838
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1839
+ }
1840
+
1841
+ .eth-id-permission-matrix__summary-item,
1842
+ .eth-identity-permission-matrix__summary-item,
1843
+ .eth-id-permission-matrix__mode,
1844
+ .eth-identity-permission-matrix__mode {
1845
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1846
+ border-inline-end: 0;
1847
+ border-inline-start: 0;
1848
+ margin-inline-start: 0;
1849
+ }
1850
+ }
1851
+
1852
+ .eth-id-policy-rule-viewer,
1853
+ .eth-identity-policy-rule-viewer {
1854
+ background: var(--eth-color-layer-01);
1855
+ border: 1px solid var(--eth-color-border-subtle);
1856
+ border-radius: 0;
1857
+ color: var(--eth-color-text-primary);
1858
+ gap: var(--eth-space-lg);
1859
+ inline-size: 100%;
1860
+ min-inline-size: 0;
1861
+ padding: var(--eth-space-lg);
1862
+ }
1863
+
1864
+ .eth-id-policy-rule-viewer .eth-surface__header,
1865
+ .eth-identity-policy-rule-viewer .eth-surface__header,
1866
+ .eth-id-session-status .eth-surface__header,
1867
+ .eth-identity-session-status .eth-surface__header {
1868
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1869
+ padding-block-end: var(--eth-space-lg);
1870
+ }
1871
+
1872
+ .eth-id-policy-rule-viewer .eth-surface__heading h2,
1873
+ .eth-identity-policy-rule-viewer .eth-surface__heading h2,
1874
+ .eth-id-session-status .eth-surface__heading h2,
1875
+ .eth-identity-session-status .eth-surface__heading h2 {
1876
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1877
+ font-weight: 600;
1878
+ line-height: 1.375;
1879
+ overflow-wrap: anywhere;
1880
+ }
1881
+
1882
+ .eth-id-session-status__summary,
1883
+ .eth-identity-session-status__summary {
1884
+ align-items: flex-start;
1885
+ background: var(--eth-color-layer-02);
1886
+ border: 1px solid var(--eth-color-border-subtle);
1887
+ border-inline-start: 4px solid var(--eth-color-border-strong);
1888
+ display: flex;
1889
+ gap: var(--eth-space-sm);
1890
+ min-inline-size: 0;
1891
+ padding: var(--eth-space-md);
1892
+ }
1893
+
1894
+ .eth-id-session-status__summary--success,
1895
+ .eth-identity-session-status__summary--success {
1896
+ border-inline-start-color: var(--eth-color-success);
1897
+ }
1898
+
1899
+ .eth-id-session-status__summary--warning,
1900
+ .eth-identity-session-status__summary--warning {
1901
+ border-inline-start-color: var(--eth-color-warning);
1902
+ }
1903
+
1904
+ .eth-id-session-status__summary--danger,
1905
+ .eth-identity-session-status__summary--danger {
1906
+ border-inline-start-color: var(--eth-color-danger);
1907
+ }
1908
+
1909
+ .eth-id-session-status__summary-mark,
1910
+ .eth-identity-session-status__summary-mark {
1911
+ background: var(--eth-color-text-secondary);
1912
+ border-radius: 50%;
1913
+ flex: 0 0 auto;
1914
+ block-size: 0.5rem;
1915
+ inline-size: 0.5rem;
1916
+ margin-block-start: 0.375rem;
1917
+ }
1918
+
1919
+ .eth-id-session-status__summary--success .eth-id-session-status__summary-mark,
1920
+ .eth-identity-session-status__summary--success .eth-identity-session-status__summary-mark {
1921
+ background: var(--eth-color-success);
1922
+ }
1923
+
1924
+ .eth-id-session-status__summary--warning .eth-id-session-status__summary-mark,
1925
+ .eth-identity-session-status__summary--warning .eth-identity-session-status__summary-mark {
1926
+ background: var(--eth-color-warning);
1927
+ }
1928
+
1929
+ .eth-id-session-status__summary--danger .eth-id-session-status__summary-mark,
1930
+ .eth-identity-session-status__summary--danger .eth-identity-session-status__summary-mark {
1931
+ background: var(--eth-color-danger);
1932
+ }
1933
+
1934
+ .eth-id-session-status__summary-copy,
1935
+ .eth-identity-session-status__summary-copy {
1936
+ display: grid;
1937
+ gap: var(--eth-space-2xs);
1938
+ min-inline-size: 0;
1939
+ }
1940
+
1941
+ .eth-id-session-status__summary-copy strong,
1942
+ .eth-identity-session-status__summary-copy strong {
1943
+ color: var(--eth-color-text-primary);
1944
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1945
+ font-weight: 600;
1946
+ line-height: 1.4286;
1947
+ }
1948
+
1949
+ .eth-id-session-status__summary-copy span,
1950
+ .eth-identity-session-status__summary-copy span,
1951
+ .eth-id-session-status__detail,
1952
+ .eth-identity-session-status__detail,
1953
+ .eth-id-session-status__muted,
1954
+ .eth-identity-session-status__muted {
1955
+ color: var(--eth-color-text-secondary);
1956
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1957
+ line-height: 1.333;
1958
+ }
1959
+
1960
+ .eth-id-policy-rule-viewer__facet-list,
1961
+ .eth-identity-policy-rule-viewer__facet-list,
1962
+ .eth-id-session-status dl,
1963
+ .eth-identity-session-status dl {
1964
+ display: grid;
1965
+ gap: 0;
1966
+ margin: 0;
1967
+ min-inline-size: 0;
1968
+ }
1969
+
1970
+ .eth-id-policy-rule-viewer__facet-list > div,
1971
+ .eth-identity-policy-rule-viewer__facet-list > div,
1972
+ .eth-id-session-status dl > div,
1973
+ .eth-identity-session-status dl > div {
1974
+ border-bottom: 1px solid var(--eth-color-border-subtle);
1975
+ display: grid;
1976
+ gap: var(--eth-space-md);
1977
+ grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
1978
+ padding: var(--eth-space-md) 0;
1979
+ }
1980
+
1981
+ .eth-id-policy-rule-viewer__facet-list > div:last-child,
1982
+ .eth-identity-policy-rule-viewer__facet-list > div:last-child,
1983
+ .eth-id-session-status dl > div:last-child,
1984
+ .eth-identity-session-status dl > div:last-child {
1985
+ border-block-end: 0;
1986
+ }
1987
+
1988
+ .eth-id-policy-rule-viewer__facet-list dt,
1989
+ .eth-identity-policy-rule-viewer__facet-list dt,
1990
+ .eth-id-session-status dt,
1991
+ .eth-identity-session-status dt {
1992
+ color: var(--eth-color-text-secondary);
1993
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1994
+ font-weight: 600;
1995
+ line-height: 1.4286;
1996
+ }
1997
+
1998
+ .eth-id-policy-rule-viewer__facet-list dd,
1999
+ .eth-identity-policy-rule-viewer__facet-list dd,
2000
+ .eth-id-session-status dd,
2001
+ .eth-identity-session-status dd {
2002
+ margin: 0;
2003
+ min-width: 0;
2004
+ }
2005
+
2006
+ .eth-id-policy-rule-viewer__facet-list dd,
2007
+ .eth-identity-policy-rule-viewer__facet-list dd {
2008
+ align-items: flex-start;
2009
+ display: flex;
2010
+ flex-wrap: wrap;
2011
+ gap: var(--eth-space-sm);
2012
+ }
2013
+
2014
+ .eth-id-session-status__value,
2015
+ .eth-identity-session-status__value {
2016
+ display: grid;
2017
+ gap: var(--eth-space-xs);
2018
+ min-inline-size: 0;
2019
+ }
2020
+
2021
+ .eth-id-session-status__value-main,
2022
+ .eth-identity-session-status__value-main {
2023
+ align-items: center;
2024
+ color: var(--eth-color-text-primary);
2025
+ display: flex;
2026
+ flex-wrap: wrap;
2027
+ gap: var(--eth-space-sm);
2028
+ min-inline-size: 0;
2029
+ }
2030
+
2031
+ .eth-id-session-status__value-main time,
2032
+ .eth-identity-session-status__value-main time {
2033
+ overflow-wrap: anywhere;
2034
+ }
2035
+
2036
+ .eth-id-session-status__code,
2037
+ .eth-identity-session-status__code {
2038
+ background: var(--eth-color-layer-02);
2039
+ border: 1px solid var(--eth-color-border-subtle);
2040
+ color: var(--eth-color-text-primary);
2041
+ font-family: var(--eth-font-mono, monospace);
2042
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2043
+ line-height: 1.333;
2044
+ max-inline-size: 100%;
2045
+ overflow-wrap: anywhere;
2046
+ padding: var(--eth-space-2xs) var(--eth-space-xs);
2047
+ }
2048
+
2049
+ .eth-id-policy-rule-viewer__effect,
2050
+ .eth-identity-policy-rule-viewer__effect {
2051
+ justify-self: start;
2052
+ }
2053
+
2054
+ .eth-id-policy-rule-viewer__values,
2055
+ .eth-identity-policy-rule-viewer__values {
2056
+ display: flex;
2057
+ flex-wrap: wrap;
2058
+ gap: var(--eth-space-xs);
2059
+ list-style: none;
2060
+ margin: 0;
2061
+ min-inline-size: 0;
2062
+ padding: 0;
2063
+ }
2064
+
2065
+ .eth-id-policy-rule-viewer__values li,
2066
+ .eth-identity-policy-rule-viewer__values li {
2067
+ display: flex;
2068
+ max-inline-size: 100%;
2069
+ min-inline-size: 0;
2070
+ }
2071
+
2072
+ .eth-id-policy-rule-viewer__values code,
2073
+ .eth-identity-policy-rule-viewer__values code,
2074
+ .eth-id-policy-rule-viewer__condition,
2075
+ .eth-identity-policy-rule-viewer__condition {
2076
+ background: var(--eth-color-layer-02);
2077
+ border: 1px solid var(--eth-color-border-subtle);
2078
+ color: var(--eth-color-text-primary);
2079
+ display: inline-block;
2080
+ font-family: var(--eth-font-mono, monospace);
2081
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2082
+ line-height: 1.333;
2083
+ max-inline-size: 100%;
2084
+ min-block-size: 1.5rem;
2085
+ overflow-wrap: anywhere;
2086
+ padding: var(--eth-space-xs) var(--eth-space-sm);
2087
+ white-space: normal;
2088
+ }
2089
+
2090
+ .eth-id-policy-rule-viewer__condition,
2091
+ .eth-identity-policy-rule-viewer__condition {
2092
+ display: block;
2093
+ }
2094
+
2095
+ .eth-id-policy-rule-viewer__empty,
2096
+ .eth-identity-policy-rule-viewer__empty {
2097
+ color: var(--eth-color-text-secondary);
2098
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2099
+ line-height: 1.4286;
2100
+ }
2101
+
2102
+ .eth-id-role-badge,
2103
+ .eth-identity-role-badge {
2104
+ align-items: center;
2105
+ display: inline-flex;
2106
+ max-inline-size: 100%;
2107
+ min-inline-size: 0;
2108
+ vertical-align: middle;
2109
+ }
2110
+
2111
+ .eth-id-role-badge .eth-badge,
2112
+ .eth-identity-role-badge .eth-badge {
2113
+ max-inline-size: 100%;
2114
+ min-inline-size: 0;
2115
+ }
2116
+
2117
+ .eth-id-role-badge .cds--tag,
2118
+ .eth-identity-role-badge .cds--tag {
2119
+ margin: 0;
2120
+ }
2121
+
2122
+ .eth-id-session-status:not(.eth-surface) {
2123
+ align-items: center;
2124
+ background: var(--eth-color-layer-02);
2125
+ color: var(--eth-color-text-primary);
2126
+ display: inline-flex;
2127
+ min-block-size: var(--eth-space-xl);
2128
+ padding: 0 var(--eth-space-sm);
2129
+ }
2130
+
2131
+ .eth-id-team-list,
2132
+ .eth-identity-team-list {
2133
+ display: grid;
2134
+ gap: var(--eth-space-lg);
2135
+ }
2136
+
2137
+ .eth-id-team-list__summary,
2138
+ .eth-identity-team-list__summary {
2139
+ background: var(--eth-color-layer-02);
2140
+ border: 1px solid var(--eth-color-border-subtle);
2141
+ display: grid;
2142
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2143
+ margin: 0;
2144
+ }
2145
+
2146
+ .eth-id-team-list__summary > div,
2147
+ .eth-identity-team-list__summary > div {
2148
+ display: grid;
2149
+ gap: var(--eth-space-2xs);
2150
+ min-inline-size: 0;
2151
+ padding: var(--eth-space-md);
2152
+ }
2153
+
2154
+ .eth-id-team-list__summary > div + div,
2155
+ .eth-identity-team-list__summary > div + div {
2156
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
2157
+ }
2158
+
2159
+ .eth-id-team-list__summary dt,
2160
+ .eth-identity-team-list__summary dt {
2161
+ color: var(--eth-color-text-secondary);
2162
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2163
+ line-height: 1rem;
2164
+ }
2165
+
2166
+ .eth-id-team-list__summary dd,
2167
+ .eth-identity-team-list__summary dd {
2168
+ color: var(--eth-color-text-primary);
2169
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2170
+ font-weight: 600;
2171
+ line-height: 1.125rem;
2172
+ margin: 0;
2173
+ }
2174
+
2175
+ .eth-id-team-list__items,
2176
+ .eth-identity-team-list__items {
2177
+ background: var(--eth-color-layer-01);
2178
+ border: 1px solid var(--eth-color-border-subtle);
2179
+ display: grid;
2180
+ gap: 0;
2181
+ }
2182
+
2183
+ .eth-id-team-list__item,
2184
+ .eth-identity-team-list__item {
2185
+ align-items: center;
2186
+ background: var(--eth-color-layer-01);
2187
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2188
+ display: grid;
2189
+ gap: var(--eth-space-md);
2190
+ grid-template-columns: var(--eth-space-3xl) minmax(0, 1fr) max-content;
2191
+ min-inline-size: 0;
2192
+ padding: var(--eth-space-lg);
2193
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
2194
+ }
2195
+
2196
+ .eth-id-team-list__item:first-child,
2197
+ .eth-identity-team-list__item:first-child {
2198
+ border-block-start: 0;
2199
+ }
2200
+
2201
+ .eth-id-team-list__item:hover,
2202
+ .eth-identity-team-list__item:hover {
2203
+ background: var(--eth-color-layer-hover);
2204
+ }
2205
+
2206
+ .eth-id-team-list__avatar,
2207
+ .eth-identity-team-list__avatar {
2208
+ align-items: center;
2209
+ background: var(--eth-color-layer-02);
2210
+ border: 1px solid var(--eth-color-border-subtle);
2211
+ color: var(--eth-color-text-secondary);
2212
+ display: inline-flex;
2213
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2214
+ font-weight: 600;
2215
+ block-size: var(--eth-space-3xl);
2216
+ inline-size: var(--eth-space-3xl);
2217
+ justify-content: center;
2218
+ line-height: 1;
2219
+ }
2220
+
2221
+ .eth-id-team-list__main,
2222
+ .eth-identity-team-list__main {
2223
+ display: grid;
2224
+ gap: var(--eth-space-sm);
2225
+ min-inline-size: 0;
2226
+ }
2227
+
2228
+ .eth-id-team-list__heading,
2229
+ .eth-identity-team-list__heading {
2230
+ align-items: center;
2231
+ display: flex;
2232
+ flex-wrap: wrap;
2233
+ gap: var(--eth-space-sm);
2234
+ min-inline-size: 0;
2235
+ }
2236
+
2237
+ .eth-id-team-list__heading h3,
2238
+ .eth-identity-team-list__heading h3 {
2239
+ color: var(--eth-color-text-primary);
2240
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2241
+ font-weight: 600;
2242
+ line-height: 1.125rem;
2243
+ margin: 0;
2244
+ min-inline-size: 0;
2245
+ overflow: hidden;
2246
+ text-overflow: ellipsis;
2247
+ white-space: nowrap;
2248
+ }
2249
+
2250
+ .eth-id-team-list__meta,
2251
+ .eth-identity-team-list__meta {
2252
+ color: var(--eth-color-text-secondary);
2253
+ display: flex;
2254
+ flex-wrap: wrap;
2255
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2256
+ gap: var(--eth-space-sm);
2257
+ line-height: 1.125rem;
2258
+ margin: 0;
2259
+ min-inline-size: 0;
2260
+ }
2261
+
2262
+ .eth-id-team-list__meta > div,
2263
+ .eth-identity-team-list__meta > div {
2264
+ display: inline-flex;
2265
+ gap: var(--eth-space-xs);
2266
+ min-inline-size: 0;
2267
+ }
2268
+
2269
+ .eth-id-team-list__meta dt,
2270
+ .eth-identity-team-list__meta dt {
2271
+ color: var(--eth-color-text-secondary);
2272
+ }
2273
+
2274
+ .eth-id-team-list__meta dd,
2275
+ .eth-identity-team-list__meta dd {
2276
+ color: var(--eth-color-text-primary);
2277
+ font-weight: 500;
2278
+ margin: 0;
2279
+ min-inline-size: 0;
2280
+ overflow: hidden;
2281
+ text-overflow: ellipsis;
2282
+ white-space: nowrap;
2283
+ }
2284
+
2285
+ .eth-id-team-list__item .eth-button,
2286
+ .eth-identity-team-list__item .eth-button {
2287
+ justify-self: end;
2288
+ }
2289
+
2290
+ .eth-id-team-list__empty,
2291
+ .eth-identity-team-list__empty {
2292
+ background: var(--eth-color-layer-01);
2293
+ border: 1px solid var(--eth-color-border-subtle);
2294
+ display: grid;
2295
+ gap: var(--eth-space-xs);
2296
+ padding: var(--eth-space-lg);
2297
+ }
2298
+
2299
+ .eth-id-team-list__empty h3,
2300
+ .eth-identity-team-list__empty h3 {
2301
+ color: var(--eth-color-text-primary);
2302
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2303
+ font-weight: 600;
2304
+ line-height: 1.125rem;
2305
+ margin: 0;
2306
+ }
2307
+
2308
+ .eth-id-team-list__empty p,
2309
+ .eth-identity-team-list__empty p {
2310
+ color: var(--eth-color-text-secondary);
2311
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2312
+ line-height: 1.125rem;
2313
+ margin: 0;
2314
+ }
2315
+
2316
+ .eth-id-access-review__subject,
2317
+ .eth-identity-access-review__subject {
2318
+ background: var(--eth-color-layer-01);
2319
+ border: 1px solid var(--eth-color-border-subtle);
2320
+ border-radius: 0;
2321
+ display: grid;
2322
+ gap: 0;
2323
+ overflow: hidden;
2324
+ }
2325
+
2326
+ .eth-id-access-review__subject-header,
2327
+ .eth-identity-access-review__subject-header {
2328
+ align-items: center;
2329
+ border-bottom: 1px solid var(--eth-color-border-subtle);
2330
+ display: flex;
2331
+ flex-wrap: wrap;
2332
+ gap: var(--eth-space-md);
2333
+ justify-content: space-between;
2334
+ padding: var(--eth-space-lg);
2335
+ }
2336
+
2337
+ .eth-id-access-review__identity,
2338
+ .eth-identity-access-review__identity {
2339
+ align-items: center;
2340
+ display: flex;
2341
+ gap: var(--eth-space-md);
2342
+ min-width: 0;
2343
+ }
2344
+
2345
+ .eth-id-access-review__avatar,
2346
+ .eth-identity-access-review__avatar {
2347
+ align-items: center;
2348
+ background: var(--eth-color-layer-02);
2349
+ border: 1px solid var(--eth-color-border-subtle);
2350
+ color: var(--eth-color-text-secondary);
2351
+ display: inline-flex;
2352
+ flex: 0 0 auto;
2353
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2354
+ font-weight: 600;
2355
+ block-size: var(--eth-space-3xl);
2356
+ inline-size: var(--eth-space-3xl);
2357
+ justify-content: center;
2358
+ line-height: 1;
2359
+ }
2360
+
2361
+ .eth-id-access-review__identity-main,
2362
+ .eth-identity-access-review__identity-main {
2363
+ min-width: 0;
2364
+ }
2365
+
2366
+ .eth-id-access-review__identity-main h3,
2367
+ .eth-identity-access-review__identity-main h3 {
2368
+ font-size: calc(1rem * var(--eth-text-scale, 1));
2369
+ font-weight: 600;
2370
+ line-height: 1.375;
2371
+ margin: 0;
2372
+ }
2373
+
2374
+ .eth-id-access-review__identity-main p,
2375
+ .eth-identity-access-review__identity-main p,
2376
+ .eth-id-access-review__identity-main small,
2377
+ .eth-identity-access-review__identity-main small,
2378
+ .eth-id-access-review__muted,
2379
+ .eth-identity-access-review__muted,
2380
+ .eth-id-access-review__empty-cell,
2381
+ .eth-identity-access-review__empty-cell {
2382
+ color: var(--eth-color-text-secondary);
2383
+ }
2384
+
2385
+ .eth-id-access-review__identity-main p,
2386
+ .eth-identity-access-review__identity-main p {
2387
+ margin: var(--eth-space-2xs) 0 0;
2388
+ }
2389
+
2390
+ .eth-id-access-review__identity-main small,
2391
+ .eth-identity-access-review__identity-main small {
2392
+ display: block;
2393
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2394
+ line-height: 1.333;
2395
+ margin-block-start: var(--eth-space-2xs);
2396
+ text-transform: capitalize;
2397
+ }
2398
+
2399
+ .eth-id-access-review__findings,
2400
+ .eth-identity-access-review__findings,
2401
+ .eth-id-access-review__permissions,
2402
+ .eth-identity-access-review__permissions,
2403
+ .eth-id-access-review__decision-actions,
2404
+ .eth-identity-access-review__decision-actions {
2405
+ align-items: center;
2406
+ display: flex;
2407
+ flex-wrap: wrap;
2408
+ gap: var(--eth-space-xs);
2409
+ }
2410
+
2411
+ .eth-id-access-review__findings,
2412
+ .eth-identity-access-review__findings {
2413
+ justify-content: flex-end;
2414
+ }
2415
+
2416
+ .eth-id-access-review__table-wrap,
2417
+ .eth-identity-access-review__table-wrap {
2418
+ overflow-x: auto;
2419
+ }
2420
+
2421
+ .eth-id-access-review__table,
2422
+ .eth-identity-access-review__table,
2423
+ .eth-id-access-review__subject table,
2424
+ .eth-identity-access-review__subject table {
2425
+ border-collapse: collapse;
2426
+ inline-size: 100%;
2427
+ min-inline-size: 44rem;
2428
+ }
2429
+
2430
+ .eth-id-access-review__table th,
2431
+ .eth-id-access-review__table td,
2432
+ .eth-identity-access-review__table th,
2433
+ .eth-identity-access-review__table td,
2434
+ .eth-id-access-review__subject th,
2435
+ .eth-id-access-review__subject td,
2436
+ .eth-identity-access-review__subject th,
2437
+ .eth-identity-access-review__subject td {
2438
+ border-bottom: 1px solid var(--eth-color-border-subtle);
2439
+ padding: var(--eth-space-sm) var(--eth-space-md);
2440
+ text-align: start;
2441
+ vertical-align: middle;
2442
+ }
2443
+
2444
+ .eth-id-access-review__table thead th,
2445
+ .eth-identity-access-review__table thead th,
2446
+ .eth-id-access-review__subject thead th,
2447
+ .eth-identity-access-review__subject thead th {
2448
+ background: var(--eth-color-layer-02);
2449
+ color: var(--eth-color-text-secondary);
2450
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2451
+ font-weight: 600;
2452
+ line-height: 1.333;
2453
+ }
2454
+
2455
+ .eth-id-access-review__table tbody th,
2456
+ .eth-identity-access-review__table tbody th,
2457
+ .eth-id-access-review__subject tbody th,
2458
+ .eth-identity-access-review__subject tbody th {
2459
+ font-weight: 600;
2460
+ }
2461
+
2462
+ .eth-id-access-review__table tbody tr,
2463
+ .eth-identity-access-review__table tbody tr {
2464
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
2465
+ }
2466
+
2467
+ .eth-id-access-review__table tbody tr:hover,
2468
+ .eth-identity-access-review__table tbody tr:hover {
2469
+ background: var(--eth-color-layer-hover);
2470
+ }
2471
+
2472
+ .eth-id-access-review__table th:last-child,
2473
+ .eth-id-access-review__table td:last-child,
2474
+ .eth-identity-access-review__table th:last-child,
2475
+ .eth-identity-access-review__table td:last-child {
2476
+ inline-size: 13rem;
2477
+ }
2478
+
2479
+ .eth-id-access-review__decision-actions .eth-button,
2480
+ .eth-identity-access-review__decision-actions .eth-button {
2481
+ min-inline-size: 5.5rem;
2482
+ }
2483
+
2484
+ .eth-id-access-review__empty-cell,
2485
+ .eth-identity-access-review__empty-cell {
2486
+ font-style: italic;
2487
+ }
2488
+
2489
+ @media (width <= 42rem) {
2490
+ .eth-id-approval-policy-editor__layout,
2491
+ .eth-identity-approval-policy-editor__layout,
2492
+ .eth-id-approval-policy-editor__summary-grid,
2493
+ .eth-identity-approval-policy-editor__summary-grid {
2494
+ grid-template-columns: 1fr;
2495
+ }
2496
+
2497
+ .eth-identity-invite-user__layout {
2498
+ grid-template-columns: 1fr;
2499
+ }
2500
+
2501
+ .eth-identity-invite-user__summary {
2502
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2503
+ border-inline-start: 0;
2504
+ padding-block-start: var(--eth-space-lg);
2505
+ padding-inline-start: 0;
2506
+ }
2507
+
2508
+ .eth-identity-invite-user__actions {
2509
+ align-items: flex-start;
2510
+ }
2511
+
2512
+ .eth-id-approval-policy-editor__summary-grid div,
2513
+ .eth-identity-approval-policy-editor__summary-grid div {
2514
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2515
+ border-inline-end: 0;
2516
+ }
2517
+
2518
+ .eth-id-approval-policy-editor__summary-grid div:last-child,
2519
+ .eth-identity-approval-policy-editor__summary-grid div:last-child {
2520
+ border-block-end: 0;
2521
+ }
2522
+
2523
+ .eth-id-policy-rule-viewer__facet-list > div,
2524
+ .eth-identity-policy-rule-viewer__facet-list > div,
2525
+ .eth-id-session-status dl > div,
2526
+ .eth-identity-session-status dl > div {
2527
+ grid-template-columns: 1fr;
2528
+ }
2529
+
2530
+ .eth-id-identity-card__body,
2531
+ .eth-identity-card__body {
2532
+ align-items: start;
2533
+ grid-template-columns: max-content minmax(0, 1fr);
2534
+ }
2535
+
2536
+ .eth-id-identity-card__body > .eth-actions,
2537
+ .eth-identity-card__body > .eth-actions {
2538
+ grid-column: 1 / -1;
2539
+ justify-content: flex-start;
2540
+ justify-self: stretch;
2541
+ min-inline-size: 0;
2542
+ }
2543
+
2544
+ .eth-id-team-list__item,
2545
+ .eth-identity-team-list__item {
2546
+ align-items: start;
2547
+ grid-template-columns: var(--eth-space-3xl) minmax(0, 1fr);
2548
+ }
2549
+
2550
+ .eth-id-team-list__item .eth-button,
2551
+ .eth-identity-team-list__item .eth-button {
2552
+ grid-column: 1 / -1;
2553
+ justify-self: stretch;
2554
+ }
2555
+
2556
+ .eth-id-team-list__summary,
2557
+ .eth-identity-team-list__summary {
2558
+ grid-template-columns: 1fr;
2559
+ }
2560
+
2561
+ .eth-id-team-list__summary > div + div,
2562
+ .eth-identity-team-list__summary > div + div {
2563
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2564
+ border-inline-start: 0;
2565
+ }
2566
+
2567
+ .eth-id-access-review__subject-header,
2568
+ .eth-identity-access-review__subject-header,
2569
+ .eth-id-access-review__identity,
2570
+ .eth-identity-access-review__identity {
2571
+ align-items: flex-start;
2572
+ }
2573
+
2574
+ .eth-id-access-review__findings,
2575
+ .eth-identity-access-review__findings {
2576
+ justify-content: flex-start;
2577
+ }
2578
+ }