coveragebook_components 0.8.8 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +292 -245
  3. data/app/assets/build/coco/app.js +64 -34
  4. data/app/assets/build/coco/book.css +67 -18
  5. data/app/assets/build/coco/book.js +50 -21
  6. data/app/assets/js/libs/alpine/directives/dropdown.js +5 -2
  7. data/app/components/coco/app/elements/alert/alert.css +1 -1
  8. data/app/components/coco/app/elements/button/button.css +38 -58
  9. data/app/components/coco/app/elements/button/button.rb +2 -3
  10. data/app/components/coco/app/elements/button_group/button_group.css +7 -2
  11. data/app/components/coco/app/elements/button_group/button_group.html.erb +2 -1
  12. data/app/components/coco/app/elements/button_group/button_group.js +28 -14
  13. data/app/components/coco/app/elements/button_to/button_to.css +4 -8
  14. data/app/components/coco/app/elements/color_picker_button/color_picker_button.css +1 -2
  15. data/app/components/coco/app/elements/image_picker_button/image_picker_button.css +1 -2
  16. data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.css +1 -2
  17. data/app/components/coco/app/elements/menu/menu.css +7 -5
  18. data/app/components/coco/app/elements/menu_button/menu_button.css +1 -2
  19. data/app/components/coco/app/elements/snackbar/snackbar.css +3 -3
  20. data/app/components/coco/base/button/button.css +9 -9
  21. data/app/components/coco/base/button/button.html.erb +16 -18
  22. data/app/components/coco/base/button/button.js +6 -18
  23. data/app/components/coco/base/button/button.rb +38 -58
  24. data/app/components/coco/base/button/button_dropdown.js +27 -0
  25. data/app/components/coco/base/modal/modal.css +12 -0
  26. data/app/components/coco/base/modal/modal.html.erb +11 -1
  27. data/app/components/coco/base/modal/modal.rb +4 -1
  28. data/app/components/coco/base/modal_dialog/modal_dialog.css +6 -2
  29. data/app/components/coco/base/panel/panel.css +19 -0
  30. data/app/components/coco/base/panel/panel.html.erb +5 -0
  31. data/app/components/coco/base/panel/panel.rb +4 -0
  32. data/app/helpers/coco/app_helper.rb +4 -0
  33. data/lib/coco.rb +1 -1
  34. metadata +6 -2
@@ -756,6 +756,8 @@ select{
756
756
  [data-coco][data-component="avatar"][data-size="xl"]{
757
757
  height: 2rem;
758
758
  width: 2rem}
759
+ .coco-button-wrapper{
760
+ display: contents !important}
759
761
  [data-coco].coco-button{
760
762
  display: flex;
761
763
  width: auto;
@@ -767,19 +769,18 @@ select{
767
769
  border-color: transparent;
768
770
  background-color: transparent;
769
771
  color: currentColor;
770
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
771
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
772
- transition-duration: 150ms;
773
- width: -moz-min-content;
774
- width: min-content}
775
- [data-coco].coco-button .button-element{
776
- display: inline-flex;
777
- width: 100%;
778
772
  text-decoration-line: none;
779
773
  outline: 2px solid transparent;
780
- outline-offset: 2px}
781
- [data-coco].coco-button .button-element:focus-visible{
774
+ outline-offset: 2px;
775
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
776
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
777
+ transition-duration: 150ms}
778
+ [data-coco].coco-button:focus-visible{
782
779
  outline-width: 0px}
780
+ [data-coco].coco-button {
781
+ width: -moz-min-content;
782
+ width: min-content;
783
+ }
783
784
  [data-coco].coco-button .button-inner{
784
785
  margin-left: auto;
785
786
  margin-right: auto;
@@ -808,7 +809,7 @@ select{
808
809
  [data-coco].coco-button .button-toggle{
809
810
  order: 3}
810
811
  /* disabled */
811
- [data-coco].coco-button[data-disabled="true"] .button-element{
812
+ [data-coco].coco-button[data-disabled="true"]{
812
813
  pointer-events: none;
813
814
  cursor: not-allowed}
814
815
  /* loading */
@@ -816,19 +817,19 @@ select{
816
817
 
817
818
  to{
818
819
  transform: rotate(360deg)}}
819
- [data-coco].coco-button[data-state="loading"] > .button-element .button-icon{
820
+ [data-coco].coco-button[data-state="loading"] .button-icon{
820
821
  animation: spin 1.5s linear infinite}
821
822
  /* Fit */
822
823
  [data-coco].coco-button[data-fit="full"]{
823
824
  width: 100%}
824
825
  /* Icons */
825
- [data-coco].coco-button[data-icon-position="end"] > .button-element .button-content{
826
+ [data-coco].coco-button[data-icon-position="end"] .button-content{
826
827
  order: 1}
827
- [data-coco].coco-button[data-icon-position="end"] > .button-element .button-icon{
828
+ [data-coco].coco-button[data-icon-position="end"] .button-icon{
828
829
  order: 2}
829
- [data-coco].coco-button[data-icon-position="end"] > .button-element .button-toggle{
830
+ [data-coco].coco-button[data-icon-position="end"] .button-toggle{
830
831
  order: 3}
831
- [data-coco].coco-button.with-icon[data-collapsed="true"] > .button-element .button-content {
832
+ [data-coco].coco-button.with-icon[data-collapsed="true"] .button-content {
832
833
  display: none;
833
834
  }
834
835
  [data-coco][data-component="dropdown"] {
@@ -1030,14 +1031,30 @@ select{
1030
1031
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}
1031
1032
  .modal-frame{
1032
1033
  display: contents}
1034
+ /*
1035
+ Limit the size of modal content when rendered in the
1036
+ host page rather than displayed as a modal.
1037
+ */
1038
+ [data-role="inline-modal-content"]{
1039
+ margin-left: auto;
1040
+ margin-right: auto;
1041
+ max-width: 42rem}
1042
+ [data-role="inline-modal-content"] [data-component="modal-dialog"]{
1043
+ border-radius: 0.75rem;
1044
+ border-width: 1px;
1045
+ --tw-border-opacity: 1;
1046
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1047
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1048
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1049
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
1033
1050
  [data-coco][data-component="modal-dialog"]{
1034
1051
  width: 100%;
1035
- border-radius: 0.75rem;
1052
+ border-radius: 0.75rem}
1053
+ .modal-frame [data-coco][data-component="modal-dialog"]{
1036
1054
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1037
1055
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1038
1056
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1039
- max-width: 42rem}
1040
- /* temp until sizes added */
1057
+ max-width: 42rem /* temp until sizes added */}
1041
1058
  [data-coco][data-component="modal-dialog"] .modal-dialog-header{
1042
1059
  position: relative;
1043
1060
  display: flex;
@@ -1226,6 +1243,25 @@ select{
1226
1243
  border-bottom-left-radius: 0.375rem}
1227
1244
  [data-coco][data-component="pager-link"][data-direction="next"] .coco-icon{
1228
1245
  margin-right: -0.25rem}
1246
+ [data-coco][data-component="panel"]{
1247
+ display: contents}
1248
+ [data-coco][data-component="panel"] .panel-content{
1249
+ display: contents}
1250
+ /* Only style Coco panels that are not rendered inside legacy panel components */
1251
+ [data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]){
1252
+ display: block;
1253
+ border-radius: 0.75rem;
1254
+ border-width: 1px;
1255
+ --tw-border-opacity: 1;
1256
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1257
+ --tw-bg-opacity: 1;
1258
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1259
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1260
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1261
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
1262
+ [data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) .panel-content{
1263
+ display: block;
1264
+ padding: max(min(5%, 2rem), 1rem)}
1229
1265
  [data-coco][data-component="placeholder"]{
1230
1266
  padding: 1rem}
1231
1267
  [data-coco][data-component="placeholder"][data-boxed="true"]{
@@ -2235,7 +2271,7 @@ select{
2235
2271
  /* Dismissable */
2236
2272
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
2237
2273
  flex: none}
2238
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button .button-element{
2274
+ [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button{
2239
2275
  background-color: transparent;
2240
2276
  --tw-text-opacity: 1;
2241
2277
  color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -2244,7 +2280,7 @@ select{
2244
2280
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2245
2281
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2246
2282
  transition-duration: 150ms}
2247
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button .button-element:hover{
2283
+ [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button:hover{
2248
2284
  background-color: rgb(255 255 255 / 0.1);
2249
2285
  --tw-text-opacity: 1;
2250
2286
  color: rgb(17 24 39 / var(--tw-text-opacity))}
@@ -2549,7 +2585,7 @@ select{
2549
2585
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2550
2586
  transition-duration: 150ms;
2551
2587
  border-radius: 44px}
2552
- [data-coco][data-component="app-button"][data-theme] > .button-element .button-content{
2588
+ [data-coco][data-component="app-button"][data-theme] .button-content{
2553
2589
  font-weight: 600}
2554
2590
  [data-coco][data-component="app-button"][data-theme="primary"],
2555
2591
  [data-coco][data-component="app-button"][data-theme="positive"]{
@@ -2573,7 +2609,7 @@ select{
2573
2609
  [data-coco][data-component="app-button"][data-theme="primary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="positive"][data-state="active"]{
2574
2610
  --tw-bg-opacity: 1;
2575
2611
  background-color: rgb(13 97 89 / var(--tw-bg-opacity))}
2576
- [data-coco][data-component="app-button"][data-theme="primary"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="positive"][data-state="loading"] > .button-element .button-icon{
2612
+ [data-coco][data-component="app-button"][data-theme="primary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="positive"][data-state="loading"] .button-icon{
2577
2613
  --tw-text-opacity: 1;
2578
2614
  color: rgb(118 184 170 / var(--tw-text-opacity))}
2579
2615
  [data-coco][data-component="app-button"][data-theme="primary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="positive"][data-disabled="true"]{
@@ -2597,7 +2633,7 @@ select{
2597
2633
  [data-coco][data-component="app-button"][data-theme="text-primary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="text-positive"][data-state="active"]{
2598
2634
  background-color: rgba(0, 12, 39, 0.1);
2599
2635
  background-blend-mode: hard-light}
2600
- [data-coco][data-component="app-button"][data-theme="text-primary"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="text-positive"][data-state="loading"] > .button-element .button-icon{
2636
+ [data-coco][data-component="app-button"][data-theme="text-primary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="text-positive"][data-state="loading"] .button-icon{
2601
2637
  --tw-text-opacity: 1;
2602
2638
  color: rgb(118 184 170 / var(--tw-text-opacity))}
2603
2639
  [data-coco][data-component="app-button"][data-theme="text-primary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="text-positive"][data-disabled="true"]{
@@ -2625,7 +2661,7 @@ select{
2625
2661
  [data-coco][data-component="app-button"][data-theme="secondary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="active"], [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="active"]{
2626
2662
  background-color: rgba(0, 12, 39, 0.1);
2627
2663
  background-blend-mode: hard-light}
2628
- [data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="loading"] > .button-element .button-icon{
2664
+ [data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="loading"] .button-icon{
2629
2665
  --tw-text-opacity: 1;
2630
2666
  color: rgb(118 184 170 / var(--tw-text-opacity))}
2631
2667
  [data-coco][data-component="app-button"][data-theme="secondary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-disabled="true"]{
@@ -2663,7 +2699,7 @@ select{
2663
2699
  [data-coco][data-component="app-button"][data-theme="text-secondary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-state="active"]{
2664
2700
  background-color: rgba(0, 12, 39, 0.1);
2665
2701
  background-blend-mode: hard-light}
2666
- [data-coco][data-component="app-button"][data-theme="text-secondary"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-state="loading"] > .button-element .button-icon{
2702
+ [data-coco][data-component="app-button"][data-theme="text-secondary"][data-state="loading"] .button-icon, [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-state="loading"] .button-icon{
2667
2703
  --tw-text-opacity: 1;
2668
2704
  color: rgb(118 184 170 / var(--tw-text-opacity))}
2669
2705
  [data-coco][data-component="app-button"][data-theme="text-secondary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="text-toolbar"][data-disabled="true"]{
@@ -2688,7 +2724,7 @@ select{
2688
2724
  [data-coco][data-component="app-button"][data-theme="negative"][data-state="active"]{
2689
2725
  --tw-bg-opacity: 1;
2690
2726
  background-color: rgb(153 27 27 / var(--tw-bg-opacity))}
2691
- [data-coco][data-component="app-button"][data-theme="negative"][data-state="loading"] > .button-element .button-icon{
2727
+ [data-coco][data-component="app-button"][data-theme="negative"][data-state="loading"] .button-icon{
2692
2728
  --tw-text-opacity: 1;
2693
2729
  color: rgb(252 165 165 / var(--tw-text-opacity))}
2694
2730
  [data-coco][data-component="app-button"][data-theme="negative"][data-disabled="true"]{
@@ -2709,7 +2745,7 @@ select{
2709
2745
  [data-coco][data-component="app-button"][data-theme="text-negative"][data-state="active"]{
2710
2746
  background-color: rgba(0, 12, 39, 0.1);
2711
2747
  background-blend-mode: hard-light}
2712
- [data-coco][data-component="app-button"][data-theme="text-negative"][data-state="loading"] > .button-element .button-icon{
2748
+ [data-coco][data-component="app-button"][data-theme="text-negative"][data-state="loading"] .button-icon{
2713
2749
  --tw-text-opacity: 1;
2714
2750
  color: rgb(252 165 165 / var(--tw-text-opacity))}
2715
2751
  [data-coco][data-component="app-button"][data-theme="text-negative"][data-disabled="true"]{
@@ -2734,7 +2770,7 @@ select{
2734
2770
  [data-coco][data-component="app-button"][data-theme="warning"][data-state="active"]{
2735
2771
  --tw-bg-opacity: 1;
2736
2772
  background-color: rgb(146 64 14 / var(--tw-bg-opacity))}
2737
- [data-coco][data-component="app-button"][data-theme="warning"][data-state="loading"] > .button-element .button-icon{
2773
+ [data-coco][data-component="app-button"][data-theme="warning"][data-state="loading"] .button-icon{
2738
2774
  --tw-text-opacity: 1;
2739
2775
  color: rgb(252 211 77 / var(--tw-text-opacity))}
2740
2776
  [data-coco][data-component="app-button"][data-theme="warning"][data-disabled="true"]{
@@ -2755,7 +2791,7 @@ select{
2755
2791
  [data-coco][data-component="app-button"][data-theme="text-warning"][data-state="active"]{
2756
2792
  background-color: rgba(0, 12, 39, 0.1);
2757
2793
  background-blend-mode: hard-light}
2758
- [data-coco][data-component="app-button"][data-theme="text-warning"][data-state="loading"] > .button-element .button-icon{
2794
+ [data-coco][data-component="app-button"][data-theme="text-warning"][data-state="loading"] .button-icon{
2759
2795
  --tw-text-opacity: 1;
2760
2796
  color: rgb(252 211 77 / var(--tw-text-opacity))}
2761
2797
  [data-coco][data-component="app-button"][data-theme="text-warning"][data-disabled="true"]{
@@ -2780,7 +2816,7 @@ select{
2780
2816
  [data-coco][data-component="app-button"][data-theme="info"][data-state="active"]{
2781
2817
  --tw-bg-opacity: 1;
2782
2818
  background-color: rgb(7 89 133 / var(--tw-bg-opacity))}
2783
- [data-coco][data-component="app-button"][data-theme="info"][data-state="loading"] > .button-element .button-icon{
2819
+ [data-coco][data-component="app-button"][data-theme="info"][data-state="loading"] .button-icon{
2784
2820
  --tw-text-opacity: 1;
2785
2821
  color: rgb(125 211 252 / var(--tw-text-opacity))}
2786
2822
  [data-coco][data-component="app-button"][data-theme="info"][data-disabled="true"]{
@@ -2801,7 +2837,7 @@ select{
2801
2837
  [data-coco][data-component="app-button"][data-theme="text-info"][data-state="active"]{
2802
2838
  background-color: rgba(0, 12, 39, 0.1);
2803
2839
  background-blend-mode: hard-light}
2804
- [data-coco][data-component="app-button"][data-theme="text-info"][data-state="loading"] > .button-element .button-icon{
2840
+ [data-coco][data-component="app-button"][data-theme="text-info"][data-state="loading"] .button-icon{
2805
2841
  --tw-text-opacity: 1;
2806
2842
  color: rgb(125 211 252 / var(--tw-text-opacity))}
2807
2843
  [data-coco][data-component="app-button"][data-theme="text-info"][data-disabled="true"]{
@@ -2831,28 +2867,27 @@ select{
2831
2867
  background-color: rgb(209 213 219 / var(--tw-bg-opacity))}
2832
2868
  [data-coco][data-component="app-button"][data-theme="neutral-light"]{
2833
2869
  border-width: 1px;
2834
- border-color: transparent}
2835
- [data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element{
2870
+ border-color: transparent;
2836
2871
  --tw-bg-opacity: 1;
2837
2872
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2838
2873
  --tw-text-opacity: 1;
2839
2874
  color: rgb(17 24 39 / var(--tw-text-opacity))}
2840
- [data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element:hover{
2875
+ [data-coco][data-component="app-button"][data-theme="neutral-light"]:hover{
2841
2876
  --tw-bg-opacity: 1;
2842
2877
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
2843
- [data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element:active{
2878
+ [data-coco][data-component="app-button"][data-theme="neutral-light"]:active{
2844
2879
  --tw-bg-opacity: 1;
2845
2880
  background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
2846
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"] .button-element{
2881
+ [data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"]{
2847
2882
  --tw-bg-opacity: 1;
2848
2883
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
2849
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"] .button-element{
2884
+ [data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"]{
2850
2885
  --tw-bg-opacity: 1;
2851
2886
  background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
2852
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-element{
2887
+ [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"]{
2853
2888
  --tw-bg-opacity: 1;
2854
2889
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
2855
- [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-element .button-inner{
2890
+ [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-inner{
2856
2891
  opacity: 0.4}
2857
2892
  [data-coco][data-component="app-button"][data-theme="text-neutral-light"]{
2858
2893
  background-color: transparent;
@@ -2884,18 +2919,18 @@ select{
2884
2919
  [data-coco][data-component="app-button"][data-size="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="xs"] .button-toggle{
2885
2920
  height: 0.875rem;
2886
2921
  width: 0.875rem}
2887
- [data-coco][data-component="app-button"][data-size="xs"][data-theme] .button-element{
2922
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme]{
2888
2923
  padding-top: 0.5rem;
2889
2924
  padding-bottom: 0.5rem;
2890
2925
  padding-left: 0.75rem;
2891
2926
  padding-right: 0.75rem}
2892
- [data-coco][data-component="app-button"][data-size="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-collapsed="true"] > .button-element .button-icon{
2927
+ [data-coco][data-component="app-button"][data-size="xs"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-collapsed="true"] .button-icon{
2893
2928
  margin-left: -0.25rem;
2894
2929
  margin-right: -0.25rem}
2895
- [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"] .button-element{
2930
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"]{
2896
2931
  padding-left: 0.5rem;
2897
2932
  padding-right: 0.5rem}
2898
- [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2933
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"][data-collapsed="true"] .button-icon{
2899
2934
  padding-left: 0.5rem;
2900
2935
  padding-right: 0.5rem}
2901
2936
  [data-coco][data-component="app-button"][data-size="sm"] .button-content{
@@ -2904,18 +2939,18 @@ select{
2904
2939
  [data-coco][data-component="app-button"][data-size="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="sm"] .button-toggle{
2905
2940
  height: 1rem;
2906
2941
  width: 1rem}
2907
- [data-coco][data-component="app-button"][data-size="sm"][data-theme] .button-element{
2942
+ [data-coco][data-component="app-button"][data-size="sm"][data-theme]{
2908
2943
  padding-top: 0.625rem;
2909
2944
  padding-bottom: 0.625rem;
2910
2945
  padding-left: 1rem;
2911
2946
  padding-right: 1rem}
2912
- [data-coco][data-component="app-button"][data-size="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2947
+ [data-coco][data-component="app-button"][data-size="sm"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="sm"][data-theme][data-collapsed="true"] .button-icon{
2913
2948
  margin-left: -0.375rem;
2914
2949
  margin-right: -0.375rem}
2915
- [data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"] .button-element{
2950
+ [data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"]{
2916
2951
  padding-left: 0.5rem;
2917
2952
  padding-right: 0.5rem}
2918
- [data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2953
+ [data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="sm"][data-theme|="text"][data-collapsed="true"] .button-icon{
2919
2954
  padding-left: 0.5rem;
2920
2955
  padding-right: 0.5rem}
2921
2956
  [data-coco][data-component="app-button"][data-size="md"] .button-content{
@@ -2924,18 +2959,18 @@ select{
2924
2959
  [data-coco][data-component="app-button"][data-size="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="md"] .button-toggle{
2925
2960
  height: 1.25rem;
2926
2961
  width: 1.25rem}
2927
- [data-coco][data-component="app-button"][data-size="md"][data-theme] .button-element{
2962
+ [data-coco][data-component="app-button"][data-size="md"][data-theme]{
2928
2963
  padding-top: 0.75rem;
2929
2964
  padding-bottom: 0.75rem;
2930
2965
  padding-left: 1.25rem;
2931
2966
  padding-right: 1.25rem}
2932
- [data-coco][data-component="app-button"][data-size="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2967
+ [data-coco][data-component="app-button"][data-size="md"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="md"][data-theme][data-collapsed="true"] .button-icon{
2933
2968
  margin-left: -0.5rem;
2934
2969
  margin-right: -0.5rem}
2935
- [data-coco][data-component="app-button"][data-size="md"][data-theme|="text"] .button-element{
2970
+ [data-coco][data-component="app-button"][data-size="md"][data-theme|="text"]{
2936
2971
  padding-left: 0.75rem;
2937
2972
  padding-right: 0.75rem}
2938
- [data-coco][data-component="app-button"][data-size="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2973
+ [data-coco][data-component="app-button"][data-size="md"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="md"][data-theme|="text"][data-collapsed="true"] .button-icon{
2939
2974
  padding-left: 0.5rem;
2940
2975
  padding-right: 0.5rem}
2941
2976
  [data-coco][data-component="app-button"][data-size="lg"] .button-content{
@@ -2944,18 +2979,18 @@ select{
2944
2979
  [data-coco][data-component="app-button"][data-size="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="lg"] .button-toggle{
2945
2980
  height: 1.5rem;
2946
2981
  width: 1.5rem}
2947
- [data-coco][data-component="app-button"][data-size="lg"][data-theme] .button-element{
2982
+ [data-coco][data-component="app-button"][data-size="lg"][data-theme]{
2948
2983
  padding-top: 1rem;
2949
2984
  padding-bottom: 1rem;
2950
2985
  padding-left: 1.5rem;
2951
2986
  padding-right: 1.5rem}
2952
- [data-coco][data-component="app-button"][data-size="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="lg"][data-theme][data-collapsed="true"] .button-inner{
2987
+ [data-coco][data-component="app-button"][data-size="lg"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="lg"][data-theme][data-collapsed="true"] .button-inner{
2953
2988
  margin-left: -8px;
2954
2989
  margin-right: -8px}
2955
- [data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"] .button-element{
2990
+ [data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"]{
2956
2991
  padding-left: 0.75rem;
2957
2992
  padding-right: 0.75rem}
2958
- [data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2993
+ [data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size="lg"][data-theme|="text"][data-collapsed="true"] .button-icon{
2959
2994
  padding-left: 0.75rem;
2960
2995
  padding-right: 0.75rem}
2961
2996
  @media (min-width: 768px) {
@@ -2967,20 +3002,22 @@ select{
2967
3002
  [data-coco][data-component="app-button"][data-size-md="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="xs"] .button-toggle{
2968
3003
  height: 0.875rem;
2969
3004
  width: 0.875rem}
2970
- [data-coco][data-component="app-button"][data-size-md="xs"][data-theme] .button-element{
3005
+
3006
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme]{
2971
3007
  padding-top: 0.5rem;
2972
3008
  padding-bottom: 0.5rem;
2973
3009
  padding-left: 0.75rem;
2974
3010
  padding-right: 0.75rem}
2975
3011
 
2976
- [data-coco][data-component="app-button"][data-size-md="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-collapsed="true"] > .button-element .button-icon{
3012
+ [data-coco][data-component="app-button"][data-size-md="xs"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-collapsed="true"] .button-icon{
2977
3013
  margin-left: -0.25rem;
2978
3014
  margin-right: -0.25rem}
2979
- [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"] .button-element{
3015
+
3016
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"]{
2980
3017
  padding-left: 0.5rem;
2981
3018
  padding-right: 0.5rem}
2982
3019
 
2983
- [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3020
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"][data-collapsed="true"] .button-icon{
2984
3021
  padding-left: 0.5rem;
2985
3022
  padding-right: 0.5rem}
2986
3023
  [data-coco][data-component="app-button"][data-size-md="sm"] .button-content{
@@ -2990,20 +3027,22 @@ select{
2990
3027
  [data-coco][data-component="app-button"][data-size-md="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="sm"] .button-toggle{
2991
3028
  height: 1rem;
2992
3029
  width: 1rem}
2993
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme] .button-element{
3030
+
3031
+ [data-coco][data-component="app-button"][data-size-md="sm"][data-theme]{
2994
3032
  padding-top: 0.625rem;
2995
3033
  padding-bottom: 0.625rem;
2996
3034
  padding-left: 1rem;
2997
3035
  padding-right: 1rem}
2998
3036
 
2999
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3037
+ [data-coco][data-component="app-button"][data-size-md="sm"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="sm"][data-theme][data-collapsed="true"] .button-icon{
3000
3038
  margin-left: -0.375rem;
3001
3039
  margin-right: -0.375rem}
3002
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"] .button-element{
3040
+
3041
+ [data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"]{
3003
3042
  padding-left: 0.5rem;
3004
3043
  padding-right: 0.5rem}
3005
3044
 
3006
- [data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3045
+ [data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="sm"][data-theme|="text"][data-collapsed="true"] .button-icon{
3007
3046
  padding-left: 0.5rem;
3008
3047
  padding-right: 0.5rem}
3009
3048
  [data-coco][data-component="app-button"][data-size-md="md"] .button-content{
@@ -3013,20 +3052,22 @@ select{
3013
3052
  [data-coco][data-component="app-button"][data-size-md="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="md"] .button-toggle{
3014
3053
  height: 1.25rem;
3015
3054
  width: 1.25rem}
3016
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme] .button-element{
3055
+
3056
+ [data-coco][data-component="app-button"][data-size-md="md"][data-theme]{
3017
3057
  padding-top: 0.75rem;
3018
3058
  padding-bottom: 0.75rem;
3019
3059
  padding-left: 1.25rem;
3020
3060
  padding-right: 1.25rem}
3021
3061
 
3022
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3062
+ [data-coco][data-component="app-button"][data-size-md="md"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="md"][data-theme][data-collapsed="true"] .button-icon{
3023
3063
  margin-left: -0.5rem;
3024
3064
  margin-right: -0.5rem}
3025
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"] .button-element{
3065
+
3066
+ [data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"]{
3026
3067
  padding-left: 0.75rem;
3027
3068
  padding-right: 0.75rem}
3028
3069
 
3029
- [data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3070
+ [data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="md"][data-theme|="text"][data-collapsed="true"] .button-icon{
3030
3071
  padding-left: 0.5rem;
3031
3072
  padding-right: 0.5rem}
3032
3073
  [data-coco][data-component="app-button"][data-size-md="lg"] .button-content{
@@ -3036,20 +3077,22 @@ select{
3036
3077
  [data-coco][data-component="app-button"][data-size-md="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="lg"] .button-toggle{
3037
3078
  height: 1.5rem;
3038
3079
  width: 1.5rem}
3039
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme] .button-element{
3080
+
3081
+ [data-coco][data-component="app-button"][data-size-md="lg"][data-theme]{
3040
3082
  padding-top: 1rem;
3041
3083
  padding-bottom: 1rem;
3042
3084
  padding-left: 1.5rem;
3043
3085
  padding-right: 1.5rem}
3044
3086
 
3045
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="lg"][data-theme][data-collapsed="true"] .button-inner{
3087
+ [data-coco][data-component="app-button"][data-size-md="lg"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="lg"][data-theme][data-collapsed="true"] .button-inner{
3046
3088
  margin-left: -8px;
3047
3089
  margin-right: -8px}
3048
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"] .button-element{
3090
+
3091
+ [data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"]{
3049
3092
  padding-left: 0.75rem;
3050
3093
  padding-right: 0.75rem}
3051
3094
 
3052
- [data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3095
+ [data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-md="lg"][data-theme|="text"][data-collapsed="true"] .button-icon{
3053
3096
  padding-left: 0.75rem;
3054
3097
  padding-right: 0.75rem}
3055
3098
  }
@@ -3062,20 +3105,22 @@ select{
3062
3105
  [data-coco][data-component="app-button"][data-size-lg="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="xs"] .button-toggle{
3063
3106
  height: 0.875rem;
3064
3107
  width: 0.875rem}
3065
- [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme] .button-element{
3108
+
3109
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme]{
3066
3110
  padding-top: 0.5rem;
3067
3111
  padding-bottom: 0.5rem;
3068
3112
  padding-left: 0.75rem;
3069
3113
  padding-right: 0.75rem}
3070
3114
 
3071
- [data-coco][data-component="app-button"][data-size-lg="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-collapsed="true"] > .button-element .button-icon{
3115
+ [data-coco][data-component="app-button"][data-size-lg="xs"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-collapsed="true"] .button-icon{
3072
3116
  margin-left: -0.25rem;
3073
3117
  margin-right: -0.25rem}
3074
- [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"] .button-element{
3118
+
3119
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"]{
3075
3120
  padding-left: 0.5rem;
3076
3121
  padding-right: 0.5rem}
3077
3122
 
3078
- [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3123
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"][data-collapsed="true"] .button-icon{
3079
3124
  padding-left: 0.5rem;
3080
3125
  padding-right: 0.5rem}
3081
3126
  [data-coco][data-component="app-button"][data-size-lg="sm"] .button-content{
@@ -3085,20 +3130,22 @@ select{
3085
3130
  [data-coco][data-component="app-button"][data-size-lg="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="sm"] .button-toggle{
3086
3131
  height: 1rem;
3087
3132
  width: 1rem}
3088
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme] .button-element{
3133
+
3134
+ [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme]{
3089
3135
  padding-top: 0.625rem;
3090
3136
  padding-bottom: 0.625rem;
3091
3137
  padding-left: 1rem;
3092
3138
  padding-right: 1rem}
3093
3139
 
3094
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3140
+ [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="sm"][data-theme][data-collapsed="true"] .button-icon{
3095
3141
  margin-left: -0.375rem;
3096
3142
  margin-right: -0.375rem}
3097
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"] .button-element{
3143
+
3144
+ [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"]{
3098
3145
  padding-left: 0.5rem;
3099
3146
  padding-right: 0.5rem}
3100
3147
 
3101
- [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3148
+ [data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="sm"][data-theme|="text"][data-collapsed="true"] .button-icon{
3102
3149
  padding-left: 0.5rem;
3103
3150
  padding-right: 0.5rem}
3104
3151
  [data-coco][data-component="app-button"][data-size-lg="md"] .button-content{
@@ -3108,20 +3155,22 @@ select{
3108
3155
  [data-coco][data-component="app-button"][data-size-lg="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="md"] .button-toggle{
3109
3156
  height: 1.25rem;
3110
3157
  width: 1.25rem}
3111
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme] .button-element{
3158
+
3159
+ [data-coco][data-component="app-button"][data-size-lg="md"][data-theme]{
3112
3160
  padding-top: 0.75rem;
3113
3161
  padding-bottom: 0.75rem;
3114
3162
  padding-left: 1.25rem;
3115
3163
  padding-right: 1.25rem}
3116
3164
 
3117
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3165
+ [data-coco][data-component="app-button"][data-size-lg="md"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="md"][data-theme][data-collapsed="true"] .button-icon{
3118
3166
  margin-left: -0.5rem;
3119
3167
  margin-right: -0.5rem}
3120
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"] .button-element{
3168
+
3169
+ [data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"]{
3121
3170
  padding-left: 0.75rem;
3122
3171
  padding-right: 0.75rem}
3123
3172
 
3124
- [data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3173
+ [data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="md"][data-theme|="text"][data-collapsed="true"] .button-icon{
3125
3174
  padding-left: 0.5rem;
3126
3175
  padding-right: 0.5rem}
3127
3176
  [data-coco][data-component="app-button"][data-size-lg="lg"] .button-content{
@@ -3131,20 +3180,22 @@ select{
3131
3180
  [data-coco][data-component="app-button"][data-size-lg="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="lg"] .button-toggle{
3132
3181
  height: 1.5rem;
3133
3182
  width: 1.5rem}
3134
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme] .button-element{
3183
+
3184
+ [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme]{
3135
3185
  padding-top: 1rem;
3136
3186
  padding-bottom: 1rem;
3137
3187
  padding-left: 1.5rem;
3138
3188
  padding-right: 1.5rem}
3139
3189
 
3140
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="lg"][data-theme][data-collapsed="true"] .button-inner{
3190
+ [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="lg"][data-theme][data-collapsed="true"] .button-inner{
3141
3191
  margin-left: -8px;
3142
3192
  margin-right: -8px}
3143
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"] .button-element{
3193
+
3194
+ [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"]{
3144
3195
  padding-left: 0.75rem;
3145
3196
  padding-right: 0.75rem}
3146
3197
 
3147
- [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3198
+ [data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-lg="lg"][data-theme|="text"][data-collapsed="true"] .button-icon{
3148
3199
  padding-left: 0.75rem;
3149
3200
  padding-right: 0.75rem}
3150
3201
  }
@@ -3157,20 +3208,22 @@ select{
3157
3208
  [data-coco][data-component="app-button"][data-size-xl="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="xs"] .button-toggle{
3158
3209
  height: 0.875rem;
3159
3210
  width: 0.875rem}
3160
- [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme] .button-element{
3211
+
3212
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme]{
3161
3213
  padding-top: 0.5rem;
3162
3214
  padding-bottom: 0.5rem;
3163
3215
  padding-left: 0.75rem;
3164
3216
  padding-right: 0.75rem}
3165
3217
 
3166
- [data-coco][data-component="app-button"][data-size-xl="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-collapsed="true"] > .button-element .button-icon{
3218
+ [data-coco][data-component="app-button"][data-size-xl="xs"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-collapsed="true"] .button-icon{
3167
3219
  margin-left: -0.25rem;
3168
3220
  margin-right: -0.25rem}
3169
- [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"] .button-element{
3221
+
3222
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"]{
3170
3223
  padding-left: 0.5rem;
3171
3224
  padding-right: 0.5rem}
3172
3225
 
3173
- [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3226
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"][data-collapsed="true"] .button-icon{
3174
3227
  padding-left: 0.5rem;
3175
3228
  padding-right: 0.5rem}
3176
3229
  [data-coco][data-component="app-button"][data-size-xl="sm"] .button-content{
@@ -3180,20 +3233,22 @@ select{
3180
3233
  [data-coco][data-component="app-button"][data-size-xl="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="sm"] .button-toggle{
3181
3234
  height: 1rem;
3182
3235
  width: 1rem}
3183
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme] .button-element{
3236
+
3237
+ [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme]{
3184
3238
  padding-top: 0.625rem;
3185
3239
  padding-bottom: 0.625rem;
3186
3240
  padding-left: 1rem;
3187
3241
  padding-right: 1rem}
3188
3242
 
3189
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3243
+ [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="sm"][data-theme][data-collapsed="true"] .button-icon{
3190
3244
  margin-left: -0.375rem;
3191
3245
  margin-right: -0.375rem}
3192
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"] .button-element{
3246
+
3247
+ [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"]{
3193
3248
  padding-left: 0.5rem;
3194
3249
  padding-right: 0.5rem}
3195
3250
 
3196
- [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3251
+ [data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="sm"][data-theme|="text"][data-collapsed="true"] .button-icon{
3197
3252
  padding-left: 0.5rem;
3198
3253
  padding-right: 0.5rem}
3199
3254
  [data-coco][data-component="app-button"][data-size-xl="md"] .button-content{
@@ -3203,20 +3258,22 @@ select{
3203
3258
  [data-coco][data-component="app-button"][data-size-xl="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="md"] .button-toggle{
3204
3259
  height: 1.25rem;
3205
3260
  width: 1.25rem}
3206
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme] .button-element{
3261
+
3262
+ [data-coco][data-component="app-button"][data-size-xl="md"][data-theme]{
3207
3263
  padding-top: 0.75rem;
3208
3264
  padding-bottom: 0.75rem;
3209
3265
  padding-left: 1.25rem;
3210
3266
  padding-right: 1.25rem}
3211
3267
 
3212
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3268
+ [data-coco][data-component="app-button"][data-size-xl="md"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="md"][data-theme][data-collapsed="true"] .button-icon{
3213
3269
  margin-left: -0.5rem;
3214
3270
  margin-right: -0.5rem}
3215
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"] .button-element{
3271
+
3272
+ [data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"]{
3216
3273
  padding-left: 0.75rem;
3217
3274
  padding-right: 0.75rem}
3218
3275
 
3219
- [data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3276
+ [data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="md"][data-theme|="text"][data-collapsed="true"] .button-icon{
3220
3277
  padding-left: 0.5rem;
3221
3278
  padding-right: 0.5rem}
3222
3279
  [data-coco][data-component="app-button"][data-size-xl="lg"] .button-content{
@@ -3226,20 +3283,22 @@ select{
3226
3283
  [data-coco][data-component="app-button"][data-size-xl="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="lg"] .button-toggle{
3227
3284
  height: 1.5rem;
3228
3285
  width: 1.5rem}
3229
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme] .button-element{
3286
+
3287
+ [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme]{
3230
3288
  padding-top: 1rem;
3231
3289
  padding-bottom: 1rem;
3232
3290
  padding-left: 1.5rem;
3233
3291
  padding-right: 1.5rem}
3234
3292
 
3235
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="lg"][data-theme][data-collapsed="true"] .button-inner{
3293
+ [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="lg"][data-theme][data-collapsed="true"] .button-inner{
3236
3294
  margin-left: -8px;
3237
3295
  margin-right: -8px}
3238
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"] .button-element{
3296
+
3297
+ [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"]{
3239
3298
  padding-left: 0.75rem;
3240
3299
  padding-right: 0.75rem}
3241
3300
 
3242
- [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3301
+ [data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xl="lg"][data-theme|="text"][data-collapsed="true"] .button-icon{
3243
3302
  padding-left: 0.75rem;
3244
3303
  padding-right: 0.75rem}
3245
3304
  }
@@ -3255,26 +3314,28 @@ select{
3255
3314
  [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-toggle{
3256
3315
  height: 0.875rem;
3257
3316
  width: 0.875rem}
3258
- [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme] .button-element,
3259
- [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme] .button-element{
3317
+
3318
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme],
3319
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme]{
3260
3320
  padding-top: 0.5rem;
3261
3321
  padding-bottom: 0.5rem;
3262
3322
  padding-left: 0.75rem;
3263
3323
  padding-right: 0.75rem}
3264
3324
 
3265
- [data-coco][data-component="app-button"][data-size-xxl="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-collapsed="true"] > .button-element .button-icon,
3266
- [data-coco][data-component="app-button"][data-size-2xl="xs"].icon-only > .button-element .button-icon,
3267
- [data-coco][data-component="app-button"][data-size-2xl="xs"][data-collapsed="true"] > .button-element .button-icon{
3325
+ [data-coco][data-component="app-button"][data-size-xxl="xs"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-collapsed="true"] .button-icon,
3326
+ [data-coco][data-component="app-button"][data-size-2xl="xs"].icon-only .button-icon,
3327
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-collapsed="true"] .button-icon{
3268
3328
  margin-left: -0.25rem;
3269
3329
  margin-right: -0.25rem}
3270
- [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"] .button-element,
3271
- [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"] .button-element{
3330
+
3331
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"],
3332
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"]{
3272
3333
  padding-left: 0.5rem;
3273
3334
  padding-right: 0.5rem}
3274
3335
 
3275
- [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
3276
- [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,
3277
- [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3336
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"][data-collapsed="true"] .button-icon,
3337
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"].icon-only .button-icon,
3338
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"][data-collapsed="true"] .button-icon{
3278
3339
  padding-left: 0.5rem;
3279
3340
  padding-right: 0.5rem}
3280
3341
  [data-coco][data-component="app-button"][data-size-xxl="sm"] .button-content,
@@ -3287,26 +3348,28 @@ select{
3287
3348
  [data-coco][data-component="app-button"][data-size-2xl="sm"] .button-toggle{
3288
3349
  height: 1rem;
3289
3350
  width: 1rem}
3290
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme] .button-element,
3291
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme] .button-element{
3351
+
3352
+ [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme],
3353
+ [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme]{
3292
3354
  padding-top: 0.625rem;
3293
3355
  padding-bottom: 0.625rem;
3294
3356
  padding-left: 1rem;
3295
3357
  padding-right: 1rem}
3296
3358
 
3297
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon,
3298
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme].icon-only > .button-element .button-icon,
3299
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3359
+ [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme][data-collapsed="true"] .button-icon,
3360
+ [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme].icon-only .button-icon,
3361
+ [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme][data-collapsed="true"] .button-icon{
3300
3362
  margin-left: -0.375rem;
3301
3363
  margin-right: -0.375rem}
3302
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"] .button-element,
3303
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"] .button-element{
3364
+
3365
+ [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"],
3366
+ [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"]{
3304
3367
  padding-left: 0.5rem;
3305
3368
  padding-right: 0.5rem}
3306
3369
 
3307
- [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
3308
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"].icon-only > .button-element .button-icon,
3309
- [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3370
+ [data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="sm"][data-theme|="text"][data-collapsed="true"] .button-icon,
3371
+ [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"].icon-only .button-icon,
3372
+ [data-coco][data-component="app-button"][data-size-2xl="sm"][data-theme|="text"][data-collapsed="true"] .button-icon{
3310
3373
  padding-left: 0.5rem;
3311
3374
  padding-right: 0.5rem}
3312
3375
  [data-coco][data-component="app-button"][data-size-xxl="md"] .button-content,
@@ -3319,26 +3382,28 @@ select{
3319
3382
  [data-coco][data-component="app-button"][data-size-2xl="md"] .button-toggle{
3320
3383
  height: 1.25rem;
3321
3384
  width: 1.25rem}
3322
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme] .button-element,
3323
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme] .button-element{
3385
+
3386
+ [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme],
3387
+ [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme]{
3324
3388
  padding-top: 0.75rem;
3325
3389
  padding-bottom: 0.75rem;
3326
3390
  padding-left: 1.25rem;
3327
3391
  padding-right: 1.25rem}
3328
3392
 
3329
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="md"][data-theme][data-collapsed="true"] > .button-element .button-icon,
3330
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme].icon-only > .button-element .button-icon,
3331
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3393
+ [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="md"][data-theme][data-collapsed="true"] .button-icon,
3394
+ [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme].icon-only .button-icon,
3395
+ [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme][data-collapsed="true"] .button-icon{
3332
3396
  margin-left: -0.5rem;
3333
3397
  margin-right: -0.5rem}
3334
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"] .button-element,
3335
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"] .button-element{
3398
+
3399
+ [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"],
3400
+ [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"]{
3336
3401
  padding-left: 0.75rem;
3337
3402
  padding-right: 0.75rem}
3338
3403
 
3339
- [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
3340
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"].icon-only > .button-element .button-icon,
3341
- [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3404
+ [data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="md"][data-theme|="text"][data-collapsed="true"] .button-icon,
3405
+ [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"].icon-only .button-icon,
3406
+ [data-coco][data-component="app-button"][data-size-2xl="md"][data-theme|="text"][data-collapsed="true"] .button-icon{
3342
3407
  padding-left: 0.5rem;
3343
3408
  padding-right: 0.5rem}
3344
3409
  [data-coco][data-component="app-button"][data-size-xxl="lg"] .button-content,
@@ -3351,26 +3416,28 @@ select{
3351
3416
  [data-coco][data-component="app-button"][data-size-2xl="lg"] .button-toggle{
3352
3417
  height: 1.5rem;
3353
3418
  width: 1.5rem}
3354
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme] .button-element,
3355
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme] .button-element{
3419
+
3420
+ [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme],
3421
+ [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme]{
3356
3422
  padding-top: 1rem;
3357
3423
  padding-bottom: 1rem;
3358
3424
  padding-left: 1.5rem;
3359
3425
  padding-right: 1.5rem}
3360
3426
 
3361
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme][data-collapsed="true"] .button-inner,
3362
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme].icon-only > .button-element .button-icon,
3427
+ [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme][data-collapsed="true"] .button-inner,
3428
+ [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme].icon-only .button-icon,
3363
3429
  [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme][data-collapsed="true"] .button-inner{
3364
3430
  margin-left: -8px;
3365
3431
  margin-right: -8px}
3366
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"] .button-element,
3367
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"] .button-element{
3432
+
3433
+ [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"],
3434
+ [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"]{
3368
3435
  padding-left: 0.75rem;
3369
3436
  padding-right: 0.75rem}
3370
3437
 
3371
- [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
3372
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"].icon-only > .button-element .button-icon,
3373
- [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3438
+ [data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-xxl="lg"][data-theme|="text"][data-collapsed="true"] .button-icon,
3439
+ [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"].icon-only .button-icon,
3440
+ [data-coco][data-component="app-button"][data-size-2xl="lg"][data-theme|="text"][data-collapsed="true"] .button-icon{
3374
3441
  padding-left: 0.75rem;
3375
3442
  padding-right: 0.75rem}
3376
3443
  }
@@ -3383,20 +3450,22 @@ select{
3383
3450
  [data-coco][data-component="app-button"][data-size-max="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="xs"] .button-toggle{
3384
3451
  height: 0.875rem;
3385
3452
  width: 0.875rem}
3386
- [data-coco][data-component="app-button"][data-size-max="xs"][data-theme] .button-element{
3453
+
3454
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme]{
3387
3455
  padding-top: 0.5rem;
3388
3456
  padding-bottom: 0.5rem;
3389
3457
  padding-left: 0.75rem;
3390
3458
  padding-right: 0.75rem}
3391
3459
 
3392
- [data-coco][data-component="app-button"][data-size-max="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-collapsed="true"] > .button-element .button-icon{
3460
+ [data-coco][data-component="app-button"][data-size-max="xs"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-collapsed="true"] .button-icon{
3393
3461
  margin-left: -0.25rem;
3394
3462
  margin-right: -0.25rem}
3395
- [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"] .button-element{
3463
+
3464
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"]{
3396
3465
  padding-left: 0.5rem;
3397
3466
  padding-right: 0.5rem}
3398
3467
 
3399
- [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3468
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"][data-collapsed="true"] .button-icon{
3400
3469
  padding-left: 0.5rem;
3401
3470
  padding-right: 0.5rem}
3402
3471
  [data-coco][data-component="app-button"][data-size-max="sm"] .button-content{
@@ -3406,20 +3475,22 @@ select{
3406
3475
  [data-coco][data-component="app-button"][data-size-max="sm"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="sm"] .button-toggle{
3407
3476
  height: 1rem;
3408
3477
  width: 1rem}
3409
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme] .button-element{
3478
+
3479
+ [data-coco][data-component="app-button"][data-size-max="sm"][data-theme]{
3410
3480
  padding-top: 0.625rem;
3411
3481
  padding-bottom: 0.625rem;
3412
3482
  padding-left: 1rem;
3413
3483
  padding-right: 1rem}
3414
3484
 
3415
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="sm"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3485
+ [data-coco][data-component="app-button"][data-size-max="sm"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="sm"][data-theme][data-collapsed="true"] .button-icon{
3416
3486
  margin-left: -0.375rem;
3417
3487
  margin-right: -0.375rem}
3418
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"] .button-element{
3488
+
3489
+ [data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"]{
3419
3490
  padding-left: 0.5rem;
3420
3491
  padding-right: 0.5rem}
3421
3492
 
3422
- [data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3493
+ [data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="sm"][data-theme|="text"][data-collapsed="true"] .button-icon{
3423
3494
  padding-left: 0.5rem;
3424
3495
  padding-right: 0.5rem}
3425
3496
  [data-coco][data-component="app-button"][data-size-max="md"] .button-content{
@@ -3429,20 +3500,22 @@ select{
3429
3500
  [data-coco][data-component="app-button"][data-size-max="md"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="md"] .button-toggle{
3430
3501
  height: 1.25rem;
3431
3502
  width: 1.25rem}
3432
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme] .button-element{
3503
+
3504
+ [data-coco][data-component="app-button"][data-size-max="md"][data-theme]{
3433
3505
  padding-top: 0.75rem;
3434
3506
  padding-bottom: 0.75rem;
3435
3507
  padding-left: 1.25rem;
3436
3508
  padding-right: 1.25rem}
3437
3509
 
3438
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="md"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3510
+ [data-coco][data-component="app-button"][data-size-max="md"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="md"][data-theme][data-collapsed="true"] .button-icon{
3439
3511
  margin-left: -0.5rem;
3440
3512
  margin-right: -0.5rem}
3441
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"] .button-element{
3513
+
3514
+ [data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"]{
3442
3515
  padding-left: 0.75rem;
3443
3516
  padding-right: 0.75rem}
3444
3517
 
3445
- [data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3518
+ [data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="md"][data-theme|="text"][data-collapsed="true"] .button-icon{
3446
3519
  padding-left: 0.5rem;
3447
3520
  padding-right: 0.5rem}
3448
3521
  [data-coco][data-component="app-button"][data-size-max="lg"] .button-content{
@@ -3452,20 +3525,22 @@ select{
3452
3525
  [data-coco][data-component="app-button"][data-size-max="lg"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="lg"] .button-toggle{
3453
3526
  height: 1.5rem;
3454
3527
  width: 1.5rem}
3455
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme] .button-element{
3528
+
3529
+ [data-coco][data-component="app-button"][data-size-max="lg"][data-theme]{
3456
3530
  padding-top: 1rem;
3457
3531
  padding-bottom: 1rem;
3458
3532
  padding-left: 1.5rem;
3459
3533
  padding-right: 1.5rem}
3460
3534
 
3461
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="lg"][data-theme][data-collapsed="true"] .button-inner{
3535
+ [data-coco][data-component="app-button"][data-size-max="lg"][data-theme].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="lg"][data-theme][data-collapsed="true"] .button-inner{
3462
3536
  margin-left: -8px;
3463
3537
  margin-right: -8px}
3464
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"] .button-element{
3538
+
3539
+ [data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"]{
3465
3540
  padding-left: 0.75rem;
3466
3541
  padding-right: 0.75rem}
3467
3542
 
3468
- [data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3543
+ [data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-button"][data-size-max="lg"][data-theme|="text"][data-collapsed="true"] .button-icon{
3469
3544
  padding-left: 0.75rem;
3470
3545
  padding-right: 0.75rem}
3471
3546
  }
@@ -3473,7 +3548,10 @@ select{
3473
3548
  width: -moz-fit-content;
3474
3549
  width: fit-content;
3475
3550
  border-radius: 44px;
3551
+ opacity: 0;
3476
3552
  }
3553
+ [data-coco][data-component="app-button-group"].button-group-ready{
3554
+ opacity: 1}
3477
3555
  [data-coco][data-component="app-button-group"] .button-group-buttons{
3478
3556
  display: flex;
3479
3557
  align-items: center;
@@ -3492,11 +3570,11 @@ select{
3492
3570
  [data-coco][data-component="app-button-group"][data-segmented="true"] .button-group-buttons{
3493
3571
  -moz-column-gap: 0px;
3494
3572
  column-gap: 0px}
3495
- [data-coco][data-component="app-button-group"][data-segmented="true"] .coco-button:not(:first-child){
3573
+ [data-coco][data-component="app-button-group"][data-segmented="true"] .coco-button-wrapper:not(:first-child) .coco-button{
3496
3574
  border-top-left-radius: 0px;
3497
3575
  border-bottom-left-radius: 0px;
3498
3576
  border-left-width: 0px}
3499
- [data-coco][data-component="app-button-group"][data-segmented="true"] .coco-button:not(:last-child){
3577
+ [data-coco][data-component="app-button-group"][data-segmented="true"] .coco-button-wrapper:not(:last-child) .coco-button{
3500
3578
  border-top-right-radius: 0px;
3501
3579
  border-bottom-right-radius: 0px}
3502
3580
  [data-coco][data-component="app-button-group"][data-segmented="true"][data-floating="true"]{
@@ -3504,13 +3582,10 @@ select{
3504
3582
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
3505
3583
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
3506
3584
  [data-coco][data-component="app-button-to"]{
3507
- display: flex;
3508
- width: -moz-max-content;
3509
- width: max-content}
3510
- [data-coco][data-component="app-button-to"] form{
3511
- width: 100%}
3512
- [data-coco][data-component="app-button-to"][data-fit="full"]{
3513
- width: 100%}
3585
+ display: contents}
3586
+ [data-coco][data-component="app-button-to"] form,
3587
+ [data-coco][data-component="app-button-to"] input{
3588
+ display: contents}
3514
3589
  [data-coco][data-component="app-color-picker"]{
3515
3590
  --tw-bg-opacity: 1;
3516
3591
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
@@ -3801,9 +3876,7 @@ select{
3801
3876
  width: 1.5rem}
3802
3877
  }
3803
3878
  [data-coco][data-component="app-color-picker-button"]{
3804
- display: inline-flex;
3805
- width: -moz-max-content;
3806
- width: max-content}
3879
+ display: contents}
3807
3880
  [data-coco][data-component="app-color-picker-button"] .picker-icon{
3808
3881
  display: block;
3809
3882
  height: 100%;
@@ -4015,15 +4088,11 @@ select{
4015
4088
  padding-top: 2rem}
4016
4089
  }
4017
4090
  [data-coco][data-component="app-image-picker-button"]{
4018
- display: inline-flex;
4019
- width: -moz-max-content;
4020
- width: max-content}
4091
+ display: contents}
4021
4092
  [data-coco][data-component="app-image-picker-button"] [data-component="app-image-picker"]{
4022
4093
  border-radius: 0.375rem}
4023
4094
  [data-coco][data-component="app-layout-picker-button"]{
4024
- display: inline-flex;
4025
- width: -moz-max-content;
4026
- width: max-content}
4095
+ display: contents}
4027
4096
  [data-coco][data-component="app-layout-picker-button"] .layout-picker{
4028
4097
  display: grid;
4029
4098
  grid-template-columns: repeat(2, minmax(0, 1fr))}
@@ -4146,22 +4215,30 @@ select{
4146
4215
  }
4147
4216
  [data-coco][data-component="app-menu"] .menu-item > *{
4148
4217
  width: 100%}
4149
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"]:hover,
4150
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"]:hover,
4151
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]:hover{
4218
+ [data-coco][data-component="app-menu"] .menu-item > .coco-button-wrapper > .coco-button:hover,
4219
+ [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .coco-button:hover,
4220
+ [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]
4221
+ > .coco-button-wrapper
4222
+ > .coco-button:hover{
4152
4223
  background-color: rgba(0, 12, 39, 0.06);
4153
4224
  background-blend-mode: hard-light}
4154
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"]:active,
4155
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"]:active,
4156
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]:active{
4225
+ [data-coco][data-component="app-menu"] .menu-item > .coco-button-wrapper > .coco-button:active,
4226
+ [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .coco-button:active,
4227
+ [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]
4228
+ > .coco-button-wrapper
4229
+ > .coco-button:active{
4157
4230
  background-color: rgba(0, 12, 39, 0.1);
4158
4231
  background-blend-mode: hard-light}
4159
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-inner{
4232
+ [data-coco][data-component="app-menu"] .menu-item > .coco-button-wrapper > .coco-button .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .coco-button .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]
4233
+ > .coco-button-wrapper
4234
+ > .coco-button .button-inner{
4160
4235
  margin-left: 0px;
4161
4236
  margin-right: 0px;
4162
4237
  justify-content: flex-start;
4163
4238
  text-align: left}
4164
- [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-content{
4239
+ [data-coco][data-component="app-menu"] .menu-item > .coco-button-wrapper > .coco-button .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .coco-button .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]
4240
+ > .coco-button-wrapper
4241
+ > .coco-button .button-content{
4165
4242
  font-weight: 400 !important}
4166
4243
  [data-coco][data-component="app-menu"] .menu-item .divider{
4167
4244
  margin-top: 0.375rem;
@@ -4170,31 +4247,31 @@ select{
4170
4247
  [data-coco][data-component="app-menu"][data-size="xs"]{
4171
4248
  padding-top: 0.375rem;
4172
4249
  padding-bottom: 0.375rem}
4173
- [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element, [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] > .button-element{
4250
+ [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"], [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"]{
4174
4251
  padding-left: 1rem;
4175
4252
  padding-right: 1rem;
4176
4253
  padding-top: 0.5rem;
4177
4254
  padding-bottom: 0.5rem;
4178
4255
  font-size: 14px;
4179
4256
  line-height: 16px}
4180
- [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner, [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] > .button-element .button-inner{
4257
+ [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] .button-inner, [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] .button-inner{
4181
4258
  gap: 0.5rem}
4182
- [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"], [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"]{
4259
+ [data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] .button-inner > [data-component="icon"], [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] .button-inner > [data-component="icon"]{
4183
4260
  height: 1rem;
4184
4261
  width: 1rem}
4185
4262
  [data-coco][data-component="app-menu"][data-size="md"]{
4186
4263
  padding-top: 0.5rem;
4187
4264
  padding-bottom: 0.5rem}
4188
- [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] > .button-element{
4265
+ [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"]{
4189
4266
  padding-left: 1.25rem;
4190
4267
  padding-right: 1.25rem;
4191
4268
  padding-top: 0.625rem;
4192
4269
  padding-bottom: 0.625rem;
4193
4270
  font-size: 16px;
4194
4271
  line-height: 20px}
4195
- [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] > .button-element .button-inner{
4272
+ [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] .button-inner{
4196
4273
  gap: 0.5rem}
4197
- [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"]{
4274
+ [data-coco][data-component="app-menu"][data-size="md"] .menu-item [data-component="app-button"] .button-inner > [data-component="icon"]{
4198
4275
  height: 1.25rem;
4199
4276
  width: 1.25rem}
4200
4277
  [data-coco][data-component="app-menu"] .divider{
@@ -4203,9 +4280,7 @@ select{
4203
4280
  --tw-border-opacity: 1;
4204
4281
  border-color: rgb(209 213 219 / var(--tw-border-opacity))}
4205
4282
  [data-coco][data-component="app-menu-button"]{
4206
- display: inline-flex;
4207
- width: -moz-max-content;
4208
- width: max-content}
4283
+ display: contents}
4209
4284
  [data-coco][data-component="app-menu-button"][data-fit="full"]{
4210
4285
  width: 100%}
4211
4286
  [data-coco][data-component="app-menu-button"] [data-component="menu"]{
@@ -4337,13 +4412,13 @@ select{
4337
4412
  font-weight: 600;
4338
4413
  --tw-text-opacity: 1;
4339
4414
  color: rgb(255 255 255 / var(--tw-text-opacity))}
4340
- [data-coco][data-component="app-snackbar"] .coco-button .button-element:hover{
4415
+ [data-coco][data-component="app-snackbar"] .coco-button:hover{
4341
4416
  --tw-bg-opacity: 1;
4342
4417
  background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
4343
4418
  [data-coco][data-component="app-snackbar"] .snackbar-action{
4344
4419
  margin-left: auto;
4345
4420
  flex: none}
4346
- [data-coco][data-component="app-snackbar"] .snackbar-action .coco-button .button-element{
4421
+ [data-coco][data-component="app-snackbar"] .snackbar-action .coco-button{
4347
4422
  padding-left: 0.5rem;
4348
4423
  padding-right: 0.5rem;
4349
4424
  --tw-text-opacity: 1;
@@ -4351,10 +4426,10 @@ select{
4351
4426
  [data-coco][data-component="app-snackbar"] .snackbar-dismiss{
4352
4427
  margin-left: auto;
4353
4428
  flex: none}
4354
- [data-coco][data-component="app-snackbar"] .snackbar-dismiss .coco-button .button-element{
4429
+ [data-coco][data-component="app-snackbar"] .snackbar-dismiss .coco-button{
4355
4430
  --tw-text-opacity: 1;
4356
4431
  color: rgb(229 231 235 / var(--tw-text-opacity))}
4357
- [data-coco][data-component="app-snackbar"] .snackbar-dismiss .coco-button .button-element:hover{
4432
+ [data-coco][data-component="app-snackbar"] .snackbar-dismiss .coco-button:hover{
4358
4433
  --tw-text-opacity: 1;
4359
4434
  color: rgb(255 255 255 / var(--tw-text-opacity))}
4360
4435
  /* Positioning */
@@ -5067,6 +5142,8 @@ select{
5067
5142
  display: contents}
5068
5143
  .hidden{
5069
5144
  display: none}
5145
+ .transform{
5146
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
5070
5147
  .resize{
5071
5148
  resize: both}
5072
5149
  .italic{
@@ -5087,6 +5164,8 @@ select{
5087
5164
  text-decoration-line: underline}
5088
5165
  .filter{
5089
5166
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
5167
+ .ease-out{
5168
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1)}
5090
5169
  /* Transparent gray blend-mode background utilities */
5091
5170
  .\!icon {
5092
5171
  }
@@ -5315,20 +5394,12 @@ select{
5315
5394
  .app-button-xs .button-toggle{
5316
5395
  height: 0.875rem;
5317
5396
  width: 0.875rem}
5318
- .app-button-xs[data-theme] .button-element{
5319
- padding-top: 0.5rem;
5320
- padding-bottom: 0.5rem;
5321
- padding-left: 0.75rem;
5322
- padding-right: 0.75rem}
5323
- .app-button-xs.icon-only > .button-element .button-icon,
5324
- .app-button-xs[data-collapsed="true"] > .button-element .button-icon{
5397
+ .app-button-xs.icon-only .button-icon,
5398
+ .app-button-xs[data-collapsed="true"] .button-icon{
5325
5399
  margin-left: -0.25rem;
5326
5400
  margin-right: -0.25rem}
5327
- .app-button-xs[data-theme|="text"] .button-element{
5328
- padding-left: 0.5rem;
5329
- padding-right: 0.5rem}
5330
- .app-button-xs[data-theme|="text"].icon-only > .button-element .button-icon,
5331
- .app-button-xs[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
5401
+ .app-button-xs[data-theme|="text"].icon-only .button-icon,
5402
+ .app-button-xs[data-theme|="text"][data-collapsed="true"] .button-icon{
5332
5403
  padding-left: 0.5rem;
5333
5404
  padding-right: 0.5rem}
5334
5405
  .app-button-sm .button-content{
@@ -5338,20 +5409,12 @@ select{
5338
5409
  .app-button-sm .button-toggle{
5339
5410
  height: 1rem;
5340
5411
  width: 1rem}
5341
- .app-button-sm[data-theme] .button-element{
5342
- padding-top: 0.625rem;
5343
- padding-bottom: 0.625rem;
5344
- padding-left: 1rem;
5345
- padding-right: 1rem}
5346
- .app-button-sm[data-theme].icon-only > .button-element .button-icon,
5347
- .app-button-sm[data-theme][data-collapsed="true"] > .button-element .button-icon{
5412
+ .app-button-sm[data-theme].icon-only .button-icon,
5413
+ .app-button-sm[data-theme][data-collapsed="true"] .button-icon{
5348
5414
  margin-left: -0.375rem;
5349
5415
  margin-right: -0.375rem}
5350
- .app-button-sm[data-theme|="text"] .button-element{
5351
- padding-left: 0.5rem;
5352
- padding-right: 0.5rem}
5353
- .app-button-sm[data-theme|="text"].icon-only > .button-element .button-icon,
5354
- .app-button-sm[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
5416
+ .app-button-sm[data-theme|="text"].icon-only .button-icon,
5417
+ .app-button-sm[data-theme|="text"][data-collapsed="true"] .button-icon{
5355
5418
  padding-left: 0.5rem;
5356
5419
  padding-right: 0.5rem}
5357
5420
  .app-button-md .button-content{
@@ -5361,20 +5424,12 @@ select{
5361
5424
  .app-button-md .button-toggle{
5362
5425
  height: 1.25rem;
5363
5426
  width: 1.25rem}
5364
- .app-button-md[data-theme] .button-element{
5365
- padding-top: 0.75rem;
5366
- padding-bottom: 0.75rem;
5367
- padding-left: 1.25rem;
5368
- padding-right: 1.25rem}
5369
- .app-button-md[data-theme].icon-only > .button-element .button-icon,
5370
- .app-button-md[data-theme][data-collapsed="true"] > .button-element .button-icon{
5427
+ .app-button-md[data-theme].icon-only .button-icon,
5428
+ .app-button-md[data-theme][data-collapsed="true"] .button-icon{
5371
5429
  margin-left: -0.5rem;
5372
5430
  margin-right: -0.5rem}
5373
- .app-button-md[data-theme|="text"] .button-element{
5374
- padding-left: 0.75rem;
5375
- padding-right: 0.75rem}
5376
- .app-button-md[data-theme|="text"].icon-only > .button-element .button-icon,
5377
- .app-button-md[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
5431
+ .app-button-md[data-theme|="text"].icon-only .button-icon,
5432
+ .app-button-md[data-theme|="text"][data-collapsed="true"] .button-icon{
5378
5433
  padding-left: 0.5rem;
5379
5434
  padding-right: 0.5rem}
5380
5435
  .app-button-lg .button-content{
@@ -5384,20 +5439,12 @@ select{
5384
5439
  .app-button-lg .button-toggle{
5385
5440
  height: 1.5rem;
5386
5441
  width: 1.5rem}
5387
- .app-button-lg[data-theme] .button-element{
5388
- padding-top: 1rem;
5389
- padding-bottom: 1rem;
5390
- padding-left: 1.5rem;
5391
- padding-right: 1.5rem}
5392
- .app-button-lg[data-theme].icon-only > .button-element .button-icon,
5442
+ .app-button-lg[data-theme].icon-only .button-icon,
5393
5443
  .app-button-lg[data-theme][data-collapsed="true"] .button-inner{
5394
5444
  margin-left: -8px;
5395
5445
  margin-right: -8px}
5396
- .app-button-lg[data-theme|="text"] .button-element{
5397
- padding-left: 0.75rem;
5398
- padding-right: 0.75rem}
5399
- .app-button-lg[data-theme|="text"].icon-only > .button-element .button-icon,
5400
- .app-button-lg[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
5446
+ .app-button-lg[data-theme|="text"].icon-only .button-icon,
5447
+ .app-button-lg[data-theme|="text"][data-collapsed="true"] .button-icon{
5401
5448
  padding-left: 0.75rem;
5402
5449
  padding-right: 0.75rem}
5403
5450
  .app-color-picker-sm .picker-section:not(:first-child){