@lolmath/ui 9.1.0 → 9.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -181,17 +181,22 @@
181
181
  }
182
182
  }
183
183
  @layer lol {
184
- ._breadcrumbs_1c3hr_2 {
184
+ ._breadcrumbs_1gzfl_2 {
185
185
  display: flex;
186
186
  gap: 0.25rem;
187
+ /* An <ol>: the UA gives it block margins and a 40px marker gutter. */
188
+ margin: 0;
189
+ padding: 0;
190
+ list-style: none;
187
191
  }
188
192
 
189
- ._item_1c3hr_7 {
193
+ ._item_1gzfl_11 {
190
194
  display: flex;
191
195
  align-items: center;
192
196
  }
193
197
 
194
- ._link_1c3hr_12 {
198
+ ._link_1gzfl_16 {
199
+ text-decoration: none;
195
200
  font-family: var(--lol-font-family-beaufort);
196
201
  color: var(--lol-color-gold-300);
197
202
  position: relative;
@@ -206,27 +211,28 @@
206
211
  }
207
212
  }
208
213
 
209
- ._divider_1c3hr_27 {
214
+ ._divider_1gzfl_32 {
215
+ /* Off the text baseline, so the row's height is the glyph's, and never
216
+ wider than the row. */
217
+ display: block;
218
+ max-width: 100%;
210
219
  height: 11px;
211
220
  }
212
221
  }
213
222
  @layer lol {
214
- ._round_1k1xc_2 {
215
- border-radius: 9999px;
216
- }
217
-
218
- ._round_1k1xc_2,
219
- ._square_1k1xc_7 {
220
- aspect-ratio: 1 / 1;
221
- padding: 0px;
222
- font-weight: 900;
223
- }
223
+ ._button_7nrx3_2 {
224
+ appearance: none;
225
+ margin: 0;
226
+ /* Presets that want horizontal padding add it back further down. Without a
227
+ zero here, `text` (which wants none) picks up the UA's `1px 6px`. */
228
+ padding: 0;
229
+ /* Also rendered on the <a> of ButtonLink, which the UA underlines. */
230
+ text-decoration: none;
224
231
 
225
- ._button_1k1xc_13 {
226
232
  border-radius: 0px;
227
233
  border: 2px solid transparent;
228
234
 
229
- &._thin_1k1xc_17 {
235
+ &._thin_7nrx3_14 {
230
236
  border-width: 1px;
231
237
  }
232
238
 
@@ -257,21 +263,37 @@
257
263
  outline: none;
258
264
  }
259
265
 
260
- &._small_1k1xc_48 {
266
+ &._small_7nrx3_45 {
261
267
  font-size: var(--lol-font-size-sm);
262
268
  min-height: var(--lol-form-height-small);
263
269
  }
264
270
 
265
- &._medium_1k1xc_53 {
271
+ &._medium_7nrx3_50 {
266
272
  font-size: var(--lol-font-size-base);
267
273
  min-height: var(--lol-form-height-medium);
268
274
  }
269
275
 
270
- &._large_1k1xc_58 {
276
+ &._large_7nrx3_55 {
271
277
  font-size: var(--lol-font-size-base);
272
278
  min-height: var(--lol-form-height-large);
273
279
  }
274
280
 
281
+ /*
282
+ * Nested so the shape wins on specificity: as a bare `.round` it ties with
283
+ * `.button` and loses the border-radius and font-weight to whichever rule
284
+ * is written last.
285
+ */
286
+ &._round_7nrx3_61,
287
+ &._square_7nrx3_66 {
288
+ aspect-ratio: 1 / 1;
289
+ padding: 0px;
290
+ font-weight: 900;
291
+ }
292
+
293
+ &._round_7nrx3_61 {
294
+ border-radius: 9999px;
295
+ }
296
+
275
297
  &:hover {
276
298
  color: var(--lol-color-gold-100);
277
299
  }
@@ -299,22 +321,22 @@
299
321
  * together by exactly one border width so their two gradient borders read as
300
322
  * a single seam instead of a double-thick one.
301
323
  */
302
- ._toggleButtonGroup_1k1xc_90 {
324
+ ._toggleButtonGroup_7nrx3_103 {
303
325
  display: inline-flex;
304
326
 
305
- & > ._button_1k1xc_13 + ._button_1k1xc_13 {
327
+ & > ._button_7nrx3_2 + ._button_7nrx3_2 {
306
328
  margin-left: -2px;
307
329
  }
308
330
 
309
331
  /* Must follow the rule above: thin buttons only need a 1px overlap. */
310
- & > ._thin_1k1xc_17 + ._thin_1k1xc_17 {
332
+ & > ._thin_7nrx3_14 + ._thin_7nrx3_14 {
311
333
  margin-left: -1px;
312
334
  }
313
335
 
314
336
  /* Whichever button is highlighted owns the seams next to it. */
315
- & > ._button_1k1xc_13:hover,
316
- & > ._button_1k1xc_13:focus-visible,
317
- & > ._button_1k1xc_13[data-selected] {
337
+ & > ._button_7nrx3_2:hover,
338
+ & > ._button_7nrx3_2:focus-visible,
339
+ & > ._button_7nrx3_2[data-selected] {
318
340
  position: relative;
319
341
  z-index: 1;
320
342
  }
@@ -324,48 +346,48 @@
324
346
  /* Equal widths keep the collapsed seams lined up. */
325
347
  align-items: stretch;
326
348
 
327
- & > ._button_1k1xc_13 + ._button_1k1xc_13 {
349
+ & > ._button_7nrx3_2 + ._button_7nrx3_2 {
328
350
  margin-left: 0;
329
351
  margin-top: -2px;
330
352
  }
331
353
 
332
- & > ._thin_1k1xc_17 + ._thin_1k1xc_17 {
354
+ & > ._thin_7nrx3_14 + ._thin_7nrx3_14 {
333
355
  margin-top: -1px;
334
356
  }
335
357
  }
336
358
  }
337
359
 
338
- ._primary_1k1xc_126,
339
- ._secondary_1k1xc_127,
340
- ._hextech_1k1xc_128,
341
- ._dimmed_1k1xc_129 {
342
- &:not(._square_1k1xc_7, ._round_1k1xc_2) {
343
- &._small_1k1xc_48 {
360
+ ._primary_7nrx3_139,
361
+ ._secondary_7nrx3_140,
362
+ ._hextech_7nrx3_141,
363
+ ._dimmed_7nrx3_142 {
364
+ &:not(._square_7nrx3_66, ._round_7nrx3_61) {
365
+ &._small_7nrx3_45 {
344
366
  padding: 0 0.5rem;
345
367
  }
346
368
 
347
- &._medium_1k1xc_53 {
369
+ &._medium_7nrx3_50 {
348
370
  padding: 0 1rem;
349
371
  }
350
372
 
351
- &._large_1k1xc_58 {
373
+ &._large_7nrx3_55 {
352
374
  padding: 0 1rem;
353
375
  }
354
376
  }
355
377
  }
356
378
 
357
- ._text_1k1xc_145 {
358
- &._round_1k1xc_2,
359
- &._square_1k1xc_7 {
379
+ ._text_7nrx3_158 {
380
+ &._round_7nrx3_61,
381
+ &._square_7nrx3_66 {
360
382
  &:hover {
361
383
  --lol-button-background-gradient: var(--lol-gradient-grey-300);
362
384
  --lol-button-border-gradient: var(--lol-gradient-transparent);
363
385
  }
364
386
  }
365
387
 
366
- &._round_1k1xc_2,
367
- &._square_1k1xc_7,
368
- &._normal_1k1xc_156 {
388
+ &._round_7nrx3_61,
389
+ &._square_7nrx3_66,
390
+ &._normal_7nrx3_169 {
369
391
  position: relative;
370
392
 
371
393
  &::after {
@@ -383,7 +405,7 @@
383
405
  }
384
406
  }
385
407
 
386
- ._hextech_1k1xc_128 {
408
+ ._hextech_7nrx3_141 {
387
409
  color: var(--lol-color-blue-100);
388
410
  --lol-button-border-gradient: var(--lol-gradient-hextech);
389
411
  --lol-button-background-gradient: var(--lol-gradient-grey-300);
@@ -408,17 +430,16 @@
408
430
  }
409
431
  }
410
432
 
411
- ._dimmed_1k1xc_129 {
433
+ ._dimmed_7nrx3_142 {
412
434
  --lol-button-background-gradient: var(--lol-gradient-hextech-black);
413
435
  --lol-button-border-gradient: var(--lol-gradient-grey-300);
414
436
 
415
- &._selected_1k1xc_203,
416
437
  &:focus-visible {
417
438
  --lol-button-border-gradient: var(--lol-gradient-gold);
418
439
  }
419
440
  }
420
441
 
421
- ._primary_1k1xc_126 {
442
+ ._primary_7nrx3_139 {
422
443
  --lol-button-border-gradient: var(--lol-gradient-gold);
423
444
  --lol-button-background-gradient: linear-gradient(
424
445
  to top,
@@ -446,36 +467,55 @@
446
467
  }
447
468
  }
448
469
 
449
- ._secondary_1k1xc_127 {
470
+ ._secondary_7nrx3_140 {
450
471
  --lol-button-border-gradient: var(--lol-gradient-gold);
451
472
  --lol-button-background-gradient: var(--lol-gradient-grey-300);
452
473
  }
453
474
 
454
- ._primary_1k1xc_126:hover,
455
- ._secondary_1k1xc_127:hover,
456
- ._dimmed_1k1xc_129:hover {
475
+ ._primary_7nrx3_139:hover,
476
+ ._secondary_7nrx3_140:hover,
477
+ ._dimmed_7nrx3_142:hover {
457
478
  --lol-button-border-gradient: var(--lol-gradient-gold-hover);
458
479
  }
459
480
 
460
- ._primary_1k1xc_126:active,
461
- ._secondary_1k1xc_127:active,
462
- ._dimmed_1k1xc_129:active {
481
+ ._primary_7nrx3_139:active,
482
+ ._secondary_7nrx3_140:active,
483
+ ._dimmed_7nrx3_142:active {
463
484
  --lol-button-border-gradient: var(--lol-gradient-gold-press);
464
485
  }
465
486
 
466
- ._primary_1k1xc_126:disabled,
467
- ._secondary_1k1xc_127:disabled,
468
- ._dimmed_1k1xc_129:disabled {
487
+ /*
488
+ * A selected toggle takes the hextech background from `.button`, so the
489
+ * dimmed border follows it there: a hextech body inside the resting grey
490
+ * frame reads as an unfinished button. Must stay after the gold `:hover`
491
+ * and `:active` rules above so the resting selected border wins, and
492
+ * before `:disabled` below so a disabled toggle still greys out.
493
+ */
494
+ ._dimmed_7nrx3_142[data-selected] {
495
+ --lol-button-border-gradient: var(--lol-gradient-hextech);
496
+
497
+ &:hover {
498
+ --lol-button-border-gradient: var(--lol-gradient-hextech-hover);
499
+ }
500
+
501
+ &:active {
502
+ --lol-button-border-gradient: var(--lol-gradient-hextech-press);
503
+ }
504
+ }
505
+
506
+ ._primary_7nrx3_139:disabled,
507
+ ._secondary_7nrx3_140:disabled,
508
+ ._dimmed_7nrx3_142:disabled {
469
509
  --lol-button-border-gradient: var(--lol-gradient-disabled);
470
510
  }
471
511
 
472
- ._primary_1k1xc_126:focus-visible,
473
- ._secondary_1k1xc_127:focus-visible {
512
+ ._primary_7nrx3_139:focus-visible,
513
+ ._secondary_7nrx3_140:focus-visible {
474
514
  outline-color: var(--lol-color-gold-400);
475
515
  }
476
516
  }
477
517
  @layer lol {
478
- ._checkbox_10zee_2 {
518
+ ._checkbox_1rldq_2 {
479
519
  font-family: var(--lol-font-family-spiegel);
480
520
  color: var(--lol-color-grey-100);
481
521
  display: flex;
@@ -495,13 +535,25 @@
495
535
  }
496
536
  }
497
537
 
498
- ._icon_10zee_22 {
538
+ ._icon_1rldq_22 {
539
+ /* Off the text baseline, so the box is the glyph. */
540
+ display: block;
541
+ max-width: 100%;
499
542
  width: 0.875rem;
500
543
  height: 0.875rem;
501
544
  }
502
545
  }
503
546
  @layer lol {
504
- ._disclosureButton_9s3bw_2 {
547
+ ._disclosureButton_1wmxg_2 {
548
+ /* A <button> we never paint: without this it falls back to the UA's
549
+ `buttonface` slab, which is grey under `color-scheme: dark`. */
550
+ appearance: none;
551
+ background: none;
552
+ border: 0;
553
+ margin: 0;
554
+ font: inherit;
555
+ letter-spacing: inherit;
556
+
505
557
  color: var(--lol-color-grey-100);
506
558
  font-family: var(--lol-font-family-beaufort);
507
559
 
@@ -519,7 +571,7 @@
519
571
  text-align: left;
520
572
  }
521
573
 
522
- ._icon_9s3bw_20 {
574
+ ._icon_1wmxg_29 {
523
575
  margin-left: 0.125rem;
524
576
  margin-right: 0.5rem;
525
577
  display: inline-block;
@@ -527,7 +579,7 @@
527
579
  font-size: var(--lol-font-size-sm);
528
580
  }
529
581
 
530
- ._disclosure_9s3bw_2 {
582
+ ._disclosure_1wmxg_2 {
531
583
  border-bottom: 1px solid var(--lol-color-gold-600);
532
584
 
533
585
  &:last-of-type {
@@ -535,7 +587,7 @@
535
587
  }
536
588
  }
537
589
 
538
- ._disclosurePanel_9s3bw_36 {
590
+ ._disclosurePanel_1wmxg_45 {
539
591
  color: var(--lol-color-grey-100);
540
592
  font-family: var(--lol-font-family-spiegel);
541
593
 
@@ -557,14 +609,17 @@
557
609
  }
558
610
  }
559
611
  @layer lol {
560
- ._divider_8g14c_2 {
612
+ ._divider_wpkyb_2 {
561
613
  height: 1px;
562
614
  flex-grow: 1;
563
615
  border: none;
616
+ /* An <hr>: the UA gives it 0.5em block margins and a grey `color`. */
617
+ margin: 0;
618
+ color: inherit;
564
619
  display: flex;
565
620
  }
566
621
 
567
- ._left_8g14c_9 {
622
+ ._left_wpkyb_12 {
568
623
  background-image: linear-gradient(
569
624
  to right,
570
625
  rgba(0, 0, 0, 0),
@@ -572,7 +627,7 @@
572
627
  );
573
628
  }
574
629
 
575
- ._center_8g14c_17 {
630
+ ._center_wpkyb_20 {
576
631
  background-image: linear-gradient(
577
632
  to right,
578
633
  rgba(0, 0, 0, 0),
@@ -581,7 +636,7 @@
581
636
  );
582
637
  }
583
638
 
584
- ._right_8g14c_26 {
639
+ ._right_wpkyb_29 {
585
640
  background-image: linear-gradient(
586
641
  to right,
587
642
  var(--lol-color-gold-600),
@@ -589,20 +644,20 @@
589
644
  );
590
645
  }
591
646
 
592
- ._block_8g14c_34 {
647
+ ._block_wpkyb_37 {
593
648
  width: 5px;
594
649
  height: 5px;
595
650
  border: 1px solid var(--lol-color-gold-600);
596
651
  rotate: 45deg;
597
652
  }
598
653
 
599
- ._wrapper_8g14c_41 {
654
+ ._wrapper_wpkyb_44 {
600
655
  display: flex;
601
656
  align-items: center;
602
657
  flex-grow: 1;
603
658
  }
604
659
 
605
- ._childrenWrapper_8g14c_47 {
660
+ ._childrenWrapper_wpkyb_50 {
606
661
  display: flex;
607
662
  align-items: center;
608
663
  gap: 2rem;
@@ -610,60 +665,62 @@
610
665
  }
611
666
  }
612
667
  @layer lol {
613
- ._heading_1ff83_2 {
668
+ ._heading_4cie6_2 {
669
+ /* Rendered as h1-h5, which the UA gives block margins scaled to the font. */
670
+ margin: 0;
614
671
  font-family: var(--lol-font-family-beaufort);
615
672
  scroll-margin-top: 5rem;
616
673
  text-transform: uppercase;
617
674
  }
618
675
 
619
- ._h1_1ff83_8 {
676
+ ._h1_4cie6_10 {
620
677
  font-size: var(--lol-font-size-h1);
621
678
  line-height: var(--lol-line-height-h1);
622
679
  letter-spacing: var(--lol-letter-spacing-h1);
623
680
  font-weight: var(--lol-font-weight-h1);
624
681
  }
625
682
 
626
- ._h2_1ff83_15 {
683
+ ._h2_4cie6_17 {
627
684
  font-size: var(--lol-font-size-h2);
628
685
  line-height: var(--lol-line-height-h2);
629
686
  letter-spacing: var(--lol-letter-spacing-h2);
630
687
  font-weight: var(--lol-font-weight-h2);
631
688
  }
632
689
 
633
- ._h3_1ff83_22 {
690
+ ._h3_4cie6_24 {
634
691
  font-size: var(--lol-font-size-h3);
635
692
  line-height: var(--lol-line-height-h3);
636
693
  letter-spacing: var(--lol-letter-spacing-h3);
637
694
  font-weight: var(--lol-font-weight-h3);
638
695
  }
639
696
 
640
- ._h4_1ff83_29 {
697
+ ._h4_4cie6_31 {
641
698
  font-size: var(--lol-font-size-h4);
642
699
  line-height: var(--lol-line-height-h4);
643
700
  letter-spacing: var(--lol-letter-spacing-h4);
644
701
  font-weight: var(--lol-font-weight-h4);
645
702
  }
646
703
 
647
- ._h5_1ff83_36 {
704
+ ._h5_4cie6_38 {
648
705
  font-size: var(--lol-font-size-h5);
649
706
  line-height: var(--lol-line-height-h5);
650
707
  letter-spacing: var(--lol-letter-spacing-h5);
651
708
  font-weight: var(--lol-font-weight-h5);
652
709
  }
653
710
 
654
- ._grey100_1ff83_43 {
711
+ ._grey100_4cie6_45 {
655
712
  color: var(--lol-color-grey-100);
656
713
  }
657
714
 
658
- ._gold100_1ff83_47 {
715
+ ._gold100_4cie6_49 {
659
716
  color: var(--lol-color-gold-100);
660
717
  }
661
718
 
662
- ._gold200_1ff83_51 {
719
+ ._gold200_4cie6_53 {
663
720
  color: var(--lol-color-gold-200);
664
721
  }
665
722
 
666
- ._gold400_1ff83_55 {
723
+ ._gold400_4cie6_57 {
667
724
  color: var(--lol-color-gold-400);
668
725
  }
669
726
  }
@@ -752,7 +809,7 @@
752
809
  }
753
810
  }
754
811
  @layer lol {
755
- ._overlay_1kg5a_2 {
812
+ ._overlay_cjo05_2 {
756
813
  background-color: color-mix(
757
814
  in srgb,
758
815
  var(--lol-color-hextech-black),
@@ -775,7 +832,7 @@
775
832
  backdrop-filter: blur(8px);
776
833
  }
777
834
 
778
- ._dialog_1kg5a_25 {
835
+ ._dialog_cjo05_25 {
779
836
  background:
780
837
  var(--lol-button-background-gradient) padding-box,
781
838
  var(--lol-button-border-gradient) border-box;
@@ -817,12 +874,14 @@
817
874
  }
818
875
  }
819
876
 
820
- ._modal_1kg5a_67 {
877
+ ._modal_cjo05_67 {
821
878
  width: 100%;
822
879
  max-width: 28rem;
823
880
  }
824
881
 
825
- ._dialogHeading_1kg5a_72 {
882
+ ._dialogHeading_cjo05_72 {
883
+ /* React aria renders an <h3>, which the UA gives block margins. */
884
+ margin: 0;
826
885
  color: var(--lol-color-gold-100);
827
886
  font-family: var(--lol-font-family-beaufort);
828
887
  text-transform: uppercase;
@@ -832,7 +891,7 @@
832
891
  line-height: var(--lol-line-height-h5);
833
892
  }
834
893
 
835
- ._dialogButtons_1kg5a_82 {
894
+ ._dialogButtons_cjo05_84 {
836
895
  justify-content: center;
837
896
  transform: translateY(2px);
838
897
  padding: 0 0.25rem;
@@ -842,18 +901,18 @@
842
901
  }
843
902
  }
844
903
  @layer lol {
845
- ._group_7wszc_2 {
904
+ ._group_1haju_2 {
846
905
  display: grid;
847
906
  grid-template-columns: auto 1fr auto;
848
907
  gap: 1px;
849
908
  padding: 1px;
850
909
  outline: none;
851
910
 
852
- &._normal_7wszc_9 {
911
+ &._normal_1haju_9 {
853
912
  background-image: var(--lol-gradient-gold);
854
913
  }
855
914
 
856
- &._dimmed_7wszc_13 {
915
+ &._dimmed_1haju_13 {
857
916
  background-image: var(--lol-gradient-grey-300);
858
917
  }
859
918
 
@@ -865,20 +924,23 @@
865
924
  background-image: var(--lol-gradient-gold-hover);
866
925
  }
867
926
 
868
- &._small_7wszc_25 {
927
+ &._small_1haju_25 {
869
928
  min-height: var(--lol-form-height-small);
870
929
  }
871
930
 
872
- &._medium_7wszc_29 {
931
+ &._medium_1haju_29 {
873
932
  min-height: var(--lol-form-height-medium);
874
933
  }
875
934
 
876
- &._large_7wszc_33 {
935
+ &._large_1haju_33 {
877
936
  min-height: var(--lol-form-height-large);
878
937
  }
879
938
  }
880
939
 
881
- ._input_7wszc_38 {
940
+ ._input_1haju_38 {
941
+ /* The group draws the border as its own 1px gradient padding. */
942
+ border: 0;
943
+ margin: 0;
882
944
  background-color: var(--lol-color-hextech-black);
883
945
  color: var(--lol-color-gold-100);
884
946
  font-family: var(--lol-font-family-spiegel);
@@ -893,12 +955,20 @@
893
955
  color: var(--lol-color-grey-100);
894
956
  }
895
957
 
896
- &._focus_7wszc_53 {
958
+ &._focus_1haju_56 {
897
959
  background-image: var(--lol-gradient-grey-focus);
898
960
  }
899
961
  }
900
962
 
901
- ._button_7wszc_58 {
963
+ ._button_1haju_61 {
964
+ /* A <button> we never paint: without this it falls back to the UA's
965
+ `buttonface` slab, which is grey under `color-scheme: dark`. */
966
+ appearance: none;
967
+ border: 0;
968
+ margin: 0;
969
+ font: inherit;
970
+ letter-spacing: inherit;
971
+
902
972
  color: var(--lol-color-gold-100);
903
973
  background-color: var(--lol-color-hextech-black);
904
974
  padding: 0 0.625rem;
@@ -910,7 +980,7 @@
910
980
  }
911
981
  }
912
982
  @layer lol {
913
- ._popover_6y5ml_2 {
983
+ ._popover_uemk0_2 {
914
984
  padding: 2px;
915
985
  box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
916
986
  border: 2px solid transparent;
@@ -920,49 +990,57 @@
920
990
  --lol-button-border-gradient: var(--lol-gradient-gold-press);
921
991
  --lol-button-background-gradient: var(--lol-gradient-grey-300);
922
992
 
923
- &._top_6y5ml_12 {
993
+ &._top_uemk0_12 {
924
994
  margin-bottom: 0.5rem;
925
995
  }
926
996
 
927
- &._bottom_6y5ml_16 {
997
+ &._bottom_uemk0_16 {
928
998
  margin-top: 0.5rem;
929
999
  }
930
1000
 
931
- &._left_6y5ml_20 {
1001
+ &._left_uemk0_20 {
932
1002
  margin-right: 0.5rem;
933
1003
  }
934
1004
 
935
- &._right_6y5ml_24 {
1005
+ &._right_uemk0_24 {
936
1006
  margin-left: 0.5rem;
937
1007
  }
938
1008
  }
939
1009
 
940
- ._arrow_6y5ml_29 {
941
- ._outer_6y5ml_30 {
1010
+ ._arrow_uemk0_29 {
1011
+ /*
1012
+ * React aria anchors the arrow's wrapper with `bottom: 100%`, so the
1013
+ * wrapper's box has to *be* the glyph. Left inline the svg sits on a text
1014
+ * baseline: the wrapper grows to a line-height and the arrow floats off the
1015
+ * popover by the difference.
1016
+ */
1017
+ display: block;
1018
+
1019
+ ._outer_uemk0_38 {
942
1020
  fill: var(--lol-color-gold-600);
943
1021
  }
944
1022
 
945
- ._inner_6y5ml_34 {
1023
+ ._inner_uemk0_42 {
946
1024
  fill: var(--lol-color-grey-300);
947
1025
  }
948
1026
 
949
- &._top_6y5ml_12 {
1027
+ &._top_uemk0_12 {
950
1028
  transform: translateX(-1.5px);
951
1029
  }
952
1030
 
953
- &._bottom_6y5ml_16 {
1031
+ &._bottom_uemk0_16 {
954
1032
  transform: translateX(-1.5px) rotate(180deg);
955
1033
 
956
- ._outer_6y5ml_30 {
1034
+ ._outer_uemk0_38 {
957
1035
  fill: var(--lol-color-gold-500);
958
1036
  }
959
1037
  }
960
1038
 
961
- &._left_6y5ml_20 {
1039
+ &._left_uemk0_20 {
962
1040
  transform: translateY(-2px) translateX(-5px) rotate(-90deg);
963
1041
  }
964
1042
 
965
- &._right_6y5ml_24 {
1043
+ &._right_uemk0_24 {
966
1044
  transform: translateY(-2px) translateX(5px) rotate(90deg);
967
1045
  }
968
1046
  }
@@ -1063,7 +1141,7 @@
1063
1141
  }
1064
1142
  }
1065
1143
  @layer lol {
1066
- ._searchField_7htjg_2 {
1144
+ ._searchField_tm8b9_2 {
1067
1145
  display: grid;
1068
1146
  grid-template-areas:
1069
1147
  "label label"
@@ -1075,7 +1153,7 @@
1075
1153
  color: var(--lol-color-gold-100);
1076
1154
  }
1077
1155
 
1078
- ._input_7htjg_14 {
1156
+ ._input_tm8b9_14 {
1079
1157
  background:
1080
1158
  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC") no-repeat 5px center,
1081
1159
  var(--lol-search-field-background-gradient) padding-box,
@@ -1112,20 +1190,30 @@
1112
1190
  --lol-search-field-background-gradient: var(--lol-gradient-grey-focus);
1113
1191
  }
1114
1192
 
1115
- &._small_7htjg_51 {
1193
+ &._small_tm8b9_51 {
1116
1194
  min-height: var(--lol-form-height-small);
1117
1195
  }
1118
1196
 
1119
- &._medium_7htjg_55 {
1197
+ &._medium_tm8b9_55 {
1120
1198
  min-height: var(--lol-form-height-medium);
1121
1199
  }
1122
1200
 
1123
- &._large_7htjg_59 {
1201
+ &._large_tm8b9_59 {
1124
1202
  min-height: var(--lol-form-height-large);
1125
1203
  }
1126
1204
  }
1127
1205
 
1128
- ._button_7htjg_64 {
1206
+ ._button_tm8b9_64 {
1207
+ /* A <button> we never paint: without this it falls back to the UA's
1208
+ `buttonface` slab, which is grey under `color-scheme: dark`. */
1209
+ appearance: none;
1210
+ background: none;
1211
+ border: 0;
1212
+ margin: 0;
1213
+ padding: 0;
1214
+ font: inherit;
1215
+ letter-spacing: inherit;
1216
+
1129
1217
  grid-area: button;
1130
1218
 
1131
1219
  font-size: 0.75rem;
@@ -1153,95 +1241,110 @@
1153
1241
  }
1154
1242
  }
1155
1243
  }
1156
- /* Base tag sets up CSS variables; variants (gold/hextech) define actual gradients */
1157
- ._tag_qypr1_2 {
1158
- background:
1159
- var(--lol-multiple-select-background-gradient) padding-box,
1160
- var(--lol-multiple-select-border-gradient) border-box;
1161
-
1162
- border: 2px solid transparent;
1163
- border-radius: 9999px;
1164
-
1165
- align-items: center;
1166
- display: grid;
1167
- grid-template-columns: 1fr auto;
1168
-
1169
- font-family: var(--lol-font-family-spiegel);
1170
- letter-spacing: var(--lol-letter-spacing-sm);
1171
- font-weight: var(--lol-font-weight-sm);
1172
- font-size: 0.75rem;
1173
- line-height: 1;
1174
- color: var(--lol-color-gold-300);
1175
- padding: 0 0.3rem 0 0.5rem;
1176
- }
1244
+ @layer lol {
1245
+ /* Base tag sets up CSS variables; variants (gold/hextech) define actual gradients */
1246
+ ._tag_baprz_3 {
1247
+ background:
1248
+ var(--lol-multiple-select-background-gradient) padding-box,
1249
+ var(--lol-multiple-select-border-gradient) border-box;
1177
1250
 
1178
- ._gold_qypr1_23 {
1179
- border-width: 1px;
1180
- --lol-multiple-select-border-gradient: var(--lol-gradient-gold);
1181
- --lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
1182
- color: var(--lol-color-gold-300);
1183
- }
1251
+ border: 2px solid transparent;
1252
+ border-radius: 9999px;
1184
1253
 
1185
- ._hextech_qypr1_30 {
1186
- border-width: 1px;
1187
- --lol-multiple-select-border-gradient: var(--lol-gradient-hextech);
1188
- --lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
1189
- color: var(--lol-color-blue-100);
1190
- }
1254
+ align-items: center;
1255
+ display: grid;
1256
+ grid-template-columns: 1fr auto;
1191
1257
 
1192
- ._grey_qypr1_37 {
1193
- border-width: 1px;
1194
- --lol-multiple-select-border-gradient: var(--lol-color-grey-100);
1195
- --lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
1196
- color: var(--lol-color-gold-100);
1197
- }
1258
+ font-family: var(--lol-font-family-spiegel);
1259
+ letter-spacing: var(--lol-letter-spacing-sm);
1260
+ font-weight: var(--lol-font-weight-sm);
1261
+ font-size: 0.75rem;
1262
+ line-height: 1;
1263
+ color: var(--lol-color-gold-300);
1264
+ padding: 0 0.3rem 0 0.5rem;
1265
+ }
1198
1266
 
1199
- ._text_qypr1_44 {
1200
- padding: 0.25rem 0;
1201
- }
1267
+ ._gold_baprz_24 {
1268
+ border-width: 1px;
1269
+ --lol-multiple-select-border-gradient: var(--lol-gradient-gold);
1270
+ --lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
1271
+ color: var(--lol-color-gold-300);
1272
+ }
1202
1273
 
1203
- ._remove_qypr1_48 {
1204
- mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACKklEQVR42uzcvUoDQRQF4M0QBW0srHwICxttIygGRH0PsRAfwELsI/gkghYiiGATQVDwIawsUmihRbzjDyyLm2Qnc+eejefC6Taw+zGz88NkG/1+P2OVlyMBgQhEIAIRiEAEIhCLQAQiEIHQqhn6w97zU60edG5hEaoFNdjFymtecitpJXyOFckuVBcbgHMlWZJcSDYlNwlwLn0vkkxLTlBbUB7H1+wPUisRjq+OZB8RqIiTJUAq4mQaSE4RRxOpDCc6UgygswE4GkjDcPJIewhAh5K3Ea6LgTQqztdUTXKPAHQt2UqAVBWnLemivKS1kUxwYg/zWkhmOBoz6dhIpjhaS41YSOY4movVcZEgcDSBxkGCwdEGCkWCwUkBFIIEg5MKqCoSDE5KoFhISXFSA42LlBzHAigUyQTHCsjXq+SjwvVTkhmLG7UAqjLPyY9u55LVSQcKwTFFcjXBMUNyNcIxQXJgOL0KM+4kSA4Mp11xWaKO5MBwugFrN1UkB4YTusBVQ3KAOFBIDhQHBskB40AgOXAccyRXAxxTpBhAy1m6bdKqSMcIQKeSg4T7OaMiPUq2Ud5BnQFIGptdw5AeJGuSF6RR7C8kj7OR6ewEliF5nPUYOBrzoDzSL86d4nKmiBQVx1dT4aY90nv2fXhJE6eIdCTZiYnjqxH6v3nAk/b+8Hrpw6CdtLcolS8kNPjlhf/TgghEIAIRiEAEYhGIQAQiEIEINCH1KcAAQX7SgLqjwvQAAAAASUVORK5CYII=);
1205
- height: 1rem;
1206
- aspect-ratio: 1;
1207
- background-color: currentColor;
1208
- mask-size: contain;
1274
+ ._hextech_baprz_31 {
1275
+ border-width: 1px;
1276
+ --lol-multiple-select-border-gradient: var(--lol-gradient-hextech);
1277
+ --lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
1278
+ color: var(--lol-color-blue-100);
1279
+ }
1209
1280
 
1210
- &[data-hovered] {
1211
- background-color: var(--lol-color-gold-100);
1281
+ ._grey_baprz_38 {
1282
+ border-width: 1px;
1283
+ --lol-multiple-select-border-gradient: var(--lol-color-grey-100);
1284
+ --lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
1285
+ color: var(--lol-color-gold-100);
1212
1286
  }
1213
1287
 
1214
- &[data-pressed] {
1215
- background-color: var(--lol-color-grey-150);
1288
+ ._text_baprz_45 {
1289
+ padding: 0.25rem 0;
1216
1290
  }
1217
- }
1218
1291
 
1219
- ._tagGroup_qypr1_64 {
1220
- padding: 0.25rem;
1221
- display: flex;
1222
- justify-content: center;
1223
- }
1292
+ ._remove_baprz_49 {
1293
+ /* A <button> we never paint: without this it falls back to the UA's
1294
+ `buttonface` slab, which is grey under `color-scheme: dark`. The mask is
1295
+ filled with `currentColor`, so the inherited colour matters too. */
1296
+ appearance: none;
1297
+ border: 0;
1298
+ margin: 0;
1299
+ padding: 0;
1300
+ font: inherit;
1301
+ letter-spacing: inherit;
1302
+ color: inherit;
1224
1303
 
1225
- ._tagList_qypr1_70 {
1226
- display: flex;
1227
- flex-wrap: wrap;
1228
- gap: 0.25rem;
1229
- row-gap: 0.25rem;
1230
- }
1231
- ._popover_jlt01_1 {
1232
- width: 250px;
1233
- display: flex;
1234
- flex-direction: column;
1235
- }
1304
+ mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACKklEQVR42uzcvUoDQRQF4M0QBW0srHwICxttIygGRH0PsRAfwELsI/gkghYiiGATQVDwIawsUmihRbzjDyyLm2Qnc+eejefC6Taw+zGz88NkG/1+P2OVlyMBgQhEIAIRiEAEIhCLQAQiEIHQqhn6w97zU60edG5hEaoFNdjFymtecitpJXyOFckuVBcbgHMlWZJcSDYlNwlwLn0vkkxLTlBbUB7H1+wPUisRjq+OZB8RqIiTJUAq4mQaSE4RRxOpDCc6UgygswE4GkjDcPJIewhAh5K3Ea6LgTQqztdUTXKPAHQt2UqAVBWnLemivKS1kUxwYg/zWkhmOBoz6dhIpjhaS41YSOY4movVcZEgcDSBxkGCwdEGCkWCwUkBFIIEg5MKqCoSDE5KoFhISXFSA42LlBzHAigUyQTHCsjXq+SjwvVTkhmLG7UAqjLPyY9u55LVSQcKwTFFcjXBMUNyNcIxQXJgOL0KM+4kSA4Mp11xWaKO5MBwugFrN1UkB4YTusBVQ3KAOFBIDhQHBskB40AgOXAccyRXAxxTpBhAy1m6bdKqSMcIQKeSg4T7OaMiPUq2Ud5BnQFIGptdw5AeJGuSF6RR7C8kj7OR6ewEliF5nPUYOBrzoDzSL86d4nKmiBQVx1dT4aY90nv2fXhJE6eIdCTZiYnjqxH6v3nAk/b+8Hrpw6CdtLcolS8kNPjlhf/TgghEIAIRiEAEYhGIQAQiEIEINCH1KcAAQX7SgLqjwvQAAAAASUVORK5CYII=);
1305
+ height: 1rem;
1306
+ aspect-ratio: 1;
1307
+ background-color: currentColor;
1308
+ mask-size: contain;
1309
+
1310
+ &[data-hovered] {
1311
+ background-color: var(--lol-color-gold-100);
1312
+ }
1236
1313
 
1237
- ._select_jlt01_7 {
1238
- border-right: none;
1239
- display: flex;
1240
- align-items: center;
1314
+ &[data-pressed] {
1315
+ background-color: var(--lol-color-grey-150);
1316
+ }
1317
+ }
1318
+
1319
+ ._tagGroup_baprz_76 {
1320
+ padding: 0.25rem;
1321
+ display: flex;
1322
+ justify-content: center;
1323
+ }
1324
+
1325
+ ._tagList_baprz_82 {
1326
+ display: flex;
1327
+ flex-wrap: wrap;
1328
+ gap: 0.25rem;
1329
+ row-gap: 0.25rem;
1330
+ }
1241
1331
  }
1332
+ @layer lol {
1333
+ ._popover_1bri3_2 {
1334
+ width: 250px;
1335
+ display: flex;
1336
+ flex-direction: column;
1337
+ }
1242
1338
 
1243
- ._triggerContainer_jlt01_13 {
1244
- display: inline-flex;
1339
+ ._select_1bri3_8 {
1340
+ border-right: none;
1341
+ display: flex;
1342
+ align-items: center;
1343
+ }
1344
+
1345
+ ._triggerContainer_1bri3_14 {
1346
+ display: inline-flex;
1347
+ }
1245
1348
  }
1246
1349
  @layer lol {
1247
1350
  ._text_1tvjr_2 {
@@ -1310,7 +1413,10 @@
1310
1413
  }
1311
1414
  }
1312
1415
  @layer lol {
1313
- ._button_zllmp_2 {
1416
+ ._button_y5tgp_2 {
1417
+ /* A <button>; the trigger's whole look is drawn below. */
1418
+ appearance: none;
1419
+ margin: 0;
1314
1420
  font-family: var(--lol-font-family-spiegel);
1315
1421
  display: inline-block;
1316
1422
  min-width: 200px;
@@ -1352,40 +1458,40 @@
1352
1458
  filter: grayscale(100%);
1353
1459
  }
1354
1460
 
1355
- &._small_zllmp_44 {
1461
+ &._small_y5tgp_47 {
1356
1462
  min-height: var(--lol-form-height-small);
1357
1463
  }
1358
1464
 
1359
- &._medium_zllmp_48 {
1465
+ &._medium_y5tgp_51 {
1360
1466
  min-height: var(--lol-form-height-medium);
1361
1467
  }
1362
1468
 
1363
- &._large_zllmp_52 {
1469
+ &._large_y5tgp_55 {
1364
1470
  min-height: var(--lol-form-height-large);
1365
1471
  }
1366
1472
  }
1367
1473
 
1368
- ._singleSelect_zllmp_57 {
1474
+ ._singleSelect_y5tgp_60 {
1369
1475
  background:
1370
1476
  var(--lol-select-image) no-repeat right 0.5rem center,
1371
1477
  var(--lol-select-background-gradient) padding-box,
1372
1478
  var(--lol-select-border-gradient) border-box;
1373
1479
  }
1374
1480
 
1375
- ._multiSelect_zllmp_64 {
1481
+ ._multiSelect_y5tgp_67 {
1376
1482
  background:
1377
1483
  var(--lol-select-background-gradient) padding-box,
1378
1484
  var(--lol-select-border-gradient) border-box;
1379
1485
  }
1380
1486
 
1381
- ._listBox_zllmp_70 {
1487
+ ._listBox_y5tgp_73 {
1382
1488
  background-color: var(--lol-color-hextech-black);
1383
1489
  border: 1px solid var(--lol-color-gold-600);
1384
1490
  outline: none;
1385
1491
  overflow-y: auto;
1386
1492
  }
1387
1493
 
1388
- ._item_zllmp_77 {
1494
+ ._item_y5tgp_80 {
1389
1495
  border-bottom: 1px solid var(--lol-color-grey-300);
1390
1496
  color: var(--lol-color-gold-300);
1391
1497
  font-size: var(--lol-font-size-sm);
@@ -1402,7 +1508,7 @@
1402
1508
  }
1403
1509
 
1404
1510
  &[data-pressed],
1405
- &._focus_zllmp_94 {
1511
+ &._focus_y5tgp_97 {
1406
1512
  background-color: color-mix(
1407
1513
  in srgb,
1408
1514
  var(--lol-color-grey-300),
@@ -1411,20 +1517,20 @@
1411
1517
  color: var(--lol-color-gold-600);
1412
1518
  }
1413
1519
 
1414
- &._selected_zllmp_103 {
1520
+ &._selected_y5tgp_106 {
1415
1521
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAsElEQVR42pTQXQoBURTA8ZmbdxuxAi/WgfLmQb4pYgMi36QUJUuxBIvw7FEi/qfOrds0NPfW7+We85+mG95v18DjhGjglPKMNqjibTyilUYTbE3CaIE65ujLZZJQlptYomsvJUyjp1+Oi1pYo+MOjA7GmEWiKdrY6c7HHcqrjpDRpQeGGslv7VGLRjZ8Ii9PjAFyyOKISlxkQzkvFDUu4Izyr8gNA41KuODwL5LzFWAAUJ8mTIVblvcAAAAASUVORK5CYII=);
1416
1522
  background-position: right 0.5rem center;
1417
1523
  background-repeat: no-repeat;
1418
1524
  }
1419
1525
  }
1420
1526
 
1421
- ._popover_zllmp_110 {
1527
+ ._popover_y5tgp_113 {
1422
1528
  width: var(--trigger-width);
1423
1529
  display: flex;
1424
1530
  flex-direction: column;
1425
1531
  }
1426
1532
 
1427
- ._emptyList_zllmp_116 {
1533
+ ._emptyList_y5tgp_119 {
1428
1534
  padding: 0.5rem 0.25rem;
1429
1535
  text-align: center;
1430
1536
  }
@@ -1509,13 +1615,16 @@
1509
1615
  }
1510
1616
  }
1511
1617
  @layer lol {
1512
- ._spinner_9di76_2 {
1618
+ ._spinner_15he7_2 {
1619
+ /* Off the text baseline, so the box is the glyph. */
1620
+ display: block;
1621
+ max-width: 100%;
1513
1622
  aspect-ratio: 1 / 1;
1514
1623
  width: 3rem;
1515
- animation: _spin_9di76_2 1s linear infinite;
1624
+ animation: _spin_15he7_2 1s linear infinite;
1516
1625
  }
1517
1626
 
1518
- @keyframes _spin_9di76_2 {
1627
+ @keyframes _spin_15he7_2 {
1519
1628
  from {
1520
1629
  transform: rotate(0deg);
1521
1630
  }
@@ -1526,7 +1635,7 @@
1526
1635
  }
1527
1636
  }
1528
1637
  @layer lol {
1529
- ._toast_15hp0_2 {
1638
+ ._toast_1a46s_2 {
1530
1639
  padding: 1rem;
1531
1640
  border: 2px solid transparent;
1532
1641
  background:
@@ -1540,23 +1649,23 @@
1540
1649
  gap: 6px;
1541
1650
  }
1542
1651
 
1543
- ._default_15hp0_16 {
1652
+ ._default_1a46s_16 {
1544
1653
  --lol-toast-background-gradient: var(--lol-gradient-hextech-black);
1545
1654
  --lol-toast-border-gradient: var(--lol-gradient-grey-300);
1546
1655
  --lol-toast-icon-color: var(--lol-color-gold-300);
1547
1656
  }
1548
1657
 
1549
- ._title_15hp0_22 {
1658
+ ._title_1a46s_22 {
1550
1659
  font-size: var(--lol-font-size-sm);
1551
1660
  }
1552
1661
 
1553
- ._content_15hp0_26 {
1662
+ ._content_1a46s_26 {
1554
1663
  display: flex;
1555
1664
  align-items: flex-start;
1556
1665
  gap: 0.75rem;
1557
1666
  }
1558
1667
 
1559
- ._icon_15hp0_32 {
1668
+ ._icon_1a46s_32 {
1560
1669
  display: flex;
1561
1670
  height: 20px;
1562
1671
  width: 20px;
@@ -1569,25 +1678,30 @@
1569
1678
  & > * {
1570
1679
  flex-shrink: 0;
1571
1680
  }
1681
+ /* Off the text baseline, so the box is the glyph. */
1682
+ & > img {
1683
+ display: block;
1684
+ max-width: 100%;
1685
+ }
1572
1686
  & svg {
1573
1687
  margin-left: var(--toast-svg-margin-start);
1574
1688
  margin-right: var(--toast-svg-margin-end);
1575
1689
  }
1576
1690
  }
1577
1691
 
1578
- ._content_15hp0_26 {
1692
+ ._content_1a46s_26 {
1579
1693
  display: flex;
1580
1694
  flex-direction: column;
1581
1695
  gap: 2px;
1582
1696
  }
1583
1697
 
1584
- ._actions_15hp0_57 {
1698
+ ._actions_1a46s_62 {
1585
1699
  display: flex;
1586
1700
  justify-content: flex-end;
1587
1701
  margin-top: 0.25rem;
1588
1702
  }
1589
1703
 
1590
- ._button_15hp0_63 {
1704
+ ._button_1a46s_68 {
1591
1705
  padding-left: 8px;
1592
1706
  padding-right: 8px;
1593
1707
  margin-left: var(--toast-button-margin-start);
@@ -1595,7 +1709,7 @@
1595
1709
  flex-shrink: 0;
1596
1710
  }
1597
1711
 
1598
- ._closeButton_15hp0_71 {
1712
+ ._closeButton_1a46s_76 {
1599
1713
  position: absolute;
1600
1714
  min-height: 1.33rem !important;
1601
1715
  left: var(--toast-close-button-start);
@@ -1611,7 +1725,7 @@
1611
1725
  z-index: 1;
1612
1726
  }
1613
1727
 
1614
- ._loader_15hp0_87 {
1728
+ ._loader_1a46s_92 {
1615
1729
  width: 20px;
1616
1730
  height: 20px;
1617
1731
  }
@@ -1697,12 +1811,12 @@
1697
1811
  }
1698
1812
  }
1699
1813
  @layer lol {
1700
- ._resizableContainer_1vns6_2 {
1814
+ ._resizableContainer_1iv6r_2 {
1701
1815
  overflow: auto;
1702
1816
  position: relative;
1703
1817
  }
1704
1818
 
1705
- ._table_1vns6_7 {
1819
+ ._table_1iv6r_7 {
1706
1820
  border-collapse: collapse;
1707
1821
  border-spacing: 0;
1708
1822
  width: 100%;
@@ -1720,7 +1834,7 @@
1720
1834
  }
1721
1835
  }
1722
1836
 
1723
- ._row_1vns6_25 {
1837
+ ._row_1iv6r_25 {
1724
1838
  color: var(--lol-color-grey-100);
1725
1839
  outline: none;
1726
1840
  transition: color 0.3s ease;
@@ -1779,7 +1893,14 @@
1779
1893
  }
1780
1894
  }
1781
1895
 
1782
- ._cell_1vns6_84 {
1896
+ ._cell_1iv6r_84 {
1897
+ /*
1898
+ * Collapsed borders are resolved between neighbours, and Chrome paints the
1899
+ * winning hairline once per edge when the losing side is styled `none`. The
1900
+ * header's 25%-opacity line then blends twice and comes out twice as
1901
+ * bright; a zero-width `solid` border on the cell below keeps it single.
1902
+ */
1903
+ border: 0 solid;
1783
1904
  padding: 0.375rem 0.75rem;
1784
1905
  vertical-align: middle;
1785
1906
  outline: none;
@@ -1790,7 +1911,7 @@
1790
1911
  }
1791
1912
  }
1792
1913
 
1793
- ._resizer_1vns6_95 {
1914
+ ._resizer_1iv6r_102 {
1794
1915
  position: absolute;
1795
1916
  inset-block: 0;
1796
1917
  inset-inline-end: 0;
@@ -1822,7 +1943,7 @@
1822
1943
  }
1823
1944
 
1824
1945
  /* Fixed footprint so toggling the sort direction never shifts the header. */
1825
- ._sortIndicator_1vns6_127 {
1946
+ ._sortIndicator_1iv6r_134 {
1826
1947
  display: inline-block;
1827
1948
  vertical-align: middle;
1828
1949
  width: 0.5rem;
@@ -1846,7 +1967,7 @@
1846
1967
  }
1847
1968
  }
1848
1969
 
1849
- ._column_1vns6_151 {
1970
+ ._column_1iv6r_158 {
1850
1971
  position: relative;
1851
1972
  font-family: var(--lol-font-family-beaufort);
1852
1973
  color: var(--lol-color-gold-100);
@@ -1882,15 +2003,15 @@
1882
2003
  color: var(--lol-color-gold-500);
1883
2004
  }
1884
2005
 
1885
- &[data-hovered] ._sortIndicator_1vns6_127 {
2006
+ &[data-hovered] ._sortIndicator_1iv6r_134 {
1886
2007
  opacity: 0.5;
1887
2008
  }
1888
2009
 
1889
- &[data-sort-direction] ._sortIndicator_1vns6_127 {
2010
+ &[data-sort-direction] ._sortIndicator_1iv6r_134 {
1890
2011
  opacity: 1;
1891
2012
  }
1892
2013
 
1893
- &[data-sort-direction="descending"] ._sortIndicator_1vns6_127::after {
2014
+ &[data-sort-direction="descending"] ._sortIndicator_1iv6r_134::after {
1894
2015
  border-width: 0.375rem 0.25rem 0;
1895
2016
  border-top-color: currentColor;
1896
2017
  border-bottom-color: transparent;
@@ -1902,28 +2023,34 @@
1902
2023
  }
1903
2024
  }
1904
2025
 
1905
- ._footer_1vns6_207 {
2026
+ ._footer_1iv6r_214 {
1906
2027
  color: var(--lol-color-gold-300);
1907
2028
 
1908
- & ._cell_1vns6_84 {
2029
+ & ._cell_1iv6r_84 {
1909
2030
  border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
1910
2031
  }
1911
2032
  }
1912
2033
 
1913
- ._empty_1vns6_215 {
2034
+ ._empty_1iv6r_222 {
1914
2035
  padding: 1rem 0.75rem;
1915
2036
  text-align: center;
1916
2037
  }
1917
2038
 
1918
- ._start_1vns6_220 {
2039
+ /* React aria renders the empty state in a row it builds itself, so that cell
2040
+ never gets `.cell` and keeps the UA's 1px padding. */
2041
+ ._table_1iv6r_7 [data-empty] > tr > td {
2042
+ padding: 0;
2043
+ }
2044
+
2045
+ ._start_1iv6r_233 {
1919
2046
  text-align: start;
1920
2047
  }
1921
2048
 
1922
- ._center_1vns6_224 {
2049
+ ._center_1iv6r_237 {
1923
2050
  text-align: center;
1924
2051
  }
1925
2052
 
1926
- ._end_1vns6_228 {
2053
+ ._end_1iv6r_241 {
1927
2054
  text-align: end;
1928
2055
  }
1929
2056
  }
@@ -1991,7 +2118,7 @@
1991
2118
  }
1992
2119
  }
1993
2120
  @layer lol {
1994
- ._textField_cjv2r_2 {
2121
+ ._textField_1dbgw_2 {
1995
2122
  background:
1996
2123
  var(--lol-input-background-gradient) padding-box,
1997
2124
  var(--lol-input-border-gradient) border-box;
@@ -2027,26 +2154,29 @@
2027
2154
  --lol-input-background-gradient: var(--lol-gradient-grey-focus);
2028
2155
  }
2029
2156
 
2030
- &._small_cjv2r_38 {
2157
+ &._small_1dbgw_38 {
2031
2158
  min-height: var(--lol-form-height-small);
2032
2159
  }
2033
2160
 
2034
- &._medium_cjv2r_42 {
2161
+ &._medium_1dbgw_42 {
2035
2162
  min-height: var(--lol-form-height-medium);
2036
2163
  }
2037
2164
 
2038
- &._large_cjv2r_46 {
2165
+ &._large_1dbgw_46 {
2039
2166
  min-height: var(--lol-form-height-large);
2040
2167
  }
2041
2168
 
2042
- &._textArea_cjv2r_50 {
2169
+ &._textArea_1dbgw_50 {
2043
2170
  padding-top: 0.5rem;
2044
2171
  padding-bottom: 0.5rem;
2172
+ /* The UA lets a textarea be resized in both axes, which breaks the
2173
+ field's layout; only the height is safe to drag. */
2174
+ resize: vertical;
2045
2175
  }
2046
2176
  }
2047
2177
  }
2048
2178
  @layer lol {
2049
- ._toolbar_pv0cj_2 {
2179
+ ._toolbar_1j7x4_2 {
2050
2180
  display: flex;
2051
2181
  align-items: center;
2052
2182
  gap: 0.5rem;
@@ -2061,9 +2191,12 @@
2061
2191
  }
2062
2192
  }
2063
2193
 
2064
- ._separator_pv0cj_17 {
2194
+ ._separator_1j7x4_17 {
2065
2195
  border: none;
2196
+ /* An <hr> when horizontal: the UA gives it block margins and a grey
2197
+ `color`. */
2066
2198
  margin: 0;
2199
+ color: inherit;
2067
2200
  flex: none;
2068
2201
  align-self: stretch;
2069
2202
  height: 1px;
@@ -2088,7 +2221,7 @@
2088
2221
  }
2089
2222
  }
2090
2223
  @layer lol {
2091
- ._tree_1jyu5_2 {
2224
+ ._tree_17ans_2 {
2092
2225
  --lol-tree-indent: 1.125rem;
2093
2226
 
2094
2227
  box-sizing: border-box;
@@ -2107,7 +2240,7 @@
2107
2240
  }
2108
2241
  }
2109
2242
 
2110
- ._item_1jyu5_21 {
2243
+ ._item_17ans_21 {
2111
2244
  display: flex;
2112
2245
  align-items: center;
2113
2246
  gap: 0.375rem;
@@ -2190,16 +2323,24 @@
2190
2323
 
2191
2324
  /* Top-level items are separated by the client's faint gold hairline. The
2192
2325
  sibling combinator keeps it off the first row, whichever level follows. */
2193
- ._item_1jyu5_21 + ._item_1jyu5_21[data-level="1"] {
2326
+ ._item_17ans_21 + ._item_17ans_21[data-level="1"] {
2194
2327
  border-top: 1px solid var(--lol-color-gold-600);
2195
2328
  }
2196
2329
 
2197
- ._chevron_1jyu5_108 {
2330
+ ._chevron_17ans_108 {
2331
+ /* A <button> we never paint: without this it falls back to the UA's
2332
+ `buttonface` slab, which is grey under `color-scheme: dark`. */
2333
+ appearance: none;
2334
+ border: 0;
2335
+ margin: 0;
2336
+ padding: 0;
2337
+ font: inherit;
2338
+ letter-spacing: inherit;
2339
+ color: inherit;
2340
+
2198
2341
  flex: none;
2199
2342
  width: 0.5rem;
2200
2343
  height: 0.75rem;
2201
- padding: 0;
2202
- border: none;
2203
2344
  outline: none;
2204
2345
  cursor: pointer;
2205
2346
 
@@ -2217,27 +2358,27 @@
2217
2358
  }
2218
2359
  }
2219
2360
 
2220
- ._chevronSpacer_1jyu5_131 {
2361
+ ._chevronSpacer_17ans_139 {
2221
2362
  flex: none;
2222
2363
  width: 0.5rem;
2223
2364
  }
2224
2365
 
2225
- ._item_1jyu5_21[data-expanded] ._chevron_1jyu5_108 {
2366
+ ._item_17ans_21[data-expanded] ._chevron_17ans_108 {
2226
2367
  rotate: 90deg;
2227
2368
  }
2228
2369
 
2229
- ._item_1jyu5_21[data-hovered] ._chevron_1jyu5_108,
2230
- ._chevron_1jyu5_108[data-hovered],
2231
- ._chevron_1jyu5_108[data-focus-visible] {
2370
+ ._item_17ans_21[data-hovered] ._chevron_17ans_108,
2371
+ ._chevron_17ans_108[data-hovered],
2372
+ ._chevron_17ans_108[data-focus-visible] {
2232
2373
  --lol-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
2233
2374
  }
2234
2375
 
2235
- ._item_1jyu5_21[data-disabled] ._chevron_1jyu5_108 {
2376
+ ._item_17ans_21[data-disabled] ._chevron_17ans_108 {
2236
2377
  cursor: default;
2237
2378
  filter: grayscale(100%);
2238
2379
  }
2239
2380
 
2240
- ._label_1jyu5_151 {
2381
+ ._label_17ans_159 {
2241
2382
  flex: 1;
2242
2383
  min-width: 0;
2243
2384
  overflow: hidden;
@@ -2245,18 +2386,18 @@
2245
2386
  text-overflow: ellipsis;
2246
2387
  }
2247
2388
 
2248
- ._empty_1jyu5_159 {
2389
+ ._empty_17ans_167 {
2249
2390
  padding: 1rem 0.75rem;
2250
2391
  text-align: center;
2251
2392
  }
2252
2393
 
2253
- ._loadMore_1jyu5_164 {
2394
+ ._loadMore_17ans_172 {
2254
2395
  display: flex;
2255
2396
  justify-content: center;
2256
2397
  padding: 0.5rem;
2257
2398
  }
2258
2399
 
2259
- ._spinner_1jyu5_170 {
2400
+ ._spinner_17ans_178 {
2260
2401
  width: 1.5rem;
2261
2402
  }
2262
2403
  }