@ebay/skin 19.11.0 → 19.12.1

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.
@@ -244,6 +244,11 @@ ul.accordion--large summary.details__summary{
244
244
  opacity:1;
245
245
  }
246
246
  }
247
+ :root{
248
+ --dialog-scrim-color-hide:rgb(17 24 32 / 0);
249
+ --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
250
+ --dialog-lightbox-max-width:616px;
251
+ }
247
252
  .alert-dialog[role=alertdialog]{
248
253
  background-color:var(--dialog-scrim-color-show);
249
254
  bottom:0;
@@ -532,6 +537,7 @@ ul.accordion--large summary.details__summary{
532
537
  line-height:128px;
533
538
  width:128px;
534
539
  }
540
+
535
541
  .badge{
536
542
  align-items:center;
537
543
  background-color:var(--badge-background-color, var(--color-background-attention));
@@ -546,6 +552,7 @@ ul.accordion--large summary.details__summary{
546
552
  padding:2px 6px;
547
553
  white-space:nowrap;
548
554
  }
555
+
549
556
  nav.breadcrumbs{
550
557
  color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
551
558
  font-size:var(--font-size-small);
@@ -652,6 +659,8 @@ nav.breadcrumbs .fake-menu-button__menu,nav.breadcrumbs .menu-button__menu{
652
659
  }
653
660
  }
654
661
  a.fake-btn,button.btn{
662
+ align-content:center;
663
+ align-items:center;
655
664
  background-color:initial;
656
665
  border:1px solid;
657
666
  border-radius:var(--btn-border-radius, 20px);
@@ -663,7 +672,7 @@ a.fake-btn,button.btn{
663
672
  margin:0;
664
673
  min-height:40px;
665
674
  min-width:88px;
666
- padding:9.5px 20px;
675
+ padding:0 20px;
667
676
  text-align:center;
668
677
  text-decoration:none;
669
678
  vertical-align:bottom;
@@ -774,11 +783,29 @@ a.fake-btn--primary,button.btn--primary{
774
783
  border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
775
784
  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
776
785
  font-weight:700;
786
+ overflow:hidden;
787
+ position:relative;
777
788
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
778
789
  }
779
790
  a.fake-btn--primary:active,button.btn--primary:active{
780
791
  transform:scale(.97);
781
792
  }
793
+ a.fake-btn--primary:after,button.btn--primary:after{
794
+ background-color:var(--state-layer-neutral);
795
+ content:"";
796
+ inset:0;
797
+ pointer-events:none;
798
+ position:absolute;
799
+ }
800
+ a.fake-btn--primary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--primary[href]:hover:after,button.btn--primary:not([disabled],[aria-disabled=true]):hover:after,button.btn--primary[href]:hover:after{
801
+ background-color:var(--state-layer-hover);
802
+ }
803
+ a.fake-btn--primary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--primary[href]:focus:after,button.btn--primary:not([disabled],[aria-disabled=true]):focus:after,button.btn--primary[href]:focus:after{
804
+ background-color:var(--state-layer-focus);
805
+ }
806
+ a.fake-btn--primary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--primary[href]:active:after,button.btn--primary:not([disabled],[aria-disabled=true]):active:after,button.btn--primary[href]:active:after{
807
+ background-color:var(--state-layer-pressed);
808
+ }
782
809
 
783
810
  a.fake-btn--primary{
784
811
  outline-color:var(--color-foreground-primary);
@@ -788,19 +815,29 @@ a.fake-btn--primary:visited{
788
815
  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
789
816
  }
790
817
 
791
- a.fake-btn--primary[href]:focus,a.fake-btn--primary[href]:hover,button.btn--primary:not([disabled],[aria-disabled=true]):focus,button.btn--primary:not([disabled],[aria-disabled=true]):hover{
792
- background-blend-mode:multiply;
793
- filter:brightness(96%);
794
- }
795
- a.fake-btn--primary[href]:active,button.btn--primary:not([disabled],[aria-disabled=true]):active{
796
- filter:brightness(92%);
797
- }
798
-
799
818
  a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
800
819
  background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
801
820
  border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
802
821
  color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
803
822
  font-weight:700;
823
+ overflow:hidden;
824
+ position:relative;
825
+ }
826
+ a.fake-btn--primary.fake-btn--destructive:after,button.btn--primary.btn--destructive:after{
827
+ background-color:var(--state-layer-neutral);
828
+ content:"";
829
+ inset:0;
830
+ pointer-events:none;
831
+ position:absolute;
832
+ }
833
+ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--primary.fake-btn--destructive[href]:hover:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):hover:after,button.btn--primary.btn--destructive[href]:hover:after{
834
+ background-color:var(--state-layer-hover);
835
+ }
836
+ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--primary.fake-btn--destructive[href]:focus:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):focus:after,button.btn--primary.btn--destructive[href]:focus:after{
837
+ background-color:var(--state-layer-focus);
838
+ }
839
+ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--primary.fake-btn--destructive[href]:active:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):active:after,button.btn--primary.btn--destructive[href]:active:after{
840
+ background-color:var(--state-layer-pressed);
804
841
  }
805
842
 
806
843
  button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
@@ -808,13 +845,6 @@ button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn
808
845
  border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
809
846
  }
810
847
 
811
- a.fake-btn--primary.fake-btn--destructive[href]:focus,a.fake-btn--primary.fake-btn--destructive[href]:hover,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
812
- background-color:var(--color-state-attention-hover);
813
- }
814
- a.fake-btn--primary.fake-btn--destructive[href]:active,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):active{
815
- background-color:var(--color-state-attention-active);
816
- }
817
-
818
848
  button.btn .progress-spinner{
819
849
  height:24px;
820
850
  margin:-4px 0;
@@ -841,11 +871,11 @@ a.fake-btn[aria-expanded=true] svg.icon--12,button.btn[aria-expanded=true] svg.i
841
871
  }
842
872
 
843
873
  a.fake-btn--large svg.icon,button.btn--large svg.icon{
844
- max-height:22px;
874
+ max-height:48px;
845
875
  }
846
876
 
847
877
  a.fake-btn--small svg.icon,button.btn--small svg.icon{
848
- max-height:20px;
878
+ max-height:32px;
849
879
  }
850
880
 
851
881
  button.btn--primary[aria-disabled=true],button.btn--primary[disabled]{
@@ -867,44 +897,40 @@ a.fake-btn--secondary,button.btn--secondary{
867
897
  background-color:var(--btn-secondary-background-color, transparent);
868
898
  border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
869
899
  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
900
+ overflow:hidden;
901
+ position:relative;
870
902
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
871
903
  }
872
904
  a.fake-btn--secondary:active,button.btn--secondary:active{
873
905
  transform:scale(.97);
874
906
  }
907
+ a.fake-btn--secondary:after,button.btn--secondary:after{
908
+ background-color:var(--state-layer-neutral);
909
+ content:"";
910
+ inset:0;
911
+ pointer-events:none;
912
+ position:absolute;
913
+ }
914
+ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--secondary[href]:hover:after,button.btn--secondary:not([disabled],[aria-disabled=true]):hover:after,button.btn--secondary[href]:hover:after{
915
+ background-color:var(--state-layer-hover);
916
+ }
917
+ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--secondary[href]:focus:after,button.btn--secondary:not([disabled],[aria-disabled=true]):focus:after,button.btn--secondary[href]:focus:after{
918
+ background-color:var(--state-layer-focus);
919
+ }
920
+ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--secondary[href]:active:after,button.btn--secondary:not([disabled],[aria-disabled=true]):active:after,button.btn--secondary[href]:active:after{
921
+ background-color:var(--state-layer-pressed);
922
+ }
875
923
 
876
924
  a.fake-btn--secondary:visited{
877
925
  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
878
926
  }
879
927
 
880
- a.fake-btn--secondary[href]:active,button.btn--secondary:not([disabled],[aria-disabled=true]):active{
881
- background-color:var(--color-state-primary-active);
882
- border-color:var(--color-state-active-foreground-on-secondary);
883
- color:var(--color-state-active-foreground-on-secondary);
884
- }
885
- a.fake-btn--secondary[href]:focus,a.fake-btn--secondary[href]:hover,button.btn--secondary:not([disabled],[aria-disabled=true]):focus,button.btn--secondary:not([disabled],[aria-disabled=true]):hover{
886
- background-color:var(--color-state-primary-hover);
887
- border-color:var(--color-state-hover-foreground-on-secondary);
888
- color:var(--color-state-hover-foreground-on-secondary);
889
- }
890
-
891
928
  a.fake-btn--secondary.fake-btn--destructive,button.btn--secondary.btn--destructive{
892
929
  background-color:var(--btn-secondary-destructive-background-color, transparent);
893
930
  border-color:var(--btn-secondary-destructive-border-color, var(--color-stroke-attention));
894
931
  color:var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
895
932
  }
896
933
 
897
- a.fake-btn--secondary.fake-btn--destructive[href]:focus,a.fake-btn--secondary.fake-btn--destructive[href]:hover,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
898
- background-color:var(--color-state-primary-hover);
899
- border-color:var(--color-state-hover-foreground-on-secondary-desctructive);
900
- color:var(--color-state-hover-foreground-on-secondary-desctructive);
901
- }
902
- a.fake-btn--secondary.fake-btn--destructive[href]:active,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):active{
903
- background-color:var(--color-state-primary-active);
904
- border-color:var(--color-state-active-foreground-on-secondary-desctructive);
905
- color:var(--color-state-active-foreground-on-secondary-desctructive);
906
- }
907
-
908
934
  button.btn--secondary.btn--destructive .progress-spinner{
909
935
  --color-spinner-icon-background:#f39fb0;
910
936
  --color-spinner-icon-foreground:#e0103a;
@@ -926,17 +952,28 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
926
952
 
927
953
  a.fake-btn--tertiary,button.btn--tertiary{
928
954
  border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
955
+ overflow:hidden;
956
+ position:relative;
929
957
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
930
958
  }
931
959
  a.fake-btn--tertiary:active,button.btn--tertiary:active{
932
960
  transform:scale(.97);
933
961
  }
934
-
935
- a.fake-btn--tertiary[href]:focus,a.fake-btn--tertiary[href]:hover,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover{
936
- background-color:var(--color-state-secondary-hover);
962
+ a.fake-btn--tertiary:after,button.btn--tertiary:after{
963
+ background-color:var(--state-layer-neutral);
964
+ content:"";
965
+ inset:0;
966
+ pointer-events:none;
967
+ position:absolute;
937
968
  }
938
- a.fake-btn--tertiary[href]:active,button.btn--tertiary:not([disabled],[aria-disabled=true]):active{
939
- background-color:var(--color-state-secondary-active);
969
+ a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--tertiary[href]:hover:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover:after,button.btn--tertiary[href]:hover:after{
970
+ background-color:var(--state-layer-hover);
971
+ }
972
+ a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--tertiary[href]:focus:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus:after,button.btn--tertiary[href]:focus:after{
973
+ background-color:var(--state-layer-focus);
974
+ }
975
+ a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--tertiary[href]:active:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):active:after,button.btn--tertiary[href]:active:after{
976
+ background-color:var(--state-layer-pressed);
940
977
  }
941
978
 
942
979
  a.fake-btn--tertiary:not([href]),a.fake-btn--tertiary[aria-disabled=true],button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
@@ -948,13 +985,6 @@ a.fake-btn--tertiary.fake-btn--destructive,button.btn--tertiary.btn--destructive
948
985
  border-color:var(--btn-tertiary-destructive-foreground-color, var(--color-stroke-subtle));
949
986
  }
950
987
 
951
- a.fake-btn--tertiary.fake-btn--destructive[href]:focus,a.fake-btn--tertiary.fake-btn--destructive[href]:hover,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
952
- background-color:var(--color-state-secondary-hover);
953
- }
954
- a.fake-btn--tertiary.fake-btn--destructive[href]:active,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):active{
955
- background-color:var(--color-state-secondary-active);
956
- }
957
-
958
988
  button.btn--tertiary.btn--destructive[aria-disabled=true],button.btn--tertiary.btn--destructive[disabled]{
959
989
  color:var(--btn-tertiary-destructive-disabled-foreground-color, var(--color-foreground-disabled));
960
990
  }
@@ -968,48 +998,54 @@ a.fake-btn--large,button.btn--large{
968
998
  border-radius:var(--btn-border-radius, 24px);
969
999
  font-size:var(--font-size-medium);
970
1000
  min-height:48px;
971
- padding:13px 20px;
1001
+ padding:0 20px;
972
1002
  }
973
1003
 
974
1004
  a.fake-btn--small,button.btn--small{
975
1005
  border-radius:var(--btn-border-radius, 16px);
976
1006
  font-size:var(--font-size-default);
977
1007
  min-height:32px;
978
- padding:6px 16px;
1008
+ padding:0 16px;
979
1009
  }
980
1010
 
981
1011
  a.fake-btn--form,button.btn--form{
982
1012
  border-color:inherit;
983
1013
  border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
984
1014
  max-width:100%;
1015
+ overflow:hidden;
1016
+ position:relative;
985
1017
  }
986
-
987
- a.fake-btn--form:not([href]):focus,a.fake-btn--form:not([href]):hover,button.btn--form:not([disabled],[aria-disabled=true]):focus,button.btn--form:not([disabled],[aria-disabled=true]):hover{
988
- background-color:var(--color-state-primary-hover);
1018
+ a.fake-btn--form:after,button.btn--form:after{
1019
+ background-color:var(--state-layer-neutral);
1020
+ content:"";
1021
+ inset:0;
1022
+ pointer-events:none;
1023
+ position:absolute;
989
1024
  }
990
- a.fake-btn--form:not([href]):active,button.btn--form:not([disabled],[aria-disabled=true]):active{
991
- background-color:var(--color-state-primary-active);
1025
+ a.fake-btn--form:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--form[href]:hover:after,button.btn--form:not([disabled],[aria-disabled=true]):hover:after,button.btn--form[href]:hover:after{
1026
+ background-color:var(--state-layer-hover);
1027
+ }
1028
+ a.fake-btn--form:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--form[href]:focus:after,button.btn--form:not([disabled],[aria-disabled=true]):focus:after,button.btn--form[href]:focus:after{
1029
+ background-color:var(--state-layer-focus);
1030
+ }
1031
+ a.fake-btn--form:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--form[href]:active:after,button.btn--form:not([disabled],[aria-disabled=true]):active:after,button.btn--form[href]:active:after{
1032
+ background-color:var(--state-layer-pressed);
992
1033
  }
993
1034
 
994
1035
  button.btn--form.btn--large{
995
- padding:13px 20px;
1036
+ padding:0 20px;
996
1037
  }
997
1038
 
998
1039
  button.btn--form.btn--small{
999
- padding:6px 16px;
1040
+ padding:0 16px;
1000
1041
  }
1001
1042
  a.fake-btn--transparent,a.fake-btn--transparent:focus,a.fake-btn--transparent:hover,button.btn--transparent,button.btn--transparent:focus,button.btn--transparent:hover{
1002
1043
  background-color:initial;
1003
1044
  }
1004
1045
 
1005
- a.fake-btn--fixed-height,button.btn--fixed-height{
1006
- padding-top:calc(21.5px - .75em);
1007
- }
1008
-
1009
1046
  a.fake-btn--large-fixed-height,button.btn--large-fixed-height{
1010
1047
  height:48px;
1011
1048
  min-height:48px;
1012
- padding-top:calc(27px - .75em);
1013
1049
  }
1014
1050
 
1015
1051
  a.fake-btn--truncated,a.fake-btn--truncated span,button.btn--truncated,button.btn--truncated span{
@@ -1023,7 +1059,7 @@ a.fake-btn--large-truncated,button.btn--large-truncated{
1023
1059
  font-size:var(--font-size-medium);
1024
1060
  height:48px;
1025
1061
  min-height:48px;
1026
- padding:13px 20px;
1062
+ padding:0 20px;
1027
1063
  }
1028
1064
  a.fake-btn--large-truncated,a.fake-btn--large-truncated span,button.btn--large-truncated,button.btn--large-truncated span{
1029
1065
  line-height:1.4em;
@@ -1043,10 +1079,6 @@ a.fake-btn--split-end,button.btn--split-end{
1043
1079
  padding-left:8px;
1044
1080
  padding-right:8px;
1045
1081
  }
1046
-
1047
- a.fake-btn.fake-btn--tertiary.fake-btn--split-end,button.btn.btn--tertiary.btn--split-end{
1048
- margin-left:-2px;
1049
- }
1050
1082
  a.fake-btn.fake-btn--primary.fake-btn--split-end,a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,button.btn.btn--primary.btn--split-end,button.btn.btn--primary.btn--split-end:focus,button.btn.btn--primary.btn--split-end:hover{
1051
1083
  border-left-color:var(--btn-primary-border-split-color, var(--color-background-primary));
1052
1084
  }
@@ -1527,6 +1559,7 @@ span.carousel,span.carousel__container{
1527
1559
  .carousel--hidden-scrollbar .carousel__control--next{
1528
1560
  right:0;
1529
1561
  }
1562
+
1530
1563
  @font-face{
1531
1564
  font-family:Reddit Sans Condensed Bold;
1532
1565
  src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
@@ -1569,6 +1602,7 @@ span.carousel,span.carousel__container{
1569
1602
  text-align:center;
1570
1603
  width:39px;
1571
1604
  }
1605
+
1572
1606
  .calendar{
1573
1607
  color:var(--calendar-color-token, var(--color-foreground-primary));
1574
1608
  display:table;
@@ -1867,6 +1901,7 @@ input.checkbox__control[type=checkbox]:focus+span.checkbox__icon{
1867
1901
  input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__icon{
1868
1902
  outline:none;
1869
1903
  }
1904
+
1870
1905
  .chip{
1871
1906
  align-items:center;
1872
1907
  background-color:var(--color-background-strong);
@@ -1920,6 +1955,7 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
1920
1955
  .chip button.chip__button:hover{
1921
1956
  background-color:var(--state-layer-hover);
1922
1957
  }
1958
+
1923
1959
  .chips-combobox{
1924
1960
  background-color:var(--color-background-secondary);
1925
1961
  border:1px solid var(--color-stroke-default);
@@ -2027,6 +2063,9 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
2027
2063
  [dir=rtl] .chips-combobox .combobox__control>input{
2028
2064
  padding:var(--spacing-75) 0;
2029
2065
  }
2066
+ :root{
2067
+ --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
2068
+ }
2030
2069
  .combobox{
2031
2070
  box-sizing:border-box;
2032
2071
  line-height:normal;
@@ -2279,6 +2318,7 @@ span.combobox{
2279
2318
  left:1px;
2280
2319
  right:inherit;
2281
2320
  }
2321
+
2282
2322
  .confirm-dialog[role=dialog]{
2283
2323
  background-color:var(--dialog-scrim-color-show);
2284
2324
  bottom:0;
@@ -2428,6 +2468,8 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2428
2468
  }
2429
2469
  }
2430
2470
  a.cta-btn{
2471
+ align-content:center;
2472
+ align-items:center;
2431
2473
  background-color:var(--cta-btn-background-color, var(--color-background-primary));
2432
2474
  border:1px solid;
2433
2475
  border-radius:var(--cta-btn-border-radius, 20px);
@@ -2438,7 +2480,8 @@ a.cta-btn{
2438
2480
  font-size:var(--font-size-default);
2439
2481
  margin:0;
2440
2482
  max-width:100%;
2441
- padding:9.5px 20px;
2483
+ min-height:40px;
2484
+ padding:0 20px;
2442
2485
  text-align:center;
2443
2486
  text-decoration:none;
2444
2487
  vertical-align:bottom;
@@ -2536,6 +2579,7 @@ a.cta-btn--large{
2536
2579
  [dir=rtl] a.cta-btn svg.icon--arrow-right-24{
2537
2580
  transform:rotate(180deg);
2538
2581
  }
2582
+
2539
2583
  .date-textbox{
2540
2584
  --calendar-month-width:311px;
2541
2585
  display:inline-block;
@@ -2618,6 +2662,7 @@ details.details[open] summary.details__summary:before{
2618
2662
  details.details summary:focus:not(:focus-visible){
2619
2663
  outline:none;
2620
2664
  }
2665
+
2621
2666
  :root{
2622
2667
  --donut-chart-max-width:600px;
2623
2668
  --donut-chart-graph-size-sm:140px;
@@ -2865,6 +2910,7 @@ button.icon-btn.drawer-dialog__close{
2865
2910
  .drawer-dialog__handle:focus:not(:focus-visible){
2866
2911
  outline:none;
2867
2912
  }
2913
+
2868
2914
  .education-notice{
2869
2915
  background-color:var(--education-notice-default-background-color, var(--color-background-secondary));
2870
2916
  border-radius:var(--education-notice-border-radius, var(--border-radius-100));
@@ -3237,6 +3283,7 @@ div.field__description{
3237
3283
  [dir=rtl] .field__description--group>:last-child{
3238
3284
  text-align:left;
3239
3285
  }
3286
+
3240
3287
  .file-preview-card{
3241
3288
  display:flex;
3242
3289
  flex-direction:column;
@@ -3365,6 +3412,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
3365
3412
  color:var(--color-foreground-secondary);
3366
3413
  font-size:var(--font-size-small);
3367
3414
  }
3415
+
3368
3416
  div.file-preview-card-group{
3369
3417
  container:file-preview-cards-container/inline-size;
3370
3418
  }
@@ -3798,6 +3846,7 @@ button.filter-chip[aria-expanded=true] .filter-chip__trailing{
3798
3846
  .filter-input--large .textbox__control{
3799
3847
  height:48px;
3800
3848
  }
3849
+
3801
3850
  .filter-menu,.filter-menu-form{
3802
3851
  background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
3803
3852
  min-width:144px;
@@ -5257,6 +5306,7 @@ For complete information visit: www.freakflagsprite.com
5257
5306
  height:37px;
5258
5307
  width:60px;
5259
5308
  }
5309
+
5260
5310
  .floating-label{
5261
5311
  position:relative;
5262
5312
  }
@@ -5500,6 +5550,7 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
5500
5550
  .fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,.fullscreen-dialog--show .fullscreen-dialog__window--slide,.fullscreen-dialog--show .fullscreen-dialog__window--slide-end{
5501
5551
  transform:translateX(0);
5502
5552
  }
5553
+
5503
5554
  .signal{
5504
5555
  border:1px solid;
5505
5556
  border-radius:var(--border-radius-100);
@@ -5530,6 +5581,7 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
5530
5581
  .signal--neutral{
5531
5582
  color:var(--signal-neutral-color, var(--color-foreground-secondary));
5532
5583
  }
5584
+
5533
5585
  svg.icon{
5534
5586
  display:inline-block;
5535
5587
  fill:currentColor;
@@ -5613,6 +5665,7 @@ svg.icon--confirmation-filled{
5613
5665
  svg.icon--information-filled{
5614
5666
  color:var(--color-foreground-information);
5615
5667
  }
5668
+
5616
5669
  a.icon-link{
5617
5670
  align-items:center;
5618
5671
  display:inline-flex;
@@ -5793,12 +5846,14 @@ a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.ico
5793
5846
  a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):active,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):active{
5794
5847
  background-color:var(--color-state-secondary-active);
5795
5848
  }
5849
+
5796
5850
  svg.image-placeholder{
5797
5851
  color:var(--color-foreground-primary);
5798
5852
  fill:currentColor;
5799
5853
  height:inherit;
5800
5854
  width:inherit;
5801
5855
  }
5856
+
5802
5857
  .infotip{
5803
5858
  position:relative;
5804
5859
  }
@@ -7360,6 +7415,7 @@ a.legal-link,button.legal-link{
7360
7415
  a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.legal-link:hover,button.legal-link:visited{
7361
7416
  color:var(--legal-link-foreground-color, var(--color-foreground-link-legal));
7362
7417
  }
7418
+
7363
7419
  .list{
7364
7420
  max-width:480px;
7365
7421
  }
@@ -7434,6 +7490,7 @@ a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.le
7434
7490
  [dir=rtl] .list li>a,[dir=rtl] .list li>button{
7435
7491
  text-align:right;
7436
7492
  }
7493
+
7437
7494
  div.listbox{
7438
7495
  margin:var(--spacing-200) 0;
7439
7496
  }
@@ -7529,6 +7586,7 @@ div.listbox__option[aria-selected=true] svg.icon{
7529
7586
  .listbox__options:focus:not(:focus-visible){
7530
7587
  outline:none;
7531
7588
  }
7589
+
7532
7590
  .listbox-button{
7533
7591
  line-height:normal;
7534
7592
  position:relative;
@@ -7903,6 +7961,7 @@ span.listbox-button__value{
7903
7961
  .number-input__increment:disabled{
7904
7962
  animation:number-increment-disabled var(--motion-duration-short-2) var(--motion-easing-standard);
7905
7963
  }
7964
+
7906
7965
  .fake-menu__items,.menu__items{
7907
7966
  background-color:var(--menu-background-color, var(--color-background-primary));
7908
7967
  cursor:default;
@@ -8083,6 +8142,7 @@ hr.menu__separator{
8083
8142
  div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8084
8143
  outline:none;
8085
8144
  }
8145
+
8086
8146
  .fake-menu-button,.menu-button{
8087
8147
  line-height:normal;
8088
8148
  position:relative;
@@ -8347,6 +8407,7 @@ hr.menu-button__separator{
8347
8407
  div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
8348
8408
  outline:none;
8349
8409
  }
8410
+
8350
8411
  :root{
8351
8412
  --page-grid-number-cols:8;
8352
8413
  --page-grid-outside-margins:16px;
@@ -8404,6 +8465,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
8404
8465
  --debug-grid-gutter-color:transparent;
8405
8466
  background:repeating-linear-gradient(90deg, var(--debug-grid-col-color) 0, var(--debug-grid-col-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps)));
8406
8467
  }
8468
+
8407
8469
  .page-notice{
8408
8470
  background-color:var(--page-notice-general-background-color, var(--color-background-inverse));
8409
8471
  border-color:var(--page-notice-general-border-color, var(--color-background-inverse));
@@ -8556,6 +8618,7 @@ p.page-notice__cta{
8556
8618
  padding-left:0;
8557
8619
  padding-right:16px;
8558
8620
  }
8621
+
8559
8622
  nav.pagination{
8560
8623
  align-items:center;
8561
8624
  color:var(--pagination-item-foreground-color, var(--color-foreground-secondary));
@@ -8960,6 +9023,7 @@ button.icon-btn.panel-dialog__prev{
8960
9023
  [dir=rtl] .phone-input .listbox-button__value span:last-child,[dir=rtl] .phone-input .listbox__value span:last-child{
8961
9024
  direction:ltr;
8962
9025
  }
9026
+
8963
9027
  .progress-bar{
8964
9028
  border:none;
8965
9029
  color:var(--progress-bar-foreground-color, var(--color-foreground-accent));
@@ -9560,6 +9624,7 @@ input.radio__control[type=radio]:focus+span.radio__icon{
9560
9624
  input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
9561
9625
  outline:none;
9562
9626
  }
9627
+
9563
9628
  .section-notice{
9564
9629
  background-color:var(--section-notice-default-background-color, var(--color-background-secondary));
9565
9630
  border-radius:var(--section-notice-border-radius, var(--border-radius-50));
@@ -9693,6 +9758,7 @@ p.section-notice__cta{
9693
9758
  .section-notice__header:has(svg[class*="24"])+.section-notice__main{
9694
9759
  padding-top:2px;
9695
9760
  }
9761
+
9696
9762
  .section-title{
9697
9763
  align-items:baseline;
9698
9764
  display:flex;
@@ -9853,6 +9919,7 @@ p.section-notice__cta{
9853
9919
  .segmented-buttons__button:not([aria-current]):focus,.segmented-buttons__button:not([aria-current]):hover{
9854
9920
  background-color:var(--color-state-primary-hover);
9855
9921
  }
9922
+
9856
9923
  .select{
9857
9924
  color:var(--select-foreground-color, var(--color-foreground-primary));
9858
9925
  font-size:var(--font-size-default);
@@ -10026,6 +10093,7 @@ span.select{
10026
10093
  text-overflow:ellipsis;
10027
10094
  white-space:nowrap;
10028
10095
  }
10096
+
10029
10097
  @keyframes skeleton-fade-out{
10030
10098
  0%{
10031
10099
  opacity:1;
@@ -10199,6 +10267,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
10199
10267
  [dir=rtl] .skeleton__text--multiline:after{
10200
10268
  left:var(--spacing-700);
10201
10269
  }
10270
+
10202
10271
  .snackbar-dialog{
10203
10272
  background-color:var(--snackbar-dialog-background-color, var(--color-background-inverse));
10204
10273
  border-radius:var(--snackbar-dialog-border-radius, var(--border-radius-100));
@@ -10278,6 +10347,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
10278
10347
  left:auto;
10279
10348
  right:0;
10280
10349
  }
10350
+
10281
10351
  .split-button{
10282
10352
  display:inline-flex;
10283
10353
  }
@@ -10401,6 +10471,7 @@ div.star-rating-select input.star-rating-select__control--filled+span.star-ratin
10401
10471
  var(--color-foreground-primary)
10402
10472
  );
10403
10473
  }
10474
+
10404
10475
  .switch{
10405
10476
  box-sizing:border-box;
10406
10477
  height:40px;
@@ -10791,6 +10862,7 @@ span.switch__control:focus:not(:focus-visible){
10791
10862
  [dir=rtl] .table-cell--numeric{
10792
10863
  text-align:left;
10793
10864
  }
10865
+
10794
10866
  .fake-tabs,.tabs{
10795
10867
  margin-top:var(--spacing-200);
10796
10868
  }
@@ -10867,6 +10939,7 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
10867
10939
  .fake-tabs__cell,.tabs__cell{
10868
10940
  margin:var(--spacing-200) 0;
10869
10941
  }
10942
+
10870
10943
  :root{
10871
10944
  --input-default-height:40px;
10872
10945
  --input-large-height:48px;
@@ -11012,11 +11085,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
11012
11085
  .textbox--fluid,.textbox--fluid .textbox__control{
11013
11086
  width:100%;
11014
11087
  }
11015
- :root{
11016
- --dialog-scrim-color-hide:rgb(17 24 32 / 0);
11017
- --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
11018
- --dialog-lightbox-max-width:616px;
11019
- }
11088
+
11020
11089
  .toast-dialog{
11021
11090
  background-color:var(--toast-dialog-background-color, var(--color-background-information));
11022
11091
  border-top-left-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
@@ -11345,6 +11414,7 @@ button.toast-dialog__close>svg{
11345
11414
  .toggle-button--gallery-layout .toggle-button__icon~.toggle-button__content{
11346
11415
  align-self:flex-start;
11347
11416
  }
11417
+
11348
11418
  :root{
11349
11419
  --row-min-toggle-buttons-min:2;
11350
11420
  --row-min-toggle-buttons-xs:4;
@@ -12115,9 +12185,6 @@ button.tooltip__close{
12115
12185
  max-width:400px;
12116
12186
  }
12117
12187
  }
12118
- :root{
12119
- --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
12120
- }
12121
12188
  .tourtip{
12122
12189
  position:relative;
12123
12190
  }