@empathyco/x-components 3.0.0-alpha.210 → 3.0.0-alpha.211

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/design-system/base.css +14 -14
  3. package/design-system/full-theme.css +1557 -1556
  4. package/docs/API-reference/api/x-adapter-platform.platformbanner.md +1 -1
  5. package/docs/API-reference/api/x-adapter-platform.platformbanner.position.md +1 -1
  6. package/docs/API-reference/api/x-adapter-platform.platformpromoted.md +1 -1
  7. package/docs/API-reference/api/x-adapter-platform.platformpromoted.position.md +1 -1
  8. package/docs/API-reference/api/x-types.banner.md +1 -1
  9. package/docs/API-reference/api/x-types.banner.position.md +1 -1
  10. package/docs/API-reference/api/x-types.promoted.md +1 -1
  11. package/docs/API-reference/api/x-types.promoted.position.md +1 -1
  12. package/docs/API-reference/components/search/x-components.results-list.md +9 -4
  13. package/js/x-modules/search/components/promoteds-list.vue.js.map +1 -1
  14. package/js/x-modules/search/components/promoteds-list.vue_rollup-plugin-vue_script.vue.js +18 -3
  15. package/js/x-modules/search/components/promoteds-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  16. package/js/x-modules/search/components/results-list.vue.js.map +1 -1
  17. package/package.json +4 -4
  18. package/report/x-adapter-platform.api.json +4 -4
  19. package/report/x-types.api.json +4 -4
  20. package/types/x-modules/search/components/promoteds-list.vue.d.ts.map +1 -1
package/design-system/full-theme.css CHANGED
@@ -174,29 +174,6 @@
174
174
  margin-right: var(--x-size-gap-button-default);
175
175
  }
176
176
  }
177
- :root {
178
- --x-color-background-button-default: var(--x-color-base-lead);
179
- --x-color-border-button-default: var(--x-color-background-button-default);
180
- --x-color-text-button-default: var(--x-color-base-neutral-100);
181
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
182
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
183
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
184
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
185
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
186
- --x-size-border-width-button-default: var(--x-size-border-width-base);
187
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
188
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
189
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
190
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
191
- --x-size-height-button-default: var(--x-size-base-08);
192
- --x-size-padding-right-button-default: var(--x-size-base-05);
193
- --x-size-padding-left-button-default: var(--x-size-base-05);
194
- --x-size-gap-button-default: var(--x-size-base-03);
195
- --x-font-family-button-default: var(--x-font-family-text);
196
- --x-size-font-button-default: var(--x-size-font-text);
197
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
198
- --x-size-line-height-button-default: var(--x-size-line-height-text);
199
- }
200
177
  .x-button--ghost.x-button,
201
178
  .x-button--ghost .x-button {
202
179
  --x-color-background-button-default: var(--x-color-background-button-ghost);
@@ -1120,10 +1097,6 @@
1120
1097
  --x-size-width-icon-default: var(--x-size-width-icon-l);
1121
1098
  --x-size-height-icon-default: var(--x-size-height-icon-l);
1122
1099
  }
1123
- :root {
1124
- --x-size-width-icon-l: var(--x-size-base-06);
1125
- --x-size-height-icon-l: var(--x-size-base-06);
1126
- }
1127
1100
  .x-icon--m {
1128
1101
  --x-size-width-icon-default: var(--x-size-width-icon-m);
1129
1102
  --x-size-height-icon-default: var(--x-size-height-icon-m);
@@ -1148,32 +1121,6 @@
1148
1121
  --x-size-width-icon-xl: var(--x-size-base-07);
1149
1122
  --x-size-height-icon-xl: var(--x-size-base-07);
1150
1123
  }
1151
- .x-input-group--card.x-input-group,
1152
- .x-input-group--card .x-input-group {
1153
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
1154
- --x-size-border-radius-top-left-input-group-default: var(
1155
- --x-size-border-radius-top-left-input-group-card
1156
- );
1157
- --x-size-border-radius-top-right-input-group-default: var(
1158
- --x-size-border-radius-top-right-input-group-card
1159
- );
1160
- --x-size-border-radius-bottom-right-input-group-default: var(
1161
- --x-size-border-radius-bottom-right-input-group-card
1162
- );
1163
- --x-size-border-radius-bottom-left-input-group-default: var(
1164
- --x-size-border-radius-bottom-left-input-group-card
1165
- );
1166
- }
1167
- .x-input-group--card.x-input-group__action:first-child,
1168
- .x-input-group--card .x-input-group__action:first-child {
1169
- --x-size-border-radius-top-right-input-group-default: 0;
1170
- --x-size-border-radius-bottom-right-input-group-default: 0;
1171
- }
1172
- .x-input-group--card.x-input-group__action:last-child,
1173
- .x-input-group--card .x-input-group__action:last-child {
1174
- --x-size-border-radius-top-left-input-group-default: 0;
1175
- --x-size-border-radius-bottom-left-input-group-default: 0;
1176
- }
1177
1124
  :root {
1178
1125
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
1179
1126
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -1420,11 +1367,8 @@
1420
1367
  );
1421
1368
  }
1422
1369
  :root {
1423
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
1424
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
1425
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
1426
- --x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
1427
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
1370
+ --x-size-width-icon-l: var(--x-size-base-06);
1371
+ --x-size-height-icon-l: var(--x-size-base-06);
1428
1372
  }
1429
1373
  .x-input--card.x-input,
1430
1374
  .x-input--card .x-input {
@@ -2571,21 +2515,31 @@
2571
2515
  margin-right: var(--x-size-gap-list-13);
2572
2516
  }
2573
2517
  }
2574
- /* @deprecated */
2575
- :root {
2576
- --x-size-padding-list-01: var(--x-size-base-01);
2577
- --x-size-padding-list-02: var(--x-size-base-02);
2578
- --x-size-padding-list-03: var(--x-size-base-03);
2579
- --x-size-padding-list-04: var(--x-size-base-04);
2580
- --x-size-padding-list-05: var(--x-size-base-05);
2581
- --x-size-padding-list-06: var(--x-size-base-06);
2582
- --x-size-padding-list-07: var(--x-size-base-07);
2583
- --x-size-padding-list-08: var(--x-size-base-08);
2584
- --x-size-padding-list-09: var(--x-size-base-09);
2585
- --x-size-padding-list-10: var(--x-size-base-10);
2586
- --x-size-padding-list-11: var(--x-size-base-11);
2587
- --x-size-padding-list-12: var(--x-size-base-12);
2588
- --x-size-padding-list-13: var(--x-size-base-13);
2518
+ .x-input-group--card.x-input-group,
2519
+ .x-input-group--card .x-input-group {
2520
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
2521
+ --x-size-border-radius-top-left-input-group-default: var(
2522
+ --x-size-border-radius-top-left-input-group-card
2523
+ );
2524
+ --x-size-border-radius-top-right-input-group-default: var(
2525
+ --x-size-border-radius-top-right-input-group-card
2526
+ );
2527
+ --x-size-border-radius-bottom-right-input-group-default: var(
2528
+ --x-size-border-radius-bottom-right-input-group-card
2529
+ );
2530
+ --x-size-border-radius-bottom-left-input-group-default: var(
2531
+ --x-size-border-radius-bottom-left-input-group-card
2532
+ );
2533
+ }
2534
+ .x-input-group--card.x-input-group__action:first-child,
2535
+ .x-input-group--card .x-input-group__action:first-child {
2536
+ --x-size-border-radius-top-right-input-group-default: 0;
2537
+ --x-size-border-radius-bottom-right-input-group-default: 0;
2538
+ }
2539
+ .x-input-group--card.x-input-group__action:last-child,
2540
+ .x-input-group--card .x-input-group__action:last-child {
2541
+ --x-size-border-radius-top-left-input-group-default: 0;
2542
+ --x-size-border-radius-bottom-left-input-group-default: 0;
2589
2543
  }
2590
2544
  [dir="ltr"] .x-message {
2591
2545
  border-left-width: var(--x-size-border-width-left-message-default);
@@ -2982,11 +2936,11 @@
2982
2936
  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
2983
2937
  }
2984
2938
  :root {
2985
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
2986
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
2987
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
2988
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
2989
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
2939
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
2940
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
2941
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
2942
+ --x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
2943
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
2990
2944
  }
2991
2945
  .x-picture--colored.x-picture {
2992
2946
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -3076,9 +3030,12 @@
3076
3030
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
3077
3031
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
3078
3032
  }
3079
- .x-picture--fixed-ratio.x-picture {
3080
- aspect-ratio: var(--x-number-aspect-ratio-picture);
3081
- width: 100%;
3033
+ :root {
3034
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
3035
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
3036
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
3037
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
3038
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
3082
3039
  }
3083
3040
  :root {
3084
3041
  --x-number-aspect-ratio-picture: 1;
@@ -3419,25 +3376,9 @@
3419
3376
  --x-size-gap-row-19: var(--x-size-base-19);
3420
3377
  --x-size-gap-row-20: var(--x-size-base-20);
3421
3378
  }
3422
- /* @deprecated */
3423
- .x-row--padding-02 {
3424
- --x-size-padding-row: var(--x-size-padding-row-02);
3425
- }
3426
-
3427
- .x-row--padding-03 {
3428
- --x-size-padding-row: var(--x-size-padding-row-03);
3429
- }
3430
-
3431
- .x-row--padding-04 {
3432
- --x-size-padding-row: var(--x-size-padding-row-04);
3433
- }
3434
-
3435
- .x-row--padding-05 {
3436
- --x-size-padding-row: var(--x-size-padding-row-05);
3437
- }
3438
-
3439
- .x-row--padding-06 {
3440
- --x-size-padding-row: var(--x-size-padding-row-06);
3379
+ .x-picture--fixed-ratio.x-picture {
3380
+ aspect-ratio: var(--x-number-aspect-ratio-picture);
3381
+ width: 100%;
3441
3382
  }
3442
3383
  /* @deprecated */
3443
3384
  :root {
@@ -3627,205 +3568,113 @@
3627
3568
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3628
3569
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3629
3570
  }
3630
- [dir="ltr"] .x-suggestion {
3631
- text-align: left;
3571
+ /* @deprecated */
3572
+ :root {
3573
+ --x-size-padding-list-01: var(--x-size-base-01);
3574
+ --x-size-padding-list-02: var(--x-size-base-02);
3575
+ --x-size-padding-list-03: var(--x-size-base-03);
3576
+ --x-size-padding-list-04: var(--x-size-base-04);
3577
+ --x-size-padding-list-05: var(--x-size-base-05);
3578
+ --x-size-padding-list-06: var(--x-size-base-06);
3579
+ --x-size-padding-list-07: var(--x-size-base-07);
3580
+ --x-size-padding-list-08: var(--x-size-base-08);
3581
+ --x-size-padding-list-09: var(--x-size-base-09);
3582
+ --x-size-padding-list-10: var(--x-size-base-10);
3583
+ --x-size-padding-list-11: var(--x-size-base-11);
3584
+ --x-size-padding-list-12: var(--x-size-base-12);
3585
+ --x-size-padding-list-13: var(--x-size-base-13);
3632
3586
  }
3633
- [dir="rtl"] .x-suggestion {
3634
- text-align: right;
3587
+ :root {
3588
+ --x-string-align-items-suggestion-default: center;
3589
+ --x-color-text-suggestion-default: var(--x-color-text-default);
3590
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
3591
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
3592
+ --x-color-background-suggestion-default: transparent;
3593
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
3594
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
3595
+ --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
3596
+ --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
3597
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
3598
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
3599
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
3600
+ --x-size-padding-right-suggestion-default: 0;
3601
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
3602
+ --x-size-padding-left-suggestion-default: 0;
3603
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
3604
+ --x-size-border-width-suggestion-default: 0;
3605
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
3606
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
3607
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
3608
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
3609
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
3610
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3611
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3612
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3613
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3614
+ --x-font-family-suggestion-default: var(--x-font-family-text);
3615
+ --x-size-font-suggestion-default: var(--x-size-font-text);
3616
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
3617
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
3618
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
3619
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
3620
+ --x-size-line-height-suggestion-matching-part-default: var(
3621
+ --x-size-line-height-suggestion-default
3622
+ );
3623
+ --x-number-font-weight-suggestion-matching-part-default: var(
3624
+ --x-number-font-weight-suggestion-default
3625
+ );
3626
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
3627
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
3628
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
3629
+ --x-number-font-weight-suggestion-default-matching: var(
3630
+ --x-number-font-weight-suggestion-default
3631
+ );
3632
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
3633
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
3634
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
3635
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
3636
+ --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
3637
+ --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
3638
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
3639
+ --x-size-line-height-suggestion-matching-part-default
3640
+ );
3641
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
3642
+ --x-number-font-weight-suggestion-matching-part-default
3643
+ );
3644
+ --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
3645
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
3646
+ --x-size-line-height-suggestion-default-matching-curated: var(
3647
+ --x-size-line-height-suggestion-default-matching
3648
+ );
3649
+ --x-number-font-weight-suggestion-default-matching-curated: var(
3650
+ --x-number-font-weight-suggestion-default-matching
3651
+ );
3635
3652
  }
3636
- [dir="ltr"] .x-suggestion {
3637
- padding-left: var(--x-size-padding-left-suggestion-default);
3653
+ .x-tag--card.x-tag,
3654
+ .x-tag--card .x-tag {
3655
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3656
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3657
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3658
+ --x-size-border-radius-bottom-right-tag-default: var(
3659
+ --x-size-border-radius-bottom-right-tag-card
3660
+ );
3661
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3638
3662
  }
3639
- [dir="rtl"] .x-suggestion {
3640
- padding-right: var(--x-size-padding-left-suggestion-default);
3663
+ :root {
3664
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3665
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3666
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3667
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3668
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3641
3669
  }
3642
- [dir="ltr"] .x-suggestion {
3643
- padding-right: var(--x-size-padding-right-suggestion-default);
3670
+ [dir="ltr"] .x-tag {
3671
+ border-left-width: var(--x-size-border-width-left-tag-default);
3644
3672
  }
3645
- [dir="rtl"] .x-suggestion {
3646
- padding-left: var(--x-size-padding-right-suggestion-default);
3673
+ [dir="rtl"] .x-tag {
3674
+ border-right-width: var(--x-size-border-width-left-tag-default);
3647
3675
  }
3648
- [dir="ltr"] .x-suggestion {
3649
- border-left-width: var(--x-size-border-width-left-suggestion-default);
3650
- }
3651
- [dir="rtl"] .x-suggestion {
3652
- border-right-width: var(--x-size-border-width-left-suggestion-default);
3653
- }
3654
- [dir="ltr"] .x-suggestion {
3655
- border-right-width: var(--x-size-border-width-right-suggestion-default);
3656
- }
3657
- [dir="rtl"] .x-suggestion {
3658
- border-left-width: var(--x-size-border-width-right-suggestion-default);
3659
- }
3660
- .x-suggestion {
3661
- display: flex;
3662
- flex-flow: row nowrap;
3663
- box-sizing: border-box;
3664
- align-items: var(--x-string-align-items-suggestion-default);
3665
- background-color: var(--x-color-background-suggestion-default);
3666
- color: var(--x-color-text-suggestion-default);
3667
- border-color: var(--x-color-border-suggestion-default);
3668
- font-family: var(--x-font-family-suggestion-default);
3669
- font-size: var(--x-size-font-suggestion-default);
3670
- line-height: var(--x-size-line-height-suggestion-default);
3671
- font-weight: var(--x-number-font-weight-suggestion-default);
3672
- cursor: pointer;
3673
- padding-top: var(--x-size-padding-top-suggestion-default);
3674
- padding-bottom: var(--x-size-padding-bottom-suggestion-default);
3675
- gap: var(--x-size-gap-suggestion-default);
3676
- border-style: solid;
3677
- border-top-width: var(--x-size-border-width-top-suggestion-default);
3678
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
3679
- border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
3680
- }
3681
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
3682
- .x-suggestion {
3683
- gap: 0;
3684
- }
3685
- .x-suggestion > *:not(:last-child) {
3686
- margin-right: var(--x-size-gap-suggestion-default);
3687
- }
3688
- }
3689
- .x-suggestion__query {
3690
- flex: 1 1 auto;
3691
- }
3692
- .x-suggestion__matching-part,
3693
- .x-suggestion .x-identifier-result__matching-part {
3694
- font-family: var(--x-font-family-suggestion-matching-part-default);
3695
- font-size: var(--x-size-font-suggestion-matching-part-default);
3696
- line-height: var(--x-size-line-height-suggestion-matching-part-default);
3697
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
3698
- color: var(--x-color-text-suggestion-matching-part-default);
3699
- }
3700
- .x-suggestion--matching {
3701
- --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
3702
- --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
3703
- --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
3704
- --x-number-font-weight-suggestion-default: var(
3705
- --x-number-font-weight-suggestion-default-matching
3706
- );
3707
- --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
3708
- }
3709
- .x-suggestion > .x-identifier-result {
3710
- flex: none;
3711
- }
3712
- .x-suggestion.x-suggestion.x-suggestion--is-curated {
3713
- background-color: var(--x-color-background-suggestion-default-curated);
3714
- color: var(--x-color-text-suggestion-default-curated);
3715
- border-color: var(--x-color-border-suggestion-default-curated);
3716
- font-family: var(--x-font-family-suggestion-default-curated);
3717
- font-size: var(--x-size-font-suggestion-default-curated);
3718
- line-height: var(--x-size-line-height-suggestion-default-curated);
3719
- font-weight: var(--x-number-font-weight-suggestion-default-curated);
3720
- }
3721
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
3722
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
3723
- font-family: var(--x-font-family-suggestion-matching-part-default-curated);
3724
- font-size: var(--x-size-font-suggestion-matching-part-default-curated);
3725
- line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
3726
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
3727
- color: var(--x-color-text-suggestion-matching-part-default-curated);
3728
- }
3729
- .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
3730
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
3731
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
3732
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
3733
- --x-number-font-weight-suggestion-default-curated: var(
3734
- --x-number-font-weight-suggestion-default-matching-curated
3735
- );
3736
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
3737
- }
3738
- :root {
3739
- --x-string-align-items-suggestion-default: center;
3740
- --x-color-text-suggestion-default: var(--x-color-text-default);
3741
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
3742
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
3743
- --x-color-background-suggestion-default: transparent;
3744
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
3745
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
3746
- --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
3747
- --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
3748
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
3749
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
3750
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
3751
- --x-size-padding-right-suggestion-default: 0;
3752
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
3753
- --x-size-padding-left-suggestion-default: 0;
3754
- --x-size-gap-suggestion-default: var(--x-size-base-03);
3755
- --x-size-border-width-suggestion-default: 0;
3756
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
3757
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
3758
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
3759
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
3760
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
3761
- --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3762
- --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3763
- --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3764
- --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3765
- --x-font-family-suggestion-default: var(--x-font-family-text);
3766
- --x-size-font-suggestion-default: var(--x-size-font-text);
3767
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
3768
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
3769
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
3770
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
3771
- --x-size-line-height-suggestion-matching-part-default: var(
3772
- --x-size-line-height-suggestion-default
3773
- );
3774
- --x-number-font-weight-suggestion-matching-part-default: var(
3775
- --x-number-font-weight-suggestion-default
3776
- );
3777
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
3778
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
3779
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
3780
- --x-number-font-weight-suggestion-default-matching: var(
3781
- --x-number-font-weight-suggestion-default
3782
- );
3783
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
3784
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
3785
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
3786
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
3787
- --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
3788
- --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
3789
- --x-size-line-height-suggestion-matching-part-default-curated: var(
3790
- --x-size-line-height-suggestion-matching-part-default
3791
- );
3792
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
3793
- --x-number-font-weight-suggestion-matching-part-default
3794
- );
3795
- --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
3796
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
3797
- --x-size-line-height-suggestion-default-matching-curated: var(
3798
- --x-size-line-height-suggestion-default-matching
3799
- );
3800
- --x-number-font-weight-suggestion-default-matching-curated: var(
3801
- --x-number-font-weight-suggestion-default-matching
3802
- );
3803
- }
3804
- .x-tag--card.x-tag,
3805
- .x-tag--card .x-tag {
3806
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3807
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3808
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3809
- --x-size-border-radius-bottom-right-tag-default: var(
3810
- --x-size-border-radius-bottom-right-tag-card
3811
- );
3812
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3813
- }
3814
- :root {
3815
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3816
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3817
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3818
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3819
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3820
- }
3821
- [dir="ltr"] .x-tag {
3822
- border-left-width: var(--x-size-border-width-left-tag-default);
3823
- }
3824
- [dir="rtl"] .x-tag {
3825
- border-right-width: var(--x-size-border-width-left-tag-default);
3826
- }
3827
- [dir="ltr"] .x-tag {
3828
- border-right-width: var(--x-size-border-width-right-tag-default);
3676
+ [dir="ltr"] .x-tag {
3677
+ border-right-width: var(--x-size-border-width-right-tag-default);
3829
3678
  }
3830
3679
  [dir="rtl"] .x-tag {
3831
3680
  border-left-width: var(--x-size-border-width-right-tag-default);
@@ -4039,73 +3888,171 @@
4039
3888
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
4040
3889
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
4041
3890
  }
4042
- .x-tag--pill.x-tag,
4043
- .x-tag--pill .x-tag {
4044
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
4045
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
4046
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
4047
- --x-size-border-radius-bottom-right-tag-default: var(
4048
- --x-size-border-radius-bottom-right-tag-pill
4049
- );
4050
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
4051
- }
4052
- :root {
4053
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
4054
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
4055
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
4056
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
4057
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3891
+ [dir="ltr"] .x-suggestion {
3892
+ text-align: left;
4058
3893
  }
4059
- .x-text--accent {
4060
- --x-color-text-default: var(--x-color-text-accent);
3894
+ [dir="rtl"] .x-suggestion {
3895
+ text-align: right;
4061
3896
  }
4062
- :root {
4063
- --x-color-text-accent: var(--x-color-base-accent);
3897
+ [dir="ltr"] .x-suggestion {
3898
+ padding-left: var(--x-size-padding-left-suggestion-default);
4064
3899
  }
4065
- .x-text--bold.x-text {
4066
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3900
+ [dir="rtl"] .x-suggestion {
3901
+ padding-right: var(--x-size-padding-left-suggestion-default);
4067
3902
  }
4068
- .x-text--bold.x-title1 {
4069
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3903
+ [dir="ltr"] .x-suggestion {
3904
+ padding-right: var(--x-size-padding-right-suggestion-default);
4070
3905
  }
4071
- .x-text--bold.x-title2 {
4072
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3906
+ [dir="rtl"] .x-suggestion {
3907
+ padding-left: var(--x-size-padding-right-suggestion-default);
4073
3908
  }
4074
- .x-text--bold.x-title3 {
4075
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3909
+ [dir="ltr"] .x-suggestion {
3910
+ border-left-width: var(--x-size-border-width-left-suggestion-default);
4076
3911
  }
4077
- .x-text--bold.x-small {
4078
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3912
+ [dir="rtl"] .x-suggestion {
3913
+ border-right-width: var(--x-size-border-width-left-suggestion-default);
4079
3914
  }
4080
- .x,
4081
- .x-text {
4082
- font-family: var(--x-font-family-text);
4083
- font-size: var(--x-size-font-text);
4084
- font-weight: var(--x-number-font-weight-text);
4085
- line-height: var(--x-size-line-height-text);
4086
- -webkit-text-decoration: var(--x-string-text-decoration);
4087
- text-decoration: var(--x-string-text-decoration);
4088
- color: var(--x-color-text-default);
4089
- margin: 0;
3915
+ [dir="ltr"] .x-suggestion {
3916
+ border-right-width: var(--x-size-border-width-right-suggestion-default);
4090
3917
  }
4091
-
4092
- .x-title1 {
4093
- font-family: var(--x-font-family-title1);
4094
- font-size: var(--x-size-font-title1);
4095
- font-weight: var(--x-number-font-weight-title1);
4096
- line-height: var(--x-size-line-height-title1);
4097
- -webkit-text-decoration: var(--x-string-text-decoration-title1);
4098
- text-decoration: var(--x-string-text-decoration-title1);
4099
- color: var(--x-color-text-default);
4100
- margin: 0;
3918
+ [dir="rtl"] .x-suggestion {
3919
+ border-left-width: var(--x-size-border-width-right-suggestion-default);
4101
3920
  }
4102
-
4103
- .x-title2 {
4104
- font-family: var(--x-font-family-title2);
4105
- font-size: var(--x-size-font-title2);
4106
- font-weight: var(--x-number-font-weight-title2);
4107
- line-height: var(--x-size-line-height-title2);
4108
- -webkit-text-decoration: var(--x-string-text-decoration-title2);
3921
+ .x-suggestion {
3922
+ display: flex;
3923
+ flex-flow: row nowrap;
3924
+ box-sizing: border-box;
3925
+ align-items: var(--x-string-align-items-suggestion-default);
3926
+ background-color: var(--x-color-background-suggestion-default);
3927
+ color: var(--x-color-text-suggestion-default);
3928
+ border-color: var(--x-color-border-suggestion-default);
3929
+ font-family: var(--x-font-family-suggestion-default);
3930
+ font-size: var(--x-size-font-suggestion-default);
3931
+ line-height: var(--x-size-line-height-suggestion-default);
3932
+ font-weight: var(--x-number-font-weight-suggestion-default);
3933
+ cursor: pointer;
3934
+ padding-top: var(--x-size-padding-top-suggestion-default);
3935
+ padding-bottom: var(--x-size-padding-bottom-suggestion-default);
3936
+ gap: var(--x-size-gap-suggestion-default);
3937
+ border-style: solid;
3938
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
3939
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
3940
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
3941
+ }
3942
+ @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
3943
+ .x-suggestion {
3944
+ gap: 0;
3945
+ }
3946
+ .x-suggestion > *:not(:last-child) {
3947
+ margin-right: var(--x-size-gap-suggestion-default);
3948
+ }
3949
+ }
3950
+ .x-suggestion__query {
3951
+ flex: 1 1 auto;
3952
+ }
3953
+ .x-suggestion__matching-part,
3954
+ .x-suggestion .x-identifier-result__matching-part {
3955
+ font-family: var(--x-font-family-suggestion-matching-part-default);
3956
+ font-size: var(--x-size-font-suggestion-matching-part-default);
3957
+ line-height: var(--x-size-line-height-suggestion-matching-part-default);
3958
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
3959
+ color: var(--x-color-text-suggestion-matching-part-default);
3960
+ }
3961
+ .x-suggestion--matching {
3962
+ --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
3963
+ --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
3964
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
3965
+ --x-number-font-weight-suggestion-default: var(
3966
+ --x-number-font-weight-suggestion-default-matching
3967
+ );
3968
+ --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
3969
+ }
3970
+ .x-suggestion > .x-identifier-result {
3971
+ flex: none;
3972
+ }
3973
+ .x-suggestion.x-suggestion.x-suggestion--is-curated {
3974
+ background-color: var(--x-color-background-suggestion-default-curated);
3975
+ color: var(--x-color-text-suggestion-default-curated);
3976
+ border-color: var(--x-color-border-suggestion-default-curated);
3977
+ font-family: var(--x-font-family-suggestion-default-curated);
3978
+ font-size: var(--x-size-font-suggestion-default-curated);
3979
+ line-height: var(--x-size-line-height-suggestion-default-curated);
3980
+ font-weight: var(--x-number-font-weight-suggestion-default-curated);
3981
+ }
3982
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
3983
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
3984
+ font-family: var(--x-font-family-suggestion-matching-part-default-curated);
3985
+ font-size: var(--x-size-font-suggestion-matching-part-default-curated);
3986
+ line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
3987
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
3988
+ color: var(--x-color-text-suggestion-matching-part-default-curated);
3989
+ }
3990
+ .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
3991
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
3992
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
3993
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
3994
+ --x-number-font-weight-suggestion-default-curated: var(
3995
+ --x-number-font-weight-suggestion-default-matching-curated
3996
+ );
3997
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
3998
+ }
3999
+ :root {
4000
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
4001
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
4002
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
4003
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
4004
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
4005
+ }
4006
+ .x-text--accent {
4007
+ --x-color-text-default: var(--x-color-text-accent);
4008
+ }
4009
+ :root {
4010
+ --x-color-text-accent: var(--x-color-base-accent);
4011
+ }
4012
+ .x-text--bold.x-text {
4013
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
4014
+ }
4015
+ .x-text--bold.x-title1 {
4016
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
4017
+ }
4018
+ .x-text--bold.x-title2 {
4019
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
4020
+ }
4021
+ .x-text--bold.x-title3 {
4022
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
4023
+ }
4024
+ .x-text--bold.x-small {
4025
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
4026
+ }
4027
+ .x,
4028
+ .x-text {
4029
+ font-family: var(--x-font-family-text);
4030
+ font-size: var(--x-size-font-text);
4031
+ font-weight: var(--x-number-font-weight-text);
4032
+ line-height: var(--x-size-line-height-text);
4033
+ -webkit-text-decoration: var(--x-string-text-decoration);
4034
+ text-decoration: var(--x-string-text-decoration);
4035
+ color: var(--x-color-text-default);
4036
+ margin: 0;
4037
+ }
4038
+
4039
+ .x-title1 {
4040
+ font-family: var(--x-font-family-title1);
4041
+ font-size: var(--x-size-font-title1);
4042
+ font-weight: var(--x-number-font-weight-title1);
4043
+ line-height: var(--x-size-line-height-title1);
4044
+ -webkit-text-decoration: var(--x-string-text-decoration-title1);
4045
+ text-decoration: var(--x-string-text-decoration-title1);
4046
+ color: var(--x-color-text-default);
4047
+ margin: 0;
4048
+ }
4049
+
4050
+ .x-title2 {
4051
+ font-family: var(--x-font-family-title2);
4052
+ font-size: var(--x-size-font-title2);
4053
+ font-weight: var(--x-number-font-weight-title2);
4054
+ line-height: var(--x-size-line-height-title2);
4055
+ -webkit-text-decoration: var(--x-string-text-decoration-title2);
4109
4056
  text-decoration: var(--x-string-text-decoration-title2);
4110
4057
  color: var(--x-color-text-default);
4111
4058
  margin: 0;
@@ -5797,1708 +5744,1762 @@
5797
5744
  [dir="rtl"] .x-border-radius--bottom-right-20 {
5798
5745
  border-bottom-left-radius: var(--x-size-base-20) !important;
5799
5746
  }
5800
- *[class*=x-border-width--] {
5801
- border-width: 0;
5802
- }
5803
-
5804
- .x-border-width--00 {
5805
- border-width: 0px !important;
5806
- border-style: solid !important;
5807
- }
5808
- .x-border-width--top-00 {
5809
- border-top-width: 0px !important;
5810
- border-style: solid !important;
5811
- }
5812
- .x-border-width--bottom-00 {
5813
- border-bottom-width: 0px !important;
5814
- border-style: solid !important;
5815
- }
5816
- [dir="ltr"] .x-border-width--right-00 {
5817
- border-right-width: 0px !important;
5818
- }
5819
- [dir="rtl"] .x-border-width--right-00 {
5820
- border-left-width: 0px !important;
5747
+ .x-tag--pill.x-tag,
5748
+ .x-tag--pill .x-tag {
5749
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
5750
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
5751
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
5752
+ --x-size-border-radius-bottom-right-tag-default: var(
5753
+ --x-size-border-radius-bottom-right-tag-pill
5754
+ );
5755
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
5821
5756
  }
5822
- .x-border-width--right-00 {
5823
- border-style: solid !important;
5757
+ .x-shadow--none {
5758
+ box-shadow: none !important;
5824
5759
  }
5825
- [dir="ltr"] .x-border-width--left-00 {
5826
- border-left-width: 0px !important;
5760
+
5761
+ .x-shadow--01 {
5762
+ box-shadow: var(--x-string-box-shadow-01) !important;
5827
5763
  }
5828
- [dir="rtl"] .x-border-width--left-00 {
5829
- border-right-width: 0px !important;
5764
+ .x-shadow--bottom-01 {
5765
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
5830
5766
  }
5831
- .x-border-width--left-00 {
5832
- border-style: solid !important;
5767
+ .x-shadow--02 {
5768
+ box-shadow: var(--x-string-box-shadow-02) !important;
5833
5769
  }
5834
- .x-border-width--01 {
5835
- border-width: 1px !important;
5836
- border-style: solid !important;
5770
+ .x-shadow--bottom-02 {
5771
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
5837
5772
  }
5838
- .x-border-width--top-01 {
5839
- border-top-width: 1px !important;
5840
- border-style: solid !important;
5773
+ .x-shadow--03 {
5774
+ box-shadow: var(--x-string-box-shadow-03) !important;
5841
5775
  }
5842
- .x-border-width--bottom-01 {
5843
- border-bottom-width: 1px !important;
5844
- border-style: solid !important;
5776
+ .x-shadow--bottom-03 {
5777
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
5845
5778
  }
5846
- [dir="ltr"] .x-border-width--right-01 {
5847
- border-right-width: 1px !important;
5779
+ .x-shadow--04 {
5780
+ box-shadow: var(--x-string-box-shadow-04) !important;
5848
5781
  }
5849
- [dir="rtl"] .x-border-width--right-01 {
5850
- border-left-width: 1px !important;
5782
+ .x-shadow--bottom-04 {
5783
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
5851
5784
  }
5852
- .x-border-width--right-01 {
5853
- border-style: solid !important;
5785
+ .x-shadow--05 {
5786
+ box-shadow: var(--x-string-box-shadow-05) !important;
5854
5787
  }
5855
- [dir="ltr"] .x-border-width--left-01 {
5856
- border-left-width: 1px !important;
5788
+ .x-shadow--bottom-05 {
5789
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
5857
5790
  }
5858
- [dir="rtl"] .x-border-width--left-01 {
5859
- border-right-width: 1px !important;
5791
+ .x-shadow--06 {
5792
+ box-shadow: var(--x-string-box-shadow-06) !important;
5860
5793
  }
5861
- .x-border-width--left-01 {
5862
- border-style: solid !important;
5794
+ .x-shadow--bottom-06 {
5795
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
5863
5796
  }
5864
- .x-border-width--02 {
5865
- border-width: 2px !important;
5866
- border-style: solid !important;
5797
+ .x-shadow--07 {
5798
+ box-shadow: var(--x-string-box-shadow-07) !important;
5867
5799
  }
5868
- .x-border-width--top-02 {
5869
- border-top-width: 2px !important;
5870
- border-style: solid !important;
5800
+ .x-shadow--bottom-07 {
5801
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
5871
5802
  }
5872
- .x-border-width--bottom-02 {
5873
- border-bottom-width: 2px !important;
5874
- border-style: solid !important;
5803
+ .x-shadow--08 {
5804
+ box-shadow: var(--x-string-box-shadow-08) !important;
5875
5805
  }
5876
- [dir="ltr"] .x-border-width--right-02 {
5877
- border-right-width: 2px !important;
5806
+ .x-shadow--bottom-08 {
5807
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
5878
5808
  }
5879
- [dir="rtl"] .x-border-width--right-02 {
5880
- border-left-width: 2px !important;
5809
+ .x-shadow--09 {
5810
+ box-shadow: var(--x-string-box-shadow-09) !important;
5881
5811
  }
5882
- .x-border-width--right-02 {
5883
- border-style: solid !important;
5812
+ .x-shadow--bottom-09 {
5813
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
5884
5814
  }
5885
- [dir="ltr"] .x-border-width--left-02 {
5886
- border-left-width: 2px !important;
5815
+ .x-shadow--10 {
5816
+ box-shadow: var(--x-string-box-shadow-10) !important;
5887
5817
  }
5888
- [dir="rtl"] .x-border-width--left-02 {
5889
- border-right-width: 2px !important;
5818
+ .x-shadow--bottom-10 {
5819
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
5890
5820
  }
5891
- .x-border-width--left-02 {
5892
- border-style: solid !important;
5821
+ /* Material Elevations extracted from:
5822
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
5823
+ */
5824
+ :root {
5825
+ /* Shadow none */
5826
+ --x-string-box-shadow-00: none;
5827
+ /* Shadow 1dp */
5828
+ --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
5829
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
5830
+ /* Shadow 2dp */
5831
+ --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
5832
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
5833
+ /* Shadow 3dp */
5834
+ --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
5835
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
5836
+ /* Shadow 4dp */
5837
+ --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
5838
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
5839
+ /* Shadow 6dp */
5840
+ --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
5841
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
5842
+ /* Shadow 8dp */
5843
+ --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
5844
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
5845
+ /* Shadow 9dp */
5846
+ --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
5847
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
5848
+ /* Shadow 12dp */
5849
+ --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
5850
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
5851
+ /* Shadow 16dp */
5852
+ --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
5853
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
5854
+ /* Shadow 24dp */
5855
+ --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
5856
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
5857
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
5858
+ /* Shadow 1dp */
5859
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
5860
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
5861
+ /* Shadow 2dp */
5862
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
5863
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
5864
+ /* Shadow 3dp */
5865
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
5866
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
5867
+ /* Shadow 4dp */
5868
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
5869
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
5870
+ /* Shadow 6dp */
5871
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
5872
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
5873
+ /* Shadow 8dp */
5874
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
5875
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
5876
+ /* Shadow 9dp */
5877
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
5878
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
5879
+ /* Shadow 12dp */
5880
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
5881
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
5882
+ /* Shadow 16dp */
5883
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
5884
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
5885
+ /* Shadow 24dp */
5886
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
5887
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
5893
5888
  }
5894
- .x-border-width--03 {
5895
- border-width: 3px !important;
5896
- border-style: solid !important;
5889
+ .dev-mode .slot-helper {
5890
+ font-family: inherit;
5891
+ color: grey;
5892
+ box-sizing: border-box;
5893
+ display: flex;
5894
+ height: 100%;
5895
+ width: 100%;
5896
+ justify-content: center;
5897
+ align-items: center;
5898
+ border: dashed 1px grey;
5899
+ border-radius: 10px;
5897
5900
  }
5898
- .x-border-width--top-03 {
5899
- border-top-width: 3px !important;
5900
- border-style: solid !important;
5901
+ .x-fill--lead {
5902
+ fill: var(--x-color-base-lead) !important;
5901
5903
  }
5902
- .x-border-width--bottom-03 {
5903
- border-bottom-width: 3px !important;
5904
- border-style: solid !important;
5904
+
5905
+ .x-fill--auxiliary {
5906
+ fill: var(--x-color-base-auxiliary) !important;
5905
5907
  }
5906
- [dir="ltr"] .x-border-width--right-03 {
5907
- border-right-width: 3px !important;
5908
+
5909
+ .x-fill--neutral-10 {
5910
+ fill: var(--x-color-base-neutral-10) !important;
5908
5911
  }
5909
- [dir="rtl"] .x-border-width--right-03 {
5910
- border-left-width: 3px !important;
5912
+
5913
+ .x-fill--neutral-35 {
5914
+ fill: var(--x-color-base-neutral-35) !important;
5911
5915
  }
5912
- .x-border-width--right-03 {
5913
- border-style: solid !important;
5916
+
5917
+ .x-fill--neutral-70 {
5918
+ fill: var(--x-color-base-neutral-70) !important;
5914
5919
  }
5915
- [dir="ltr"] .x-border-width--left-03 {
5916
- border-left-width: 3px !important;
5920
+
5921
+ .x-fill--neutral-95 {
5922
+ fill: var(--x-color-base-neutral-95) !important;
5917
5923
  }
5918
- [dir="rtl"] .x-border-width--left-03 {
5919
- border-right-width: 3px !important;
5924
+
5925
+ .x-fill--neutral-100 {
5926
+ fill: var(--x-color-base-neutral-100) !important;
5920
5927
  }
5921
- .x-border-width--left-03 {
5922
- border-style: solid !important;
5928
+
5929
+ .x-fill--accent {
5930
+ fill: var(--x-color-base-accent) !important;
5923
5931
  }
5924
- .x-border-width--04 {
5925
- border-width: 4px !important;
5926
- border-style: solid !important;
5932
+
5933
+ .x-fill--enable {
5934
+ fill: var(--x-color-base-enable) !important;
5927
5935
  }
5928
- .x-border-width--top-04 {
5929
- border-top-width: 4px !important;
5930
- border-style: solid !important;
5936
+
5937
+ .x-fill--disable {
5938
+ fill: var(--x-color-base-disable) !important;
5931
5939
  }
5932
- .x-border-width--bottom-04 {
5933
- border-bottom-width: 4px !important;
5934
- border-style: solid !important;
5940
+
5941
+ .x-fill--transparent {
5942
+ fill: var(--x-color-base-transparent) !important;
5935
5943
  }
5936
- [dir="ltr"] .x-border-width--right-04 {
5937
- border-right-width: 4px !important;
5944
+ .x-flex-1 {
5945
+ flex: 1 1 0% !important;
5938
5946
  }
5939
- [dir="rtl"] .x-border-width--right-04 {
5940
- border-left-width: 4px !important;
5947
+
5948
+ .x-flex-auto {
5949
+ flex: 1 1 auto !important;
5941
5950
  }
5942
- .x-border-width--right-04 {
5943
- border-style: solid !important;
5951
+
5952
+ .x-flex-initial {
5953
+ flex: 0 1 auto !important;
5944
5954
  }
5945
- [dir="ltr"] .x-border-width--left-04 {
5946
- border-left-width: 4px !important;
5955
+
5956
+ .x-flex-no-shrink {
5957
+ flex: 1 0 auto !important;
5947
5958
  }
5948
- [dir="rtl"] .x-border-width--left-04 {
5949
- border-right-width: 4px !important;
5959
+
5960
+ .x-flex-none {
5961
+ flex: none !important;
5950
5962
  }
5951
- .x-border-width--left-04 {
5952
- border-style: solid !important;
5963
+
5964
+ .x-self-auto {
5965
+ align-self: auto !important;
5953
5966
  }
5954
- .x-border-width--05 {
5955
- border-width: 5px !important;
5956
- border-style: solid !important;
5967
+
5968
+ .x-self-start {
5969
+ align-self: flex-start !important;
5957
5970
  }
5958
- .x-border-width--top-05 {
5959
- border-top-width: 5px !important;
5960
- border-style: solid !important;
5971
+
5972
+ .x-self-end {
5973
+ align-self: flex-end !important;
5961
5974
  }
5962
- .x-border-width--bottom-05 {
5963
- border-bottom-width: 5px !important;
5964
- border-style: solid !important;
5975
+
5976
+ .x-self-center {
5977
+ align-self: center !important;
5965
5978
  }
5966
- [dir="ltr"] .x-border-width--right-05 {
5967
- border-right-width: 5px !important;
5979
+
5980
+ .x-self-stretch {
5981
+ align-self: stretch !important;
5968
5982
  }
5969
- [dir="rtl"] .x-border-width--right-05 {
5970
- border-left-width: 5px !important;
5983
+
5984
+ .x-self-baseline {
5985
+ align-self: baseline !important;
5971
5986
  }
5972
- .x-border-width--right-05 {
5973
- border-style: solid !important;
5987
+ .x-font-color--lead {
5988
+ color: var(--x-color-base-lead) !important;
5974
5989
  }
5975
- [dir="ltr"] .x-border-width--left-05 {
5976
- border-left-width: 5px !important;
5990
+
5991
+ .x-font-color--auxiliary {
5992
+ color: var(--x-color-base-auxiliary) !important;
5977
5993
  }
5978
- [dir="rtl"] .x-border-width--left-05 {
5979
- border-right-width: 5px !important;
5994
+
5995
+ .x-font-color--neutral-10 {
5996
+ color: var(--x-color-base-neutral-10) !important;
5980
5997
  }
5981
- .x-border-width--left-05 {
5982
- border-style: solid !important;
5998
+
5999
+ .x-font-color--neutral-35 {
6000
+ color: var(--x-color-base-neutral-35) !important;
5983
6001
  }
5984
- .x-border-width--06 {
5985
- border-width: 6px !important;
5986
- border-style: solid !important;
6002
+
6003
+ .x-font-color--neutral-70 {
6004
+ color: var(--x-color-base-neutral-70) !important;
5987
6005
  }
5988
- .x-border-width--top-06 {
5989
- border-top-width: 6px !important;
5990
- border-style: solid !important;
6006
+
6007
+ .x-font-color--neutral-95 {
6008
+ color: var(--x-color-base-neutral-95) !important;
5991
6009
  }
5992
- .x-border-width--bottom-06 {
5993
- border-bottom-width: 6px !important;
5994
- border-style: solid !important;
6010
+
6011
+ .x-font-color--neutral-100 {
6012
+ color: var(--x-color-base-neutral-100) !important;
5995
6013
  }
5996
- [dir="ltr"] .x-border-width--right-06 {
5997
- border-right-width: 6px !important;
6014
+
6015
+ .x-font-color--accent {
6016
+ color: var(--x-color-base-accent) !important;
5998
6017
  }
5999
- [dir="rtl"] .x-border-width--right-06 {
6000
- border-left-width: 6px !important;
6018
+
6019
+ .x-font-color--enable {
6020
+ color: var(--x-color-base-enable) !important;
6001
6021
  }
6002
- .x-border-width--right-06 {
6003
- border-style: solid !important;
6022
+
6023
+ .x-font-color--disable {
6024
+ color: var(--x-color-base-disable) !important;
6004
6025
  }
6005
- [dir="ltr"] .x-border-width--left-06 {
6006
- border-left-width: 6px !important;
6026
+
6027
+ .x-font-color--transparent {
6028
+ color: var(--x-color-base-transparent) !important;
6029
+ }
6030
+ .x-font-size--01 {
6031
+ font-size: var(--x-size-base-01) !important;
6032
+ line-height: 1.5;
6033
+ }
6034
+ .x-font-size--02 {
6035
+ font-size: var(--x-size-base-02) !important;
6036
+ line-height: 1.5;
6037
+ }
6038
+ .x-font-size--03 {
6039
+ font-size: var(--x-size-base-03) !important;
6040
+ line-height: 1.5;
6041
+ }
6042
+ .x-font-size--04 {
6043
+ font-size: var(--x-size-base-04) !important;
6044
+ line-height: 1.5;
6045
+ }
6046
+ .x-font-size--05 {
6047
+ font-size: var(--x-size-base-05) !important;
6048
+ line-height: 1.5;
6049
+ }
6050
+ .x-font-size--06 {
6051
+ font-size: var(--x-size-base-06) !important;
6052
+ line-height: 1.5;
6053
+ }
6054
+ .x-font-size--07 {
6055
+ font-size: var(--x-size-base-07) !important;
6056
+ line-height: 1.5;
6057
+ }
6058
+ .x-font-size--08 {
6059
+ font-size: var(--x-size-base-08) !important;
6060
+ line-height: 1.5;
6061
+ }
6062
+ .x-font-size--09 {
6063
+ font-size: var(--x-size-base-09) !important;
6064
+ line-height: 1.5;
6065
+ }
6066
+ .x-font-size--10 {
6067
+ font-size: var(--x-size-base-10) !important;
6068
+ line-height: 1.5;
6007
6069
  }
6008
- [dir="rtl"] .x-border-width--left-06 {
6009
- border-right-width: 6px !important;
6070
+ .x-font-size--11 {
6071
+ font-size: var(--x-size-base-11) !important;
6072
+ line-height: 1.5;
6010
6073
  }
6011
- .x-border-width--left-06 {
6012
- border-style: solid !important;
6074
+ .x-font-size--12 {
6075
+ font-size: var(--x-size-base-12) !important;
6076
+ line-height: 1.5;
6013
6077
  }
6014
- .x-border-width--07 {
6015
- border-width: 7px !important;
6016
- border-style: solid !important;
6078
+ .x-font-size--13 {
6079
+ font-size: var(--x-size-base-13) !important;
6080
+ line-height: 1.5;
6017
6081
  }
6018
- .x-border-width--top-07 {
6019
- border-top-width: 7px !important;
6020
- border-style: solid !important;
6082
+ .x-font-size--14 {
6083
+ font-size: var(--x-size-base-14) !important;
6084
+ line-height: 1.5;
6021
6085
  }
6022
- .x-border-width--bottom-07 {
6023
- border-bottom-width: 7px !important;
6024
- border-style: solid !important;
6086
+ .x-font-size--15 {
6087
+ font-size: var(--x-size-base-15) !important;
6088
+ line-height: 1.5;
6025
6089
  }
6026
- [dir="ltr"] .x-border-width--right-07 {
6027
- border-right-width: 7px !important;
6090
+ .x-font-size--16 {
6091
+ font-size: var(--x-size-base-16) !important;
6092
+ line-height: 1.5;
6028
6093
  }
6029
- [dir="rtl"] .x-border-width--right-07 {
6030
- border-left-width: 7px !important;
6094
+ .x-font-size--17 {
6095
+ font-size: var(--x-size-base-17) !important;
6096
+ line-height: 1.5;
6031
6097
  }
6032
- .x-border-width--right-07 {
6033
- border-style: solid !important;
6098
+ .x-font-size--18 {
6099
+ font-size: var(--x-size-base-18) !important;
6100
+ line-height: 1.5;
6034
6101
  }
6035
- [dir="ltr"] .x-border-width--left-07 {
6036
- border-left-width: 7px !important;
6102
+ .x-font-size--19 {
6103
+ font-size: var(--x-size-base-19) !important;
6104
+ line-height: 1.5;
6037
6105
  }
6038
- [dir="rtl"] .x-border-width--left-07 {
6039
- border-right-width: 7px !important;
6106
+ .x-font-size--20 {
6107
+ font-size: var(--x-size-base-20) !important;
6108
+ line-height: 1.5;
6040
6109
  }
6041
- .x-border-width--left-07 {
6042
- border-style: solid !important;
6110
+ /* @deprecated */
6111
+ .x-row--padding-02 {
6112
+ --x-size-padding-row: var(--x-size-padding-row-02);
6043
6113
  }
6044
- .x-border-width--08 {
6045
- border-width: 8px !important;
6046
- border-style: solid !important;
6114
+
6115
+ .x-row--padding-03 {
6116
+ --x-size-padding-row: var(--x-size-padding-row-03);
6047
6117
  }
6048
- .x-border-width--top-08 {
6049
- border-top-width: 8px !important;
6050
- border-style: solid !important;
6118
+
6119
+ .x-row--padding-04 {
6120
+ --x-size-padding-row: var(--x-size-padding-row-04);
6051
6121
  }
6052
- .x-border-width--bottom-08 {
6053
- border-bottom-width: 8px !important;
6054
- border-style: solid !important;
6122
+
6123
+ .x-row--padding-05 {
6124
+ --x-size-padding-row: var(--x-size-padding-row-05);
6055
6125
  }
6056
- [dir="ltr"] .x-border-width--right-08 {
6057
- border-right-width: 8px !important;
6126
+
6127
+ .x-row--padding-06 {
6128
+ --x-size-padding-row: var(--x-size-padding-row-06);
6058
6129
  }
6059
- [dir="rtl"] .x-border-width--right-08 {
6060
- border-left-width: 8px !important;
6130
+ .x-line-clamp--2 {
6131
+ overflow: hidden !important;
6132
+ display: -webkit-box !important;
6133
+ -webkit-box-orient: vertical !important;
6134
+ -webkit-line-clamp: 2 !important;
6061
6135
  }
6062
- .x-border-width--right-08 {
6063
- border-style: solid !important;
6136
+
6137
+ .x-line-clamp--3 {
6138
+ overflow: hidden !important;
6139
+ display: -webkit-box !important;
6140
+ -webkit-box-orient: vertical !important;
6141
+ -webkit-line-clamp: 3 !important;
6064
6142
  }
6065
- [dir="ltr"] .x-border-width--left-08 {
6066
- border-left-width: 8px !important;
6143
+
6144
+ .x-line-clamp--4 {
6145
+ overflow: hidden !important;
6146
+ display: -webkit-box !important;
6147
+ -webkit-box-orient: vertical !important;
6148
+ -webkit-line-clamp: 4 !important;
6067
6149
  }
6068
- [dir="rtl"] .x-border-width--left-08 {
6069
- border-right-width: 8px !important;
6150
+
6151
+ .x-line-clamp--5 {
6152
+ overflow: hidden !important;
6153
+ display: -webkit-box !important;
6154
+ -webkit-box-orient: vertical !important;
6155
+ -webkit-line-clamp: 5 !important;
6070
6156
  }
6071
- .x-border-width--left-08 {
6072
- border-style: solid !important;
6157
+
6158
+ .x-line-clamp--6 {
6159
+ overflow: hidden !important;
6160
+ display: -webkit-box !important;
6161
+ -webkit-box-orient: vertical !important;
6162
+ -webkit-line-clamp: 6 !important;
6073
6163
  }
6074
- .x-border-width--09 {
6075
- border-width: 9px !important;
6076
- border-style: solid !important;
6164
+ .x-line-height--none {
6165
+ line-height: 1 !important;
6077
6166
  }
6078
- .x-border-width--top-09 {
6079
- border-top-width: 9px !important;
6080
- border-style: solid !important;
6167
+
6168
+ .x-line-height--tight {
6169
+ line-height: 1.25 !important;
6081
6170
  }
6082
- .x-border-width--bottom-09 {
6083
- border-bottom-width: 9px !important;
6084
- border-style: solid !important;
6171
+
6172
+ .x-line-height--snug {
6173
+ line-height: 1.375 !important;
6085
6174
  }
6086
- [dir="ltr"] .x-border-width--right-09 {
6087
- border-right-width: 9px !important;
6175
+
6176
+ .x-line-height--normal {
6177
+ line-height: 1.5 !important;
6088
6178
  }
6089
- [dir="rtl"] .x-border-width--right-09 {
6090
- border-left-width: 9px !important;
6179
+
6180
+ .x-line-height--relaxed {
6181
+ line-height: 1.625 !important;
6091
6182
  }
6092
- .x-border-width--right-09 {
6093
- border-style: solid !important;
6183
+
6184
+ .x-line-height--loose {
6185
+ line-height: 2 !important;
6094
6186
  }
6095
- [dir="ltr"] .x-border-width--left-09 {
6096
- border-left-width: 9px !important;
6187
+ .x-margin--auto {
6188
+ margin: auto !important;
6097
6189
  }
6098
- [dir="rtl"] .x-border-width--left-09 {
6099
- border-right-width: 9px !important;
6190
+ .x-margin--00 {
6191
+ margin: 0 !important;
6100
6192
  }
6101
- .x-border-width--left-09 {
6102
- border-style: solid !important;
6193
+ .x-margin--01 {
6194
+ margin: var(--x-size-base-01) !important;
6103
6195
  }
6104
- .x-border-width--10 {
6105
- border-width: 10px !important;
6106
- border-style: solid !important;
6196
+ .x-margin--02 {
6197
+ margin: var(--x-size-base-02) !important;
6107
6198
  }
6108
- .x-border-width--top-10 {
6109
- border-top-width: 10px !important;
6110
- border-style: solid !important;
6199
+ .x-margin--03 {
6200
+ margin: var(--x-size-base-03) !important;
6111
6201
  }
6112
- .x-border-width--bottom-10 {
6113
- border-bottom-width: 10px !important;
6114
- border-style: solid !important;
6202
+ .x-margin--04 {
6203
+ margin: var(--x-size-base-04) !important;
6115
6204
  }
6116
- [dir="ltr"] .x-border-width--right-10 {
6117
- border-right-width: 10px !important;
6205
+ .x-margin--05 {
6206
+ margin: var(--x-size-base-05) !important;
6118
6207
  }
6119
- [dir="rtl"] .x-border-width--right-10 {
6120
- border-left-width: 10px !important;
6208
+ .x-margin--06 {
6209
+ margin: var(--x-size-base-06) !important;
6121
6210
  }
6122
- .x-border-width--right-10 {
6123
- border-style: solid !important;
6211
+ .x-margin--07 {
6212
+ margin: var(--x-size-base-07) !important;
6124
6213
  }
6125
- [dir="ltr"] .x-border-width--left-10 {
6126
- border-left-width: 10px !important;
6214
+ .x-margin--08 {
6215
+ margin: var(--x-size-base-08) !important;
6127
6216
  }
6128
- [dir="rtl"] .x-border-width--left-10 {
6129
- border-right-width: 10px !important;
6217
+ .x-margin--09 {
6218
+ margin: var(--x-size-base-09) !important;
6130
6219
  }
6131
- .x-border-width--left-10 {
6132
- border-style: solid !important;
6220
+ .x-margin--10 {
6221
+ margin: var(--x-size-base-10) !important;
6133
6222
  }
6134
- .x-shadow--none {
6135
- box-shadow: none !important;
6223
+ .x-margin--11 {
6224
+ margin: var(--x-size-base-11) !important;
6136
6225
  }
6137
-
6138
- .x-shadow--01 {
6139
- box-shadow: var(--x-string-box-shadow-01) !important;
6226
+ .x-margin--12 {
6227
+ margin: var(--x-size-base-12) !important;
6140
6228
  }
6141
- .x-shadow--bottom-01 {
6142
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
6229
+ .x-margin--13 {
6230
+ margin: var(--x-size-base-13) !important;
6143
6231
  }
6144
- .x-shadow--02 {
6145
- box-shadow: var(--x-string-box-shadow-02) !important;
6232
+ .x-margin--14 {
6233
+ margin: var(--x-size-base-14) !important;
6146
6234
  }
6147
- .x-shadow--bottom-02 {
6148
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
6235
+ .x-margin--15 {
6236
+ margin: var(--x-size-base-15) !important;
6149
6237
  }
6150
- .x-shadow--03 {
6151
- box-shadow: var(--x-string-box-shadow-03) !important;
6238
+ .x-margin--16 {
6239
+ margin: var(--x-size-base-16) !important;
6152
6240
  }
6153
- .x-shadow--bottom-03 {
6154
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
6241
+ .x-margin--17 {
6242
+ margin: var(--x-size-base-17) !important;
6155
6243
  }
6156
- .x-shadow--04 {
6157
- box-shadow: var(--x-string-box-shadow-04) !important;
6244
+ .x-margin--18 {
6245
+ margin: var(--x-size-base-18) !important;
6158
6246
  }
6159
- .x-shadow--bottom-04 {
6160
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
6247
+ .x-margin--19 {
6248
+ margin: var(--x-size-base-19) !important;
6161
6249
  }
6162
- .x-shadow--05 {
6163
- box-shadow: var(--x-string-box-shadow-05) !important;
6250
+ .x-margin--20 {
6251
+ margin: var(--x-size-base-20) !important;
6164
6252
  }
6165
- .x-shadow--bottom-05 {
6166
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
6253
+ .x-margin--top-auto {
6254
+ margin-top: auto !important;
6167
6255
  }
6168
- .x-shadow--06 {
6169
- box-shadow: var(--x-string-box-shadow-06) !important;
6256
+ .x-margin--bottom-auto {
6257
+ margin-bottom: auto !important;
6170
6258
  }
6171
- .x-shadow--bottom-06 {
6172
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
6259
+ [dir="ltr"] .x-margin--right-auto {
6260
+ margin-right: auto !important;
6173
6261
  }
6174
- .x-shadow--07 {
6175
- box-shadow: var(--x-string-box-shadow-07) !important;
6262
+ [dir="rtl"] .x-margin--right-auto {
6263
+ margin-left: auto !important;
6176
6264
  }
6177
- .x-shadow--bottom-07 {
6178
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
6265
+ [dir="ltr"] .x-margin--left-auto {
6266
+ margin-left: auto !important;
6179
6267
  }
6180
- .x-shadow--08 {
6181
- box-shadow: var(--x-string-box-shadow-08) !important;
6268
+ [dir="rtl"] .x-margin--left-auto {
6269
+ margin-right: auto !important;
6182
6270
  }
6183
- .x-shadow--bottom-08 {
6184
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
6271
+ .x-margin--top-00 {
6272
+ margin-top: 0 !important;
6185
6273
  }
6186
- .x-shadow--09 {
6187
- box-shadow: var(--x-string-box-shadow-09) !important;
6274
+ .x-margin--bottom-00 {
6275
+ margin-bottom: 0 !important;
6188
6276
  }
6189
- .x-shadow--bottom-09 {
6190
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
6277
+ [dir="ltr"] .x-margin--right-00 {
6278
+ margin-right: 0 !important;
6191
6279
  }
6192
- .x-shadow--10 {
6193
- box-shadow: var(--x-string-box-shadow-10) !important;
6280
+ [dir="rtl"] .x-margin--right-00 {
6281
+ margin-left: 0 !important;
6194
6282
  }
6195
- .x-shadow--bottom-10 {
6196
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
6283
+ [dir="ltr"] .x-margin--left-00 {
6284
+ margin-left: 0 !important;
6197
6285
  }
6198
- /* Material Elevations extracted from:
6199
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
6200
- */
6201
- :root {
6202
- /* Shadow none */
6203
- --x-string-box-shadow-00: none;
6204
- /* Shadow 1dp */
6205
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
6206
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
6207
- /* Shadow 2dp */
6208
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
6209
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
6210
- /* Shadow 3dp */
6211
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
6212
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
6213
- /* Shadow 4dp */
6214
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
6215
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
6216
- /* Shadow 6dp */
6217
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
6218
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
6219
- /* Shadow 8dp */
6220
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
6221
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
6222
- /* Shadow 9dp */
6223
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
6224
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
6225
- /* Shadow 12dp */
6226
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
6227
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
6228
- /* Shadow 16dp */
6229
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
6230
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
6231
- /* Shadow 24dp */
6232
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
6233
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
6234
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
6235
- /* Shadow 1dp */
6236
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
6237
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
6238
- /* Shadow 2dp */
6239
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
6240
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
6241
- /* Shadow 3dp */
6242
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
6243
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
6244
- /* Shadow 4dp */
6245
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
6246
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
6247
- /* Shadow 6dp */
6248
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
6249
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
6250
- /* Shadow 8dp */
6251
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
6252
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
6253
- /* Shadow 9dp */
6254
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
6255
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
6256
- /* Shadow 12dp */
6257
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
6258
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
6259
- /* Shadow 16dp */
6260
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
6261
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
6262
- /* Shadow 24dp */
6263
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
6264
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
6286
+ [dir="rtl"] .x-margin--left-00 {
6287
+ margin-right: 0 !important;
6265
6288
  }
6266
- .dev-mode .slot-helper {
6267
- font-family: inherit;
6268
- color: grey;
6269
- box-sizing: border-box;
6270
- display: flex;
6271
- height: 100%;
6272
- width: 100%;
6273
- justify-content: center;
6274
- align-items: center;
6275
- border: dashed 1px grey;
6276
- border-radius: 10px;
6289
+ .x-margin--top-01 {
6290
+ margin-top: var(--x-size-base-01) !important;
6277
6291
  }
6278
- .x-fill--lead {
6279
- fill: var(--x-color-base-lead) !important;
6292
+ .x-margin--bottom-01 {
6293
+ margin-bottom: var(--x-size-base-01) !important;
6280
6294
  }
6281
-
6282
- .x-fill--auxiliary {
6283
- fill: var(--x-color-base-auxiliary) !important;
6295
+ [dir="ltr"] .x-margin--right-01 {
6296
+ margin-right: var(--x-size-base-01) !important;
6284
6297
  }
6285
-
6286
- .x-fill--neutral-10 {
6287
- fill: var(--x-color-base-neutral-10) !important;
6298
+ [dir="rtl"] .x-margin--right-01 {
6299
+ margin-left: var(--x-size-base-01) !important;
6288
6300
  }
6289
-
6290
- .x-fill--neutral-35 {
6291
- fill: var(--x-color-base-neutral-35) !important;
6301
+ [dir="ltr"] .x-margin--left-01 {
6302
+ margin-left: var(--x-size-base-01) !important;
6292
6303
  }
6293
-
6294
- .x-fill--neutral-70 {
6295
- fill: var(--x-color-base-neutral-70) !important;
6304
+ [dir="rtl"] .x-margin--left-01 {
6305
+ margin-right: var(--x-size-base-01) !important;
6296
6306
  }
6297
-
6298
- .x-fill--neutral-95 {
6299
- fill: var(--x-color-base-neutral-95) !important;
6307
+ .x-margin--top-02 {
6308
+ margin-top: var(--x-size-base-02) !important;
6300
6309
  }
6301
-
6302
- .x-fill--neutral-100 {
6303
- fill: var(--x-color-base-neutral-100) !important;
6310
+ .x-margin--bottom-02 {
6311
+ margin-bottom: var(--x-size-base-02) !important;
6304
6312
  }
6305
-
6306
- .x-fill--accent {
6307
- fill: var(--x-color-base-accent) !important;
6313
+ [dir="ltr"] .x-margin--right-02 {
6314
+ margin-right: var(--x-size-base-02) !important;
6308
6315
  }
6309
-
6310
- .x-fill--enable {
6311
- fill: var(--x-color-base-enable) !important;
6316
+ [dir="rtl"] .x-margin--right-02 {
6317
+ margin-left: var(--x-size-base-02) !important;
6312
6318
  }
6313
-
6314
- .x-fill--disable {
6315
- fill: var(--x-color-base-disable) !important;
6319
+ [dir="ltr"] .x-margin--left-02 {
6320
+ margin-left: var(--x-size-base-02) !important;
6316
6321
  }
6317
-
6318
- .x-fill--transparent {
6319
- fill: var(--x-color-base-transparent) !important;
6322
+ [dir="rtl"] .x-margin--left-02 {
6323
+ margin-right: var(--x-size-base-02) !important;
6320
6324
  }
6321
- .x-flex-1 {
6322
- flex: 1 1 0% !important;
6325
+ .x-margin--top-03 {
6326
+ margin-top: var(--x-size-base-03) !important;
6323
6327
  }
6324
-
6325
- .x-flex-auto {
6326
- flex: 1 1 auto !important;
6328
+ .x-margin--bottom-03 {
6329
+ margin-bottom: var(--x-size-base-03) !important;
6327
6330
  }
6328
-
6329
- .x-flex-initial {
6330
- flex: 0 1 auto !important;
6331
+ [dir="ltr"] .x-margin--right-03 {
6332
+ margin-right: var(--x-size-base-03) !important;
6331
6333
  }
6332
-
6333
- .x-flex-no-shrink {
6334
- flex: 1 0 auto !important;
6334
+ [dir="rtl"] .x-margin--right-03 {
6335
+ margin-left: var(--x-size-base-03) !important;
6335
6336
  }
6336
-
6337
- .x-flex-none {
6338
- flex: none !important;
6337
+ [dir="ltr"] .x-margin--left-03 {
6338
+ margin-left: var(--x-size-base-03) !important;
6339
6339
  }
6340
-
6341
- .x-self-auto {
6342
- align-self: auto !important;
6340
+ [dir="rtl"] .x-margin--left-03 {
6341
+ margin-right: var(--x-size-base-03) !important;
6343
6342
  }
6344
-
6345
- .x-self-start {
6346
- align-self: flex-start !important;
6343
+ .x-margin--top-04 {
6344
+ margin-top: var(--x-size-base-04) !important;
6347
6345
  }
6348
-
6349
- .x-self-end {
6350
- align-self: flex-end !important;
6346
+ .x-margin--bottom-04 {
6347
+ margin-bottom: var(--x-size-base-04) !important;
6351
6348
  }
6352
-
6353
- .x-self-center {
6354
- align-self: center !important;
6349
+ [dir="ltr"] .x-margin--right-04 {
6350
+ margin-right: var(--x-size-base-04) !important;
6355
6351
  }
6356
-
6357
- .x-self-stretch {
6358
- align-self: stretch !important;
6352
+ [dir="rtl"] .x-margin--right-04 {
6353
+ margin-left: var(--x-size-base-04) !important;
6359
6354
  }
6360
-
6361
- .x-self-baseline {
6362
- align-self: baseline !important;
6355
+ [dir="ltr"] .x-margin--left-04 {
6356
+ margin-left: var(--x-size-base-04) !important;
6363
6357
  }
6364
- .x-font-color--lead {
6365
- color: var(--x-color-base-lead) !important;
6358
+ [dir="rtl"] .x-margin--left-04 {
6359
+ margin-right: var(--x-size-base-04) !important;
6366
6360
  }
6367
-
6368
- .x-font-color--auxiliary {
6369
- color: var(--x-color-base-auxiliary) !important;
6361
+ .x-margin--top-05 {
6362
+ margin-top: var(--x-size-base-05) !important;
6370
6363
  }
6371
-
6372
- .x-font-color--neutral-10 {
6373
- color: var(--x-color-base-neutral-10) !important;
6364
+ .x-margin--bottom-05 {
6365
+ margin-bottom: var(--x-size-base-05) !important;
6374
6366
  }
6375
-
6376
- .x-font-color--neutral-35 {
6377
- color: var(--x-color-base-neutral-35) !important;
6367
+ [dir="ltr"] .x-margin--right-05 {
6368
+ margin-right: var(--x-size-base-05) !important;
6378
6369
  }
6379
-
6380
- .x-font-color--neutral-70 {
6381
- color: var(--x-color-base-neutral-70) !important;
6370
+ [dir="rtl"] .x-margin--right-05 {
6371
+ margin-left: var(--x-size-base-05) !important;
6382
6372
  }
6383
-
6384
- .x-font-color--neutral-95 {
6385
- color: var(--x-color-base-neutral-95) !important;
6373
+ [dir="ltr"] .x-margin--left-05 {
6374
+ margin-left: var(--x-size-base-05) !important;
6386
6375
  }
6387
-
6388
- .x-font-color--neutral-100 {
6389
- color: var(--x-color-base-neutral-100) !important;
6376
+ [dir="rtl"] .x-margin--left-05 {
6377
+ margin-right: var(--x-size-base-05) !important;
6390
6378
  }
6391
-
6392
- .x-font-color--accent {
6393
- color: var(--x-color-base-accent) !important;
6379
+ .x-margin--top-06 {
6380
+ margin-top: var(--x-size-base-06) !important;
6394
6381
  }
6395
-
6396
- .x-font-color--enable {
6397
- color: var(--x-color-base-enable) !important;
6382
+ .x-margin--bottom-06 {
6383
+ margin-bottom: var(--x-size-base-06) !important;
6398
6384
  }
6399
-
6400
- .x-font-color--disable {
6401
- color: var(--x-color-base-disable) !important;
6385
+ [dir="ltr"] .x-margin--right-06 {
6386
+ margin-right: var(--x-size-base-06) !important;
6402
6387
  }
6403
-
6404
- .x-font-color--transparent {
6405
- color: var(--x-color-base-transparent) !important;
6388
+ [dir="rtl"] .x-margin--right-06 {
6389
+ margin-left: var(--x-size-base-06) !important;
6406
6390
  }
6407
- .x-font-size--01 {
6408
- font-size: var(--x-size-base-01) !important;
6409
- line-height: 1.5;
6391
+ [dir="ltr"] .x-margin--left-06 {
6392
+ margin-left: var(--x-size-base-06) !important;
6410
6393
  }
6411
- .x-font-size--02 {
6412
- font-size: var(--x-size-base-02) !important;
6413
- line-height: 1.5;
6394
+ [dir="rtl"] .x-margin--left-06 {
6395
+ margin-right: var(--x-size-base-06) !important;
6414
6396
  }
6415
- .x-font-size--03 {
6416
- font-size: var(--x-size-base-03) !important;
6417
- line-height: 1.5;
6397
+ .x-margin--top-07 {
6398
+ margin-top: var(--x-size-base-07) !important;
6418
6399
  }
6419
- .x-font-size--04 {
6420
- font-size: var(--x-size-base-04) !important;
6421
- line-height: 1.5;
6400
+ .x-margin--bottom-07 {
6401
+ margin-bottom: var(--x-size-base-07) !important;
6422
6402
  }
6423
- .x-font-size--05 {
6424
- font-size: var(--x-size-base-05) !important;
6425
- line-height: 1.5;
6403
+ [dir="ltr"] .x-margin--right-07 {
6404
+ margin-right: var(--x-size-base-07) !important;
6426
6405
  }
6427
- .x-font-size--06 {
6428
- font-size: var(--x-size-base-06) !important;
6429
- line-height: 1.5;
6406
+ [dir="rtl"] .x-margin--right-07 {
6407
+ margin-left: var(--x-size-base-07) !important;
6430
6408
  }
6431
- .x-font-size--07 {
6432
- font-size: var(--x-size-base-07) !important;
6433
- line-height: 1.5;
6409
+ [dir="ltr"] .x-margin--left-07 {
6410
+ margin-left: var(--x-size-base-07) !important;
6434
6411
  }
6435
- .x-font-size--08 {
6436
- font-size: var(--x-size-base-08) !important;
6437
- line-height: 1.5;
6412
+ [dir="rtl"] .x-margin--left-07 {
6413
+ margin-right: var(--x-size-base-07) !important;
6438
6414
  }
6439
- .x-font-size--09 {
6440
- font-size: var(--x-size-base-09) !important;
6441
- line-height: 1.5;
6415
+ .x-margin--top-08 {
6416
+ margin-top: var(--x-size-base-08) !important;
6442
6417
  }
6443
- .x-font-size--10 {
6444
- font-size: var(--x-size-base-10) !important;
6445
- line-height: 1.5;
6418
+ .x-margin--bottom-08 {
6419
+ margin-bottom: var(--x-size-base-08) !important;
6446
6420
  }
6447
- .x-font-size--11 {
6448
- font-size: var(--x-size-base-11) !important;
6449
- line-height: 1.5;
6421
+ [dir="ltr"] .x-margin--right-08 {
6422
+ margin-right: var(--x-size-base-08) !important;
6450
6423
  }
6451
- .x-font-size--12 {
6452
- font-size: var(--x-size-base-12) !important;
6453
- line-height: 1.5;
6424
+ [dir="rtl"] .x-margin--right-08 {
6425
+ margin-left: var(--x-size-base-08) !important;
6454
6426
  }
6455
- .x-font-size--13 {
6456
- font-size: var(--x-size-base-13) !important;
6457
- line-height: 1.5;
6427
+ [dir="ltr"] .x-margin--left-08 {
6428
+ margin-left: var(--x-size-base-08) !important;
6458
6429
  }
6459
- .x-font-size--14 {
6460
- font-size: var(--x-size-base-14) !important;
6461
- line-height: 1.5;
6430
+ [dir="rtl"] .x-margin--left-08 {
6431
+ margin-right: var(--x-size-base-08) !important;
6462
6432
  }
6463
- .x-font-size--15 {
6464
- font-size: var(--x-size-base-15) !important;
6465
- line-height: 1.5;
6433
+ .x-margin--top-09 {
6434
+ margin-top: var(--x-size-base-09) !important;
6466
6435
  }
6467
- .x-font-size--16 {
6468
- font-size: var(--x-size-base-16) !important;
6469
- line-height: 1.5;
6436
+ .x-margin--bottom-09 {
6437
+ margin-bottom: var(--x-size-base-09) !important;
6470
6438
  }
6471
- .x-font-size--17 {
6472
- font-size: var(--x-size-base-17) !important;
6473
- line-height: 1.5;
6439
+ [dir="ltr"] .x-margin--right-09 {
6440
+ margin-right: var(--x-size-base-09) !important;
6474
6441
  }
6475
- .x-font-size--18 {
6476
- font-size: var(--x-size-base-18) !important;
6477
- line-height: 1.5;
6442
+ [dir="rtl"] .x-margin--right-09 {
6443
+ margin-left: var(--x-size-base-09) !important;
6478
6444
  }
6479
- .x-font-size--19 {
6480
- font-size: var(--x-size-base-19) !important;
6481
- line-height: 1.5;
6445
+ [dir="ltr"] .x-margin--left-09 {
6446
+ margin-left: var(--x-size-base-09) !important;
6482
6447
  }
6483
- .x-font-size--20 {
6484
- font-size: var(--x-size-base-20) !important;
6485
- line-height: 1.5;
6448
+ [dir="rtl"] .x-margin--left-09 {
6449
+ margin-right: var(--x-size-base-09) !important;
6486
6450
  }
6487
- .x-line-clamp--2 {
6488
- overflow: hidden !important;
6489
- display: -webkit-box !important;
6490
- -webkit-box-orient: vertical !important;
6491
- -webkit-line-clamp: 2 !important;
6451
+ .x-margin--top-10 {
6452
+ margin-top: var(--x-size-base-10) !important;
6492
6453
  }
6493
-
6494
- .x-line-clamp--3 {
6495
- overflow: hidden !important;
6496
- display: -webkit-box !important;
6497
- -webkit-box-orient: vertical !important;
6498
- -webkit-line-clamp: 3 !important;
6454
+ .x-margin--bottom-10 {
6455
+ margin-bottom: var(--x-size-base-10) !important;
6499
6456
  }
6500
-
6501
- .x-line-clamp--4 {
6502
- overflow: hidden !important;
6503
- display: -webkit-box !important;
6504
- -webkit-box-orient: vertical !important;
6505
- -webkit-line-clamp: 4 !important;
6457
+ [dir="ltr"] .x-margin--right-10 {
6458
+ margin-right: var(--x-size-base-10) !important;
6506
6459
  }
6507
-
6508
- .x-line-clamp--5 {
6509
- overflow: hidden !important;
6510
- display: -webkit-box !important;
6511
- -webkit-box-orient: vertical !important;
6512
- -webkit-line-clamp: 5 !important;
6460
+ [dir="rtl"] .x-margin--right-10 {
6461
+ margin-left: var(--x-size-base-10) !important;
6513
6462
  }
6514
-
6515
- .x-line-clamp--6 {
6516
- overflow: hidden !important;
6517
- display: -webkit-box !important;
6518
- -webkit-box-orient: vertical !important;
6519
- -webkit-line-clamp: 6 !important;
6463
+ [dir="ltr"] .x-margin--left-10 {
6464
+ margin-left: var(--x-size-base-10) !important;
6520
6465
  }
6521
- .x-line-height--none {
6522
- line-height: 1 !important;
6466
+ [dir="rtl"] .x-margin--left-10 {
6467
+ margin-right: var(--x-size-base-10) !important;
6523
6468
  }
6524
-
6525
- .x-line-height--tight {
6526
- line-height: 1.25 !important;
6469
+ .x-margin--top-11 {
6470
+ margin-top: var(--x-size-base-11) !important;
6527
6471
  }
6528
-
6529
- .x-line-height--snug {
6530
- line-height: 1.375 !important;
6472
+ .x-margin--bottom-11 {
6473
+ margin-bottom: var(--x-size-base-11) !important;
6531
6474
  }
6532
-
6533
- .x-line-height--normal {
6534
- line-height: 1.5 !important;
6475
+ [dir="ltr"] .x-margin--right-11 {
6476
+ margin-right: var(--x-size-base-11) !important;
6535
6477
  }
6536
-
6537
- .x-line-height--relaxed {
6538
- line-height: 1.625 !important;
6478
+ [dir="rtl"] .x-margin--right-11 {
6479
+ margin-left: var(--x-size-base-11) !important;
6539
6480
  }
6540
-
6541
- .x-line-height--loose {
6542
- line-height: 2 !important;
6481
+ [dir="ltr"] .x-margin--left-11 {
6482
+ margin-left: var(--x-size-base-11) !important;
6543
6483
  }
6544
- .x-font-weight--light {
6545
- font-weight: var(--x-number-font-weight-base-light) !important;
6484
+ [dir="rtl"] .x-margin--left-11 {
6485
+ margin-right: var(--x-size-base-11) !important;
6546
6486
  }
6547
- .x-font-weight--regular {
6548
- font-weight: var(--x-number-font-weight-base-regular) !important;
6487
+ .x-margin--top-12 {
6488
+ margin-top: var(--x-size-base-12) !important;
6549
6489
  }
6550
- .x-font-weight--bold {
6551
- font-weight: var(--x-number-font-weight-base-bold) !important;
6490
+ .x-margin--bottom-12 {
6491
+ margin-bottom: var(--x-size-base-12) !important;
6552
6492
  }
6553
- .x-margin--auto {
6554
- margin: auto !important;
6493
+ [dir="ltr"] .x-margin--right-12 {
6494
+ margin-right: var(--x-size-base-12) !important;
6555
6495
  }
6556
- .x-margin--00 {
6557
- margin: 0 !important;
6496
+ [dir="rtl"] .x-margin--right-12 {
6497
+ margin-left: var(--x-size-base-12) !important;
6558
6498
  }
6559
- .x-margin--01 {
6560
- margin: var(--x-size-base-01) !important;
6499
+ [dir="ltr"] .x-margin--left-12 {
6500
+ margin-left: var(--x-size-base-12) !important;
6561
6501
  }
6562
- .x-margin--02 {
6563
- margin: var(--x-size-base-02) !important;
6502
+ [dir="rtl"] .x-margin--left-12 {
6503
+ margin-right: var(--x-size-base-12) !important;
6564
6504
  }
6565
- .x-margin--03 {
6566
- margin: var(--x-size-base-03) !important;
6505
+ .x-margin--top-13 {
6506
+ margin-top: var(--x-size-base-13) !important;
6567
6507
  }
6568
- .x-margin--04 {
6569
- margin: var(--x-size-base-04) !important;
6508
+ .x-margin--bottom-13 {
6509
+ margin-bottom: var(--x-size-base-13) !important;
6570
6510
  }
6571
- .x-margin--05 {
6572
- margin: var(--x-size-base-05) !important;
6511
+ [dir="ltr"] .x-margin--right-13 {
6512
+ margin-right: var(--x-size-base-13) !important;
6573
6513
  }
6574
- .x-margin--06 {
6575
- margin: var(--x-size-base-06) !important;
6514
+ [dir="rtl"] .x-margin--right-13 {
6515
+ margin-left: var(--x-size-base-13) !important;
6576
6516
  }
6577
- .x-margin--07 {
6578
- margin: var(--x-size-base-07) !important;
6517
+ [dir="ltr"] .x-margin--left-13 {
6518
+ margin-left: var(--x-size-base-13) !important;
6579
6519
  }
6580
- .x-margin--08 {
6581
- margin: var(--x-size-base-08) !important;
6520
+ [dir="rtl"] .x-margin--left-13 {
6521
+ margin-right: var(--x-size-base-13) !important;
6582
6522
  }
6583
- .x-margin--09 {
6584
- margin: var(--x-size-base-09) !important;
6523
+ .x-margin--top-14 {
6524
+ margin-top: var(--x-size-base-14) !important;
6585
6525
  }
6586
- .x-margin--10 {
6587
- margin: var(--x-size-base-10) !important;
6526
+ .x-margin--bottom-14 {
6527
+ margin-bottom: var(--x-size-base-14) !important;
6588
6528
  }
6589
- .x-margin--11 {
6590
- margin: var(--x-size-base-11) !important;
6529
+ [dir="ltr"] .x-margin--right-14 {
6530
+ margin-right: var(--x-size-base-14) !important;
6591
6531
  }
6592
- .x-margin--12 {
6593
- margin: var(--x-size-base-12) !important;
6532
+ [dir="rtl"] .x-margin--right-14 {
6533
+ margin-left: var(--x-size-base-14) !important;
6594
6534
  }
6595
- .x-margin--13 {
6596
- margin: var(--x-size-base-13) !important;
6535
+ [dir="ltr"] .x-margin--left-14 {
6536
+ margin-left: var(--x-size-base-14) !important;
6597
6537
  }
6598
- .x-margin--14 {
6599
- margin: var(--x-size-base-14) !important;
6538
+ [dir="rtl"] .x-margin--left-14 {
6539
+ margin-right: var(--x-size-base-14) !important;
6600
6540
  }
6601
- .x-margin--15 {
6602
- margin: var(--x-size-base-15) !important;
6541
+ .x-margin--top-15 {
6542
+ margin-top: var(--x-size-base-15) !important;
6603
6543
  }
6604
- .x-margin--16 {
6605
- margin: var(--x-size-base-16) !important;
6544
+ .x-margin--bottom-15 {
6545
+ margin-bottom: var(--x-size-base-15) !important;
6606
6546
  }
6607
- .x-margin--17 {
6608
- margin: var(--x-size-base-17) !important;
6547
+ [dir="ltr"] .x-margin--right-15 {
6548
+ margin-right: var(--x-size-base-15) !important;
6609
6549
  }
6610
- .x-margin--18 {
6611
- margin: var(--x-size-base-18) !important;
6550
+ [dir="rtl"] .x-margin--right-15 {
6551
+ margin-left: var(--x-size-base-15) !important;
6612
6552
  }
6613
- .x-margin--19 {
6614
- margin: var(--x-size-base-19) !important;
6553
+ [dir="ltr"] .x-margin--left-15 {
6554
+ margin-left: var(--x-size-base-15) !important;
6615
6555
  }
6616
- .x-margin--20 {
6617
- margin: var(--x-size-base-20) !important;
6556
+ [dir="rtl"] .x-margin--left-15 {
6557
+ margin-right: var(--x-size-base-15) !important;
6618
6558
  }
6619
- .x-margin--top-auto {
6620
- margin-top: auto !important;
6559
+ .x-margin--top-16 {
6560
+ margin-top: var(--x-size-base-16) !important;
6621
6561
  }
6622
- .x-margin--bottom-auto {
6623
- margin-bottom: auto !important;
6562
+ .x-margin--bottom-16 {
6563
+ margin-bottom: var(--x-size-base-16) !important;
6624
6564
  }
6625
- [dir="ltr"] .x-margin--right-auto {
6626
- margin-right: auto !important;
6565
+ [dir="ltr"] .x-margin--right-16 {
6566
+ margin-right: var(--x-size-base-16) !important;
6627
6567
  }
6628
- [dir="rtl"] .x-margin--right-auto {
6629
- margin-left: auto !important;
6568
+ [dir="rtl"] .x-margin--right-16 {
6569
+ margin-left: var(--x-size-base-16) !important;
6630
6570
  }
6631
- [dir="ltr"] .x-margin--left-auto {
6632
- margin-left: auto !important;
6571
+ [dir="ltr"] .x-margin--left-16 {
6572
+ margin-left: var(--x-size-base-16) !important;
6633
6573
  }
6634
- [dir="rtl"] .x-margin--left-auto {
6635
- margin-right: auto !important;
6574
+ [dir="rtl"] .x-margin--left-16 {
6575
+ margin-right: var(--x-size-base-16) !important;
6636
6576
  }
6637
- .x-margin--top-00 {
6638
- margin-top: 0 !important;
6577
+ .x-margin--top-17 {
6578
+ margin-top: var(--x-size-base-17) !important;
6639
6579
  }
6640
- .x-margin--bottom-00 {
6641
- margin-bottom: 0 !important;
6580
+ .x-margin--bottom-17 {
6581
+ margin-bottom: var(--x-size-base-17) !important;
6642
6582
  }
6643
- [dir="ltr"] .x-margin--right-00 {
6644
- margin-right: 0 !important;
6583
+ [dir="ltr"] .x-margin--right-17 {
6584
+ margin-right: var(--x-size-base-17) !important;
6645
6585
  }
6646
- [dir="rtl"] .x-margin--right-00 {
6647
- margin-left: 0 !important;
6586
+ [dir="rtl"] .x-margin--right-17 {
6587
+ margin-left: var(--x-size-base-17) !important;
6648
6588
  }
6649
- [dir="ltr"] .x-margin--left-00 {
6650
- margin-left: 0 !important;
6589
+ [dir="ltr"] .x-margin--left-17 {
6590
+ margin-left: var(--x-size-base-17) !important;
6651
6591
  }
6652
- [dir="rtl"] .x-margin--left-00 {
6653
- margin-right: 0 !important;
6592
+ [dir="rtl"] .x-margin--left-17 {
6593
+ margin-right: var(--x-size-base-17) !important;
6654
6594
  }
6655
- .x-margin--top-01 {
6656
- margin-top: var(--x-size-base-01) !important;
6595
+ .x-margin--top-18 {
6596
+ margin-top: var(--x-size-base-18) !important;
6657
6597
  }
6658
- .x-margin--bottom-01 {
6659
- margin-bottom: var(--x-size-base-01) !important;
6598
+ .x-margin--bottom-18 {
6599
+ margin-bottom: var(--x-size-base-18) !important;
6660
6600
  }
6661
- [dir="ltr"] .x-margin--right-01 {
6662
- margin-right: var(--x-size-base-01) !important;
6601
+ [dir="ltr"] .x-margin--right-18 {
6602
+ margin-right: var(--x-size-base-18) !important;
6663
6603
  }
6664
- [dir="rtl"] .x-margin--right-01 {
6665
- margin-left: var(--x-size-base-01) !important;
6604
+ [dir="rtl"] .x-margin--right-18 {
6605
+ margin-left: var(--x-size-base-18) !important;
6666
6606
  }
6667
- [dir="ltr"] .x-margin--left-01 {
6668
- margin-left: var(--x-size-base-01) !important;
6607
+ [dir="ltr"] .x-margin--left-18 {
6608
+ margin-left: var(--x-size-base-18) !important;
6669
6609
  }
6670
- [dir="rtl"] .x-margin--left-01 {
6671
- margin-right: var(--x-size-base-01) !important;
6610
+ [dir="rtl"] .x-margin--left-18 {
6611
+ margin-right: var(--x-size-base-18) !important;
6672
6612
  }
6673
- .x-margin--top-02 {
6674
- margin-top: var(--x-size-base-02) !important;
6613
+ .x-margin--top-19 {
6614
+ margin-top: var(--x-size-base-19) !important;
6675
6615
  }
6676
- .x-margin--bottom-02 {
6677
- margin-bottom: var(--x-size-base-02) !important;
6616
+ .x-margin--bottom-19 {
6617
+ margin-bottom: var(--x-size-base-19) !important;
6678
6618
  }
6679
- [dir="ltr"] .x-margin--right-02 {
6680
- margin-right: var(--x-size-base-02) !important;
6619
+ [dir="ltr"] .x-margin--right-19 {
6620
+ margin-right: var(--x-size-base-19) !important;
6681
6621
  }
6682
- [dir="rtl"] .x-margin--right-02 {
6683
- margin-left: var(--x-size-base-02) !important;
6622
+ [dir="rtl"] .x-margin--right-19 {
6623
+ margin-left: var(--x-size-base-19) !important;
6684
6624
  }
6685
- [dir="ltr"] .x-margin--left-02 {
6686
- margin-left: var(--x-size-base-02) !important;
6625
+ [dir="ltr"] .x-margin--left-19 {
6626
+ margin-left: var(--x-size-base-19) !important;
6687
6627
  }
6688
- [dir="rtl"] .x-margin--left-02 {
6689
- margin-right: var(--x-size-base-02) !important;
6628
+ [dir="rtl"] .x-margin--left-19 {
6629
+ margin-right: var(--x-size-base-19) !important;
6690
6630
  }
6691
- .x-margin--top-03 {
6692
- margin-top: var(--x-size-base-03) !important;
6631
+ .x-margin--top-20 {
6632
+ margin-top: var(--x-size-base-20) !important;
6693
6633
  }
6694
- .x-margin--bottom-03 {
6695
- margin-bottom: var(--x-size-base-03) !important;
6634
+ .x-margin--bottom-20 {
6635
+ margin-bottom: var(--x-size-base-20) !important;
6696
6636
  }
6697
- [dir="ltr"] .x-margin--right-03 {
6698
- margin-right: var(--x-size-base-03) !important;
6637
+ [dir="ltr"] .x-margin--right-20 {
6638
+ margin-right: var(--x-size-base-20) !important;
6699
6639
  }
6700
- [dir="rtl"] .x-margin--right-03 {
6701
- margin-left: var(--x-size-base-03) !important;
6640
+ [dir="rtl"] .x-margin--right-20 {
6641
+ margin-left: var(--x-size-base-20) !important;
6702
6642
  }
6703
- [dir="ltr"] .x-margin--left-03 {
6704
- margin-left: var(--x-size-base-03) !important;
6643
+ [dir="ltr"] .x-margin--left-20 {
6644
+ margin-left: var(--x-size-base-20) !important;
6705
6645
  }
6706
- [dir="rtl"] .x-margin--left-03 {
6707
- margin-right: var(--x-size-base-03) !important;
6646
+ [dir="rtl"] .x-margin--left-20 {
6647
+ margin-right: var(--x-size-base-20) !important;
6708
6648
  }
6709
- .x-margin--top-04 {
6710
- margin-top: var(--x-size-base-04) !important;
6649
+ .x-padding--00 {
6650
+ padding: 0 !important;
6711
6651
  }
6712
- .x-margin--bottom-04 {
6713
- margin-bottom: var(--x-size-base-04) !important;
6652
+ .x-padding--01 {
6653
+ padding: var(--x-size-base-01) !important;
6714
6654
  }
6715
- [dir="ltr"] .x-margin--right-04 {
6716
- margin-right: var(--x-size-base-04) !important;
6655
+ .x-padding--02 {
6656
+ padding: var(--x-size-base-02) !important;
6717
6657
  }
6718
- [dir="rtl"] .x-margin--right-04 {
6719
- margin-left: var(--x-size-base-04) !important;
6658
+ .x-padding--03 {
6659
+ padding: var(--x-size-base-03) !important;
6720
6660
  }
6721
- [dir="ltr"] .x-margin--left-04 {
6722
- margin-left: var(--x-size-base-04) !important;
6661
+ .x-padding--04 {
6662
+ padding: var(--x-size-base-04) !important;
6723
6663
  }
6724
- [dir="rtl"] .x-margin--left-04 {
6725
- margin-right: var(--x-size-base-04) !important;
6664
+ .x-padding--05 {
6665
+ padding: var(--x-size-base-05) !important;
6726
6666
  }
6727
- .x-margin--top-05 {
6728
- margin-top: var(--x-size-base-05) !important;
6667
+ .x-padding--06 {
6668
+ padding: var(--x-size-base-06) !important;
6729
6669
  }
6730
- .x-margin--bottom-05 {
6731
- margin-bottom: var(--x-size-base-05) !important;
6670
+ .x-padding--07 {
6671
+ padding: var(--x-size-base-07) !important;
6732
6672
  }
6733
- [dir="ltr"] .x-margin--right-05 {
6734
- margin-right: var(--x-size-base-05) !important;
6673
+ .x-padding--08 {
6674
+ padding: var(--x-size-base-08) !important;
6735
6675
  }
6736
- [dir="rtl"] .x-margin--right-05 {
6737
- margin-left: var(--x-size-base-05) !important;
6676
+ .x-padding--09 {
6677
+ padding: var(--x-size-base-09) !important;
6738
6678
  }
6739
- [dir="ltr"] .x-margin--left-05 {
6740
- margin-left: var(--x-size-base-05) !important;
6679
+ .x-padding--10 {
6680
+ padding: var(--x-size-base-10) !important;
6741
6681
  }
6742
- [dir="rtl"] .x-margin--left-05 {
6743
- margin-right: var(--x-size-base-05) !important;
6682
+ .x-padding--11 {
6683
+ padding: var(--x-size-base-11) !important;
6744
6684
  }
6745
- .x-margin--top-06 {
6746
- margin-top: var(--x-size-base-06) !important;
6685
+ .x-padding--12 {
6686
+ padding: var(--x-size-base-12) !important;
6747
6687
  }
6748
- .x-margin--bottom-06 {
6749
- margin-bottom: var(--x-size-base-06) !important;
6688
+ .x-padding--13 {
6689
+ padding: var(--x-size-base-13) !important;
6750
6690
  }
6751
- [dir="ltr"] .x-margin--right-06 {
6752
- margin-right: var(--x-size-base-06) !important;
6691
+ .x-padding--14 {
6692
+ padding: var(--x-size-base-14) !important;
6753
6693
  }
6754
- [dir="rtl"] .x-margin--right-06 {
6755
- margin-left: var(--x-size-base-06) !important;
6694
+ .x-padding--15 {
6695
+ padding: var(--x-size-base-15) !important;
6756
6696
  }
6757
- [dir="ltr"] .x-margin--left-06 {
6758
- margin-left: var(--x-size-base-06) !important;
6697
+ .x-padding--16 {
6698
+ padding: var(--x-size-base-16) !important;
6759
6699
  }
6760
- [dir="rtl"] .x-margin--left-06 {
6761
- margin-right: var(--x-size-base-06) !important;
6700
+ .x-padding--17 {
6701
+ padding: var(--x-size-base-17) !important;
6762
6702
  }
6763
- .x-margin--top-07 {
6764
- margin-top: var(--x-size-base-07) !important;
6703
+ .x-padding--18 {
6704
+ padding: var(--x-size-base-18) !important;
6765
6705
  }
6766
- .x-margin--bottom-07 {
6767
- margin-bottom: var(--x-size-base-07) !important;
6706
+ .x-padding--19 {
6707
+ padding: var(--x-size-base-19) !important;
6768
6708
  }
6769
- [dir="ltr"] .x-margin--right-07 {
6770
- margin-right: var(--x-size-base-07) !important;
6709
+ .x-padding--20 {
6710
+ padding: var(--x-size-base-20) !important;
6771
6711
  }
6772
- [dir="rtl"] .x-margin--right-07 {
6773
- margin-left: var(--x-size-base-07) !important;
6712
+ .x-padding--top-00 {
6713
+ padding-top: 0 !important;
6774
6714
  }
6775
- [dir="ltr"] .x-margin--left-07 {
6776
- margin-left: var(--x-size-base-07) !important;
6715
+ .x-padding--bottom-00 {
6716
+ padding-bottom: 0 !important;
6777
6717
  }
6778
- [dir="rtl"] .x-margin--left-07 {
6779
- margin-right: var(--x-size-base-07) !important;
6718
+ [dir="ltr"] .x-padding--right-00 {
6719
+ padding-right: 0 !important;
6780
6720
  }
6781
- .x-margin--top-08 {
6782
- margin-top: var(--x-size-base-08) !important;
6721
+ [dir="rtl"] .x-padding--right-00 {
6722
+ padding-left: 0 !important;
6783
6723
  }
6784
- .x-margin--bottom-08 {
6785
- margin-bottom: var(--x-size-base-08) !important;
6724
+ [dir="ltr"] .x-padding--left-00 {
6725
+ padding-left: 0 !important;
6786
6726
  }
6787
- [dir="ltr"] .x-margin--right-08 {
6788
- margin-right: var(--x-size-base-08) !important;
6727
+ [dir="rtl"] .x-padding--left-00 {
6728
+ padding-right: 0 !important;
6789
6729
  }
6790
- [dir="rtl"] .x-margin--right-08 {
6791
- margin-left: var(--x-size-base-08) !important;
6730
+ .x-padding--top-01 {
6731
+ padding-top: var(--x-size-base-01) !important;
6792
6732
  }
6793
- [dir="ltr"] .x-margin--left-08 {
6794
- margin-left: var(--x-size-base-08) !important;
6733
+ .x-padding--bottom-01 {
6734
+ padding-bottom: var(--x-size-base-01) !important;
6795
6735
  }
6796
- [dir="rtl"] .x-margin--left-08 {
6797
- margin-right: var(--x-size-base-08) !important;
6736
+ [dir="ltr"] .x-padding--right-01 {
6737
+ padding-right: var(--x-size-base-01) !important;
6798
6738
  }
6799
- .x-margin--top-09 {
6800
- margin-top: var(--x-size-base-09) !important;
6739
+ [dir="rtl"] .x-padding--right-01 {
6740
+ padding-left: var(--x-size-base-01) !important;
6801
6741
  }
6802
- .x-margin--bottom-09 {
6803
- margin-bottom: var(--x-size-base-09) !important;
6742
+ [dir="ltr"] .x-padding--left-01 {
6743
+ padding-left: var(--x-size-base-01) !important;
6804
6744
  }
6805
- [dir="ltr"] .x-margin--right-09 {
6806
- margin-right: var(--x-size-base-09) !important;
6745
+ [dir="rtl"] .x-padding--left-01 {
6746
+ padding-right: var(--x-size-base-01) !important;
6807
6747
  }
6808
- [dir="rtl"] .x-margin--right-09 {
6809
- margin-left: var(--x-size-base-09) !important;
6748
+ .x-padding--top-02 {
6749
+ padding-top: var(--x-size-base-02) !important;
6810
6750
  }
6811
- [dir="ltr"] .x-margin--left-09 {
6812
- margin-left: var(--x-size-base-09) !important;
6751
+ .x-padding--bottom-02 {
6752
+ padding-bottom: var(--x-size-base-02) !important;
6813
6753
  }
6814
- [dir="rtl"] .x-margin--left-09 {
6815
- margin-right: var(--x-size-base-09) !important;
6754
+ [dir="ltr"] .x-padding--right-02 {
6755
+ padding-right: var(--x-size-base-02) !important;
6816
6756
  }
6817
- .x-margin--top-10 {
6818
- margin-top: var(--x-size-base-10) !important;
6757
+ [dir="rtl"] .x-padding--right-02 {
6758
+ padding-left: var(--x-size-base-02) !important;
6819
6759
  }
6820
- .x-margin--bottom-10 {
6821
- margin-bottom: var(--x-size-base-10) !important;
6760
+ [dir="ltr"] .x-padding--left-02 {
6761
+ padding-left: var(--x-size-base-02) !important;
6822
6762
  }
6823
- [dir="ltr"] .x-margin--right-10 {
6824
- margin-right: var(--x-size-base-10) !important;
6763
+ [dir="rtl"] .x-padding--left-02 {
6764
+ padding-right: var(--x-size-base-02) !important;
6825
6765
  }
6826
- [dir="rtl"] .x-margin--right-10 {
6827
- margin-left: var(--x-size-base-10) !important;
6766
+ .x-padding--top-03 {
6767
+ padding-top: var(--x-size-base-03) !important;
6828
6768
  }
6829
- [dir="ltr"] .x-margin--left-10 {
6830
- margin-left: var(--x-size-base-10) !important;
6769
+ .x-padding--bottom-03 {
6770
+ padding-bottom: var(--x-size-base-03) !important;
6831
6771
  }
6832
- [dir="rtl"] .x-margin--left-10 {
6833
- margin-right: var(--x-size-base-10) !important;
6772
+ [dir="ltr"] .x-padding--right-03 {
6773
+ padding-right: var(--x-size-base-03) !important;
6834
6774
  }
6835
- .x-margin--top-11 {
6836
- margin-top: var(--x-size-base-11) !important;
6775
+ [dir="rtl"] .x-padding--right-03 {
6776
+ padding-left: var(--x-size-base-03) !important;
6837
6777
  }
6838
- .x-margin--bottom-11 {
6839
- margin-bottom: var(--x-size-base-11) !important;
6778
+ [dir="ltr"] .x-padding--left-03 {
6779
+ padding-left: var(--x-size-base-03) !important;
6840
6780
  }
6841
- [dir="ltr"] .x-margin--right-11 {
6842
- margin-right: var(--x-size-base-11) !important;
6781
+ [dir="rtl"] .x-padding--left-03 {
6782
+ padding-right: var(--x-size-base-03) !important;
6843
6783
  }
6844
- [dir="rtl"] .x-margin--right-11 {
6845
- margin-left: var(--x-size-base-11) !important;
6784
+ .x-padding--top-04 {
6785
+ padding-top: var(--x-size-base-04) !important;
6846
6786
  }
6847
- [dir="ltr"] .x-margin--left-11 {
6848
- margin-left: var(--x-size-base-11) !important;
6787
+ .x-padding--bottom-04 {
6788
+ padding-bottom: var(--x-size-base-04) !important;
6849
6789
  }
6850
- [dir="rtl"] .x-margin--left-11 {
6851
- margin-right: var(--x-size-base-11) !important;
6790
+ [dir="ltr"] .x-padding--right-04 {
6791
+ padding-right: var(--x-size-base-04) !important;
6852
6792
  }
6853
- .x-margin--top-12 {
6854
- margin-top: var(--x-size-base-12) !important;
6793
+ [dir="rtl"] .x-padding--right-04 {
6794
+ padding-left: var(--x-size-base-04) !important;
6855
6795
  }
6856
- .x-margin--bottom-12 {
6857
- margin-bottom: var(--x-size-base-12) !important;
6796
+ [dir="ltr"] .x-padding--left-04 {
6797
+ padding-left: var(--x-size-base-04) !important;
6858
6798
  }
6859
- [dir="ltr"] .x-margin--right-12 {
6860
- margin-right: var(--x-size-base-12) !important;
6799
+ [dir="rtl"] .x-padding--left-04 {
6800
+ padding-right: var(--x-size-base-04) !important;
6861
6801
  }
6862
- [dir="rtl"] .x-margin--right-12 {
6863
- margin-left: var(--x-size-base-12) !important;
6802
+ .x-padding--top-05 {
6803
+ padding-top: var(--x-size-base-05) !important;
6864
6804
  }
6865
- [dir="ltr"] .x-margin--left-12 {
6866
- margin-left: var(--x-size-base-12) !important;
6805
+ .x-padding--bottom-05 {
6806
+ padding-bottom: var(--x-size-base-05) !important;
6867
6807
  }
6868
- [dir="rtl"] .x-margin--left-12 {
6869
- margin-right: var(--x-size-base-12) !important;
6808
+ [dir="ltr"] .x-padding--right-05 {
6809
+ padding-right: var(--x-size-base-05) !important;
6870
6810
  }
6871
- .x-margin--top-13 {
6872
- margin-top: var(--x-size-base-13) !important;
6811
+ [dir="rtl"] .x-padding--right-05 {
6812
+ padding-left: var(--x-size-base-05) !important;
6873
6813
  }
6874
- .x-margin--bottom-13 {
6875
- margin-bottom: var(--x-size-base-13) !important;
6814
+ [dir="ltr"] .x-padding--left-05 {
6815
+ padding-left: var(--x-size-base-05) !important;
6876
6816
  }
6877
- [dir="ltr"] .x-margin--right-13 {
6878
- margin-right: var(--x-size-base-13) !important;
6817
+ [dir="rtl"] .x-padding--left-05 {
6818
+ padding-right: var(--x-size-base-05) !important;
6879
6819
  }
6880
- [dir="rtl"] .x-margin--right-13 {
6881
- margin-left: var(--x-size-base-13) !important;
6820
+ .x-padding--top-06 {
6821
+ padding-top: var(--x-size-base-06) !important;
6882
6822
  }
6883
- [dir="ltr"] .x-margin--left-13 {
6884
- margin-left: var(--x-size-base-13) !important;
6823
+ .x-padding--bottom-06 {
6824
+ padding-bottom: var(--x-size-base-06) !important;
6885
6825
  }
6886
- [dir="rtl"] .x-margin--left-13 {
6887
- margin-right: var(--x-size-base-13) !important;
6826
+ [dir="ltr"] .x-padding--right-06 {
6827
+ padding-right: var(--x-size-base-06) !important;
6888
6828
  }
6889
- .x-margin--top-14 {
6890
- margin-top: var(--x-size-base-14) !important;
6829
+ [dir="rtl"] .x-padding--right-06 {
6830
+ padding-left: var(--x-size-base-06) !important;
6891
6831
  }
6892
- .x-margin--bottom-14 {
6893
- margin-bottom: var(--x-size-base-14) !important;
6832
+ [dir="ltr"] .x-padding--left-06 {
6833
+ padding-left: var(--x-size-base-06) !important;
6894
6834
  }
6895
- [dir="ltr"] .x-margin--right-14 {
6896
- margin-right: var(--x-size-base-14) !important;
6835
+ [dir="rtl"] .x-padding--left-06 {
6836
+ padding-right: var(--x-size-base-06) !important;
6897
6837
  }
6898
- [dir="rtl"] .x-margin--right-14 {
6899
- margin-left: var(--x-size-base-14) !important;
6838
+ .x-padding--top-07 {
6839
+ padding-top: var(--x-size-base-07) !important;
6900
6840
  }
6901
- [dir="ltr"] .x-margin--left-14 {
6902
- margin-left: var(--x-size-base-14) !important;
6841
+ .x-padding--bottom-07 {
6842
+ padding-bottom: var(--x-size-base-07) !important;
6903
6843
  }
6904
- [dir="rtl"] .x-margin--left-14 {
6905
- margin-right: var(--x-size-base-14) !important;
6844
+ [dir="ltr"] .x-padding--right-07 {
6845
+ padding-right: var(--x-size-base-07) !important;
6906
6846
  }
6907
- .x-margin--top-15 {
6908
- margin-top: var(--x-size-base-15) !important;
6847
+ [dir="rtl"] .x-padding--right-07 {
6848
+ padding-left: var(--x-size-base-07) !important;
6909
6849
  }
6910
- .x-margin--bottom-15 {
6911
- margin-bottom: var(--x-size-base-15) !important;
6850
+ [dir="ltr"] .x-padding--left-07 {
6851
+ padding-left: var(--x-size-base-07) !important;
6912
6852
  }
6913
- [dir="ltr"] .x-margin--right-15 {
6914
- margin-right: var(--x-size-base-15) !important;
6853
+ [dir="rtl"] .x-padding--left-07 {
6854
+ padding-right: var(--x-size-base-07) !important;
6915
6855
  }
6916
- [dir="rtl"] .x-margin--right-15 {
6917
- margin-left: var(--x-size-base-15) !important;
6856
+ .x-padding--top-08 {
6857
+ padding-top: var(--x-size-base-08) !important;
6918
6858
  }
6919
- [dir="ltr"] .x-margin--left-15 {
6920
- margin-left: var(--x-size-base-15) !important;
6859
+ .x-padding--bottom-08 {
6860
+ padding-bottom: var(--x-size-base-08) !important;
6921
6861
  }
6922
- [dir="rtl"] .x-margin--left-15 {
6923
- margin-right: var(--x-size-base-15) !important;
6862
+ [dir="ltr"] .x-padding--right-08 {
6863
+ padding-right: var(--x-size-base-08) !important;
6924
6864
  }
6925
- .x-margin--top-16 {
6926
- margin-top: var(--x-size-base-16) !important;
6865
+ [dir="rtl"] .x-padding--right-08 {
6866
+ padding-left: var(--x-size-base-08) !important;
6927
6867
  }
6928
- .x-margin--bottom-16 {
6929
- margin-bottom: var(--x-size-base-16) !important;
6868
+ [dir="ltr"] .x-padding--left-08 {
6869
+ padding-left: var(--x-size-base-08) !important;
6930
6870
  }
6931
- [dir="ltr"] .x-margin--right-16 {
6932
- margin-right: var(--x-size-base-16) !important;
6871
+ [dir="rtl"] .x-padding--left-08 {
6872
+ padding-right: var(--x-size-base-08) !important;
6933
6873
  }
6934
- [dir="rtl"] .x-margin--right-16 {
6935
- margin-left: var(--x-size-base-16) !important;
6874
+ .x-padding--top-09 {
6875
+ padding-top: var(--x-size-base-09) !important;
6936
6876
  }
6937
- [dir="ltr"] .x-margin--left-16 {
6938
- margin-left: var(--x-size-base-16) !important;
6877
+ .x-padding--bottom-09 {
6878
+ padding-bottom: var(--x-size-base-09) !important;
6939
6879
  }
6940
- [dir="rtl"] .x-margin--left-16 {
6941
- margin-right: var(--x-size-base-16) !important;
6880
+ [dir="ltr"] .x-padding--right-09 {
6881
+ padding-right: var(--x-size-base-09) !important;
6942
6882
  }
6943
- .x-margin--top-17 {
6944
- margin-top: var(--x-size-base-17) !important;
6883
+ [dir="rtl"] .x-padding--right-09 {
6884
+ padding-left: var(--x-size-base-09) !important;
6945
6885
  }
6946
- .x-margin--bottom-17 {
6947
- margin-bottom: var(--x-size-base-17) !important;
6886
+ [dir="ltr"] .x-padding--left-09 {
6887
+ padding-left: var(--x-size-base-09) !important;
6948
6888
  }
6949
- [dir="ltr"] .x-margin--right-17 {
6950
- margin-right: var(--x-size-base-17) !important;
6889
+ [dir="rtl"] .x-padding--left-09 {
6890
+ padding-right: var(--x-size-base-09) !important;
6951
6891
  }
6952
- [dir="rtl"] .x-margin--right-17 {
6953
- margin-left: var(--x-size-base-17) !important;
6892
+ .x-padding--top-10 {
6893
+ padding-top: var(--x-size-base-10) !important;
6954
6894
  }
6955
- [dir="ltr"] .x-margin--left-17 {
6956
- margin-left: var(--x-size-base-17) !important;
6895
+ .x-padding--bottom-10 {
6896
+ padding-bottom: var(--x-size-base-10) !important;
6957
6897
  }
6958
- [dir="rtl"] .x-margin--left-17 {
6959
- margin-right: var(--x-size-base-17) !important;
6898
+ [dir="ltr"] .x-padding--right-10 {
6899
+ padding-right: var(--x-size-base-10) !important;
6960
6900
  }
6961
- .x-margin--top-18 {
6962
- margin-top: var(--x-size-base-18) !important;
6901
+ [dir="rtl"] .x-padding--right-10 {
6902
+ padding-left: var(--x-size-base-10) !important;
6963
6903
  }
6964
- .x-margin--bottom-18 {
6965
- margin-bottom: var(--x-size-base-18) !important;
6904
+ [dir="ltr"] .x-padding--left-10 {
6905
+ padding-left: var(--x-size-base-10) !important;
6966
6906
  }
6967
- [dir="ltr"] .x-margin--right-18 {
6968
- margin-right: var(--x-size-base-18) !important;
6907
+ [dir="rtl"] .x-padding--left-10 {
6908
+ padding-right: var(--x-size-base-10) !important;
6969
6909
  }
6970
- [dir="rtl"] .x-margin--right-18 {
6971
- margin-left: var(--x-size-base-18) !important;
6910
+ .x-padding--top-11 {
6911
+ padding-top: var(--x-size-base-11) !important;
6972
6912
  }
6973
- [dir="ltr"] .x-margin--left-18 {
6974
- margin-left: var(--x-size-base-18) !important;
6913
+ .x-padding--bottom-11 {
6914
+ padding-bottom: var(--x-size-base-11) !important;
6975
6915
  }
6976
- [dir="rtl"] .x-margin--left-18 {
6977
- margin-right: var(--x-size-base-18) !important;
6916
+ [dir="ltr"] .x-padding--right-11 {
6917
+ padding-right: var(--x-size-base-11) !important;
6978
6918
  }
6979
- .x-margin--top-19 {
6980
- margin-top: var(--x-size-base-19) !important;
6919
+ [dir="rtl"] .x-padding--right-11 {
6920
+ padding-left: var(--x-size-base-11) !important;
6981
6921
  }
6982
- .x-margin--bottom-19 {
6983
- margin-bottom: var(--x-size-base-19) !important;
6922
+ [dir="ltr"] .x-padding--left-11 {
6923
+ padding-left: var(--x-size-base-11) !important;
6984
6924
  }
6985
- [dir="ltr"] .x-margin--right-19 {
6986
- margin-right: var(--x-size-base-19) !important;
6925
+ [dir="rtl"] .x-padding--left-11 {
6926
+ padding-right: var(--x-size-base-11) !important;
6987
6927
  }
6988
- [dir="rtl"] .x-margin--right-19 {
6989
- margin-left: var(--x-size-base-19) !important;
6928
+ .x-padding--top-12 {
6929
+ padding-top: var(--x-size-base-12) !important;
6990
6930
  }
6991
- [dir="ltr"] .x-margin--left-19 {
6992
- margin-left: var(--x-size-base-19) !important;
6931
+ .x-padding--bottom-12 {
6932
+ padding-bottom: var(--x-size-base-12) !important;
6993
6933
  }
6994
- [dir="rtl"] .x-margin--left-19 {
6995
- margin-right: var(--x-size-base-19) !important;
6934
+ [dir="ltr"] .x-padding--right-12 {
6935
+ padding-right: var(--x-size-base-12) !important;
6996
6936
  }
6997
- .x-margin--top-20 {
6998
- margin-top: var(--x-size-base-20) !important;
6937
+ [dir="rtl"] .x-padding--right-12 {
6938
+ padding-left: var(--x-size-base-12) !important;
6999
6939
  }
7000
- .x-margin--bottom-20 {
7001
- margin-bottom: var(--x-size-base-20) !important;
6940
+ [dir="ltr"] .x-padding--left-12 {
6941
+ padding-left: var(--x-size-base-12) !important;
7002
6942
  }
7003
- [dir="ltr"] .x-margin--right-20 {
7004
- margin-right: var(--x-size-base-20) !important;
6943
+ [dir="rtl"] .x-padding--left-12 {
6944
+ padding-right: var(--x-size-base-12) !important;
7005
6945
  }
7006
- [dir="rtl"] .x-margin--right-20 {
7007
- margin-left: var(--x-size-base-20) !important;
6946
+ .x-padding--top-13 {
6947
+ padding-top: var(--x-size-base-13) !important;
7008
6948
  }
7009
- [dir="ltr"] .x-margin--left-20 {
7010
- margin-left: var(--x-size-base-20) !important;
6949
+ .x-padding--bottom-13 {
6950
+ padding-bottom: var(--x-size-base-13) !important;
7011
6951
  }
7012
- [dir="rtl"] .x-margin--left-20 {
7013
- margin-right: var(--x-size-base-20) !important;
6952
+ [dir="ltr"] .x-padding--right-13 {
6953
+ padding-right: var(--x-size-base-13) !important;
7014
6954
  }
7015
- .x-padding--00 {
7016
- padding: 0 !important;
6955
+ [dir="rtl"] .x-padding--right-13 {
6956
+ padding-left: var(--x-size-base-13) !important;
7017
6957
  }
7018
- .x-padding--01 {
7019
- padding: var(--x-size-base-01) !important;
6958
+ [dir="ltr"] .x-padding--left-13 {
6959
+ padding-left: var(--x-size-base-13) !important;
7020
6960
  }
7021
- .x-padding--02 {
7022
- padding: var(--x-size-base-02) !important;
6961
+ [dir="rtl"] .x-padding--left-13 {
6962
+ padding-right: var(--x-size-base-13) !important;
7023
6963
  }
7024
- .x-padding--03 {
7025
- padding: var(--x-size-base-03) !important;
6964
+ .x-padding--top-14 {
6965
+ padding-top: var(--x-size-base-14) !important;
7026
6966
  }
7027
- .x-padding--04 {
7028
- padding: var(--x-size-base-04) !important;
6967
+ .x-padding--bottom-14 {
6968
+ padding-bottom: var(--x-size-base-14) !important;
7029
6969
  }
7030
- .x-padding--05 {
7031
- padding: var(--x-size-base-05) !important;
6970
+ [dir="ltr"] .x-padding--right-14 {
6971
+ padding-right: var(--x-size-base-14) !important;
7032
6972
  }
7033
- .x-padding--06 {
7034
- padding: var(--x-size-base-06) !important;
6973
+ [dir="rtl"] .x-padding--right-14 {
6974
+ padding-left: var(--x-size-base-14) !important;
7035
6975
  }
7036
- .x-padding--07 {
7037
- padding: var(--x-size-base-07) !important;
6976
+ [dir="ltr"] .x-padding--left-14 {
6977
+ padding-left: var(--x-size-base-14) !important;
7038
6978
  }
7039
- .x-padding--08 {
7040
- padding: var(--x-size-base-08) !important;
6979
+ [dir="rtl"] .x-padding--left-14 {
6980
+ padding-right: var(--x-size-base-14) !important;
7041
6981
  }
7042
- .x-padding--09 {
7043
- padding: var(--x-size-base-09) !important;
6982
+ .x-padding--top-15 {
6983
+ padding-top: var(--x-size-base-15) !important;
7044
6984
  }
7045
- .x-padding--10 {
7046
- padding: var(--x-size-base-10) !important;
6985
+ .x-padding--bottom-15 {
6986
+ padding-bottom: var(--x-size-base-15) !important;
7047
6987
  }
7048
- .x-padding--11 {
7049
- padding: var(--x-size-base-11) !important;
6988
+ [dir="ltr"] .x-padding--right-15 {
6989
+ padding-right: var(--x-size-base-15) !important;
7050
6990
  }
7051
- .x-padding--12 {
7052
- padding: var(--x-size-base-12) !important;
6991
+ [dir="rtl"] .x-padding--right-15 {
6992
+ padding-left: var(--x-size-base-15) !important;
7053
6993
  }
7054
- .x-padding--13 {
7055
- padding: var(--x-size-base-13) !important;
6994
+ [dir="ltr"] .x-padding--left-15 {
6995
+ padding-left: var(--x-size-base-15) !important;
7056
6996
  }
7057
- .x-padding--14 {
7058
- padding: var(--x-size-base-14) !important;
6997
+ [dir="rtl"] .x-padding--left-15 {
6998
+ padding-right: var(--x-size-base-15) !important;
7059
6999
  }
7060
- .x-padding--15 {
7061
- padding: var(--x-size-base-15) !important;
7000
+ .x-padding--top-16 {
7001
+ padding-top: var(--x-size-base-16) !important;
7062
7002
  }
7063
- .x-padding--16 {
7064
- padding: var(--x-size-base-16) !important;
7003
+ .x-padding--bottom-16 {
7004
+ padding-bottom: var(--x-size-base-16) !important;
7065
7005
  }
7066
- .x-padding--17 {
7067
- padding: var(--x-size-base-17) !important;
7006
+ [dir="ltr"] .x-padding--right-16 {
7007
+ padding-right: var(--x-size-base-16) !important;
7068
7008
  }
7069
- .x-padding--18 {
7070
- padding: var(--x-size-base-18) !important;
7009
+ [dir="rtl"] .x-padding--right-16 {
7010
+ padding-left: var(--x-size-base-16) !important;
7071
7011
  }
7072
- .x-padding--19 {
7073
- padding: var(--x-size-base-19) !important;
7012
+ [dir="ltr"] .x-padding--left-16 {
7013
+ padding-left: var(--x-size-base-16) !important;
7074
7014
  }
7075
- .x-padding--20 {
7076
- padding: var(--x-size-base-20) !important;
7015
+ [dir="rtl"] .x-padding--left-16 {
7016
+ padding-right: var(--x-size-base-16) !important;
7077
7017
  }
7078
- .x-padding--top-00 {
7079
- padding-top: 0 !important;
7018
+ .x-padding--top-17 {
7019
+ padding-top: var(--x-size-base-17) !important;
7080
7020
  }
7081
- .x-padding--bottom-00 {
7082
- padding-bottom: 0 !important;
7021
+ .x-padding--bottom-17 {
7022
+ padding-bottom: var(--x-size-base-17) !important;
7083
7023
  }
7084
- [dir="ltr"] .x-padding--right-00 {
7085
- padding-right: 0 !important;
7024
+ [dir="ltr"] .x-padding--right-17 {
7025
+ padding-right: var(--x-size-base-17) !important;
7086
7026
  }
7087
- [dir="rtl"] .x-padding--right-00 {
7088
- padding-left: 0 !important;
7027
+ [dir="rtl"] .x-padding--right-17 {
7028
+ padding-left: var(--x-size-base-17) !important;
7089
7029
  }
7090
- [dir="ltr"] .x-padding--left-00 {
7091
- padding-left: 0 !important;
7030
+ [dir="ltr"] .x-padding--left-17 {
7031
+ padding-left: var(--x-size-base-17) !important;
7092
7032
  }
7093
- [dir="rtl"] .x-padding--left-00 {
7094
- padding-right: 0 !important;
7033
+ [dir="rtl"] .x-padding--left-17 {
7034
+ padding-right: var(--x-size-base-17) !important;
7095
7035
  }
7096
- .x-padding--top-01 {
7097
- padding-top: var(--x-size-base-01) !important;
7036
+ .x-padding--top-18 {
7037
+ padding-top: var(--x-size-base-18) !important;
7098
7038
  }
7099
- .x-padding--bottom-01 {
7100
- padding-bottom: var(--x-size-base-01) !important;
7039
+ .x-padding--bottom-18 {
7040
+ padding-bottom: var(--x-size-base-18) !important;
7101
7041
  }
7102
- [dir="ltr"] .x-padding--right-01 {
7103
- padding-right: var(--x-size-base-01) !important;
7042
+ [dir="ltr"] .x-padding--right-18 {
7043
+ padding-right: var(--x-size-base-18) !important;
7104
7044
  }
7105
- [dir="rtl"] .x-padding--right-01 {
7106
- padding-left: var(--x-size-base-01) !important;
7045
+ [dir="rtl"] .x-padding--right-18 {
7046
+ padding-left: var(--x-size-base-18) !important;
7107
7047
  }
7108
- [dir="ltr"] .x-padding--left-01 {
7109
- padding-left: var(--x-size-base-01) !important;
7048
+ [dir="ltr"] .x-padding--left-18 {
7049
+ padding-left: var(--x-size-base-18) !important;
7110
7050
  }
7111
- [dir="rtl"] .x-padding--left-01 {
7112
- padding-right: var(--x-size-base-01) !important;
7051
+ [dir="rtl"] .x-padding--left-18 {
7052
+ padding-right: var(--x-size-base-18) !important;
7113
7053
  }
7114
- .x-padding--top-02 {
7115
- padding-top: var(--x-size-base-02) !important;
7054
+ .x-padding--top-19 {
7055
+ padding-top: var(--x-size-base-19) !important;
7116
7056
  }
7117
- .x-padding--bottom-02 {
7118
- padding-bottom: var(--x-size-base-02) !important;
7057
+ .x-padding--bottom-19 {
7058
+ padding-bottom: var(--x-size-base-19) !important;
7119
7059
  }
7120
- [dir="ltr"] .x-padding--right-02 {
7121
- padding-right: var(--x-size-base-02) !important;
7060
+ [dir="ltr"] .x-padding--right-19 {
7061
+ padding-right: var(--x-size-base-19) !important;
7122
7062
  }
7123
- [dir="rtl"] .x-padding--right-02 {
7124
- padding-left: var(--x-size-base-02) !important;
7063
+ [dir="rtl"] .x-padding--right-19 {
7064
+ padding-left: var(--x-size-base-19) !important;
7125
7065
  }
7126
- [dir="ltr"] .x-padding--left-02 {
7127
- padding-left: var(--x-size-base-02) !important;
7066
+ [dir="ltr"] .x-padding--left-19 {
7067
+ padding-left: var(--x-size-base-19) !important;
7128
7068
  }
7129
- [dir="rtl"] .x-padding--left-02 {
7130
- padding-right: var(--x-size-base-02) !important;
7069
+ [dir="rtl"] .x-padding--left-19 {
7070
+ padding-right: var(--x-size-base-19) !important;
7131
7071
  }
7132
- .x-padding--top-03 {
7133
- padding-top: var(--x-size-base-03) !important;
7072
+ .x-padding--top-20 {
7073
+ padding-top: var(--x-size-base-20) !important;
7134
7074
  }
7135
- .x-padding--bottom-03 {
7136
- padding-bottom: var(--x-size-base-03) !important;
7075
+ .x-padding--bottom-20 {
7076
+ padding-bottom: var(--x-size-base-20) !important;
7137
7077
  }
7138
- [dir="ltr"] .x-padding--right-03 {
7139
- padding-right: var(--x-size-base-03) !important;
7078
+ [dir="ltr"] .x-padding--right-20 {
7079
+ padding-right: var(--x-size-base-20) !important;
7140
7080
  }
7141
- [dir="rtl"] .x-padding--right-03 {
7142
- padding-left: var(--x-size-base-03) !important;
7081
+ [dir="rtl"] .x-padding--right-20 {
7082
+ padding-left: var(--x-size-base-20) !important;
7143
7083
  }
7144
- [dir="ltr"] .x-padding--left-03 {
7145
- padding-left: var(--x-size-base-03) !important;
7084
+ [dir="ltr"] .x-padding--left-20 {
7085
+ padding-left: var(--x-size-base-20) !important;
7146
7086
  }
7147
- [dir="rtl"] .x-padding--left-03 {
7148
- padding-right: var(--x-size-base-03) !important;
7087
+ [dir="rtl"] .x-padding--left-20 {
7088
+ padding-right: var(--x-size-base-20) !important;
7149
7089
  }
7150
- .x-padding--top-04 {
7151
- padding-top: var(--x-size-base-04) !important;
7090
+ .x-static {
7091
+ position: static !important;
7152
7092
  }
7153
- .x-padding--bottom-04 {
7154
- padding-bottom: var(--x-size-base-04) !important;
7093
+
7094
+ .x-fixed {
7095
+ position: fixed !important;
7155
7096
  }
7156
- [dir="ltr"] .x-padding--right-04 {
7157
- padding-right: var(--x-size-base-04) !important;
7097
+
7098
+ .x-absolute {
7099
+ position: absolute !important;
7158
7100
  }
7159
- [dir="rtl"] .x-padding--right-04 {
7160
- padding-left: var(--x-size-base-04) !important;
7101
+
7102
+ .x-relative {
7103
+ position: relative !important;
7161
7104
  }
7162
- [dir="ltr"] .x-padding--left-04 {
7163
- padding-left: var(--x-size-base-04) !important;
7105
+
7106
+ .x-sticky {
7107
+ position: sticky !important;
7164
7108
  }
7165
- [dir="rtl"] .x-padding--left-04 {
7166
- padding-right: var(--x-size-base-04) !important;
7109
+ .x-underline {
7110
+ text-decoration-line: underline;
7167
7111
  }
7168
- .x-padding--top-05 {
7169
- padding-top: var(--x-size-base-05) !important;
7112
+
7113
+ .x-overline {
7114
+ text-decoration-line: overline;
7170
7115
  }
7171
- .x-padding--bottom-05 {
7172
- padding-bottom: var(--x-size-base-05) !important;
7116
+
7117
+ .x-line-through {
7118
+ text-decoration-line: line-through;
7173
7119
  }
7174
- [dir="ltr"] .x-padding--right-05 {
7175
- padding-right: var(--x-size-base-05) !important;
7120
+
7121
+ .x-no-underline {
7122
+ text-decoration-line: none;
7176
7123
  }
7177
- [dir="rtl"] .x-padding--right-05 {
7178
- padding-left: var(--x-size-base-05) !important;
7124
+ .x-uppercase {
7125
+ text-transform: uppercase;
7179
7126
  }
7180
- [dir="ltr"] .x-padding--left-05 {
7181
- padding-left: var(--x-size-base-05) !important;
7127
+
7128
+ .x-lowercase {
7129
+ text-transform: lowercase;
7182
7130
  }
7183
- [dir="rtl"] .x-padding--left-05 {
7184
- padding-right: var(--x-size-base-05) !important;
7131
+
7132
+ .x-capitalize {
7133
+ text-transform: capitalize;
7185
7134
  }
7186
- .x-padding--top-06 {
7187
- padding-top: var(--x-size-base-06) !important;
7135
+
7136
+ .x-normal-case {
7137
+ text-transform: none;
7188
7138
  }
7189
- .x-padding--bottom-06 {
7190
- padding-bottom: var(--x-size-base-06) !important;
7139
+
7140
+ .x-font-weight--light {
7141
+ font-weight: var(--x-number-font-weight-base-light) !important;
7191
7142
  }
7192
- [dir="ltr"] .x-padding--right-06 {
7193
- padding-right: var(--x-size-base-06) !important;
7143
+ .x-font-weight--regular {
7144
+ font-weight: var(--x-number-font-weight-base-regular) !important;
7194
7145
  }
7195
- [dir="rtl"] .x-padding--right-06 {
7196
- padding-left: var(--x-size-base-06) !important;
7146
+ .x-font-weight--bold {
7147
+ font-weight: var(--x-number-font-weight-base-bold) !important;
7197
7148
  }
7198
- [dir="ltr"] .x-padding--left-06 {
7199
- padding-left: var(--x-size-base-06) !important;
7149
+ *[class*=x-border-width--] {
7150
+ border-width: 0;
7200
7151
  }
7201
- [dir="rtl"] .x-padding--left-06 {
7202
- padding-right: var(--x-size-base-06) !important;
7152
+
7153
+ .x-border-width--00 {
7154
+ border-width: 0px !important;
7155
+ border-style: solid !important;
7203
7156
  }
7204
- .x-padding--top-07 {
7205
- padding-top: var(--x-size-base-07) !important;
7157
+ .x-border-width--top-00 {
7158
+ border-top-width: 0px !important;
7159
+ border-style: solid !important;
7206
7160
  }
7207
- .x-padding--bottom-07 {
7208
- padding-bottom: var(--x-size-base-07) !important;
7161
+ .x-border-width--bottom-00 {
7162
+ border-bottom-width: 0px !important;
7163
+ border-style: solid !important;
7209
7164
  }
7210
- [dir="ltr"] .x-padding--right-07 {
7211
- padding-right: var(--x-size-base-07) !important;
7165
+ [dir="ltr"] .x-border-width--right-00 {
7166
+ border-right-width: 0px !important;
7212
7167
  }
7213
- [dir="rtl"] .x-padding--right-07 {
7214
- padding-left: var(--x-size-base-07) !important;
7168
+ [dir="rtl"] .x-border-width--right-00 {
7169
+ border-left-width: 0px !important;
7215
7170
  }
7216
- [dir="ltr"] .x-padding--left-07 {
7217
- padding-left: var(--x-size-base-07) !important;
7171
+ .x-border-width--right-00 {
7172
+ border-style: solid !important;
7218
7173
  }
7219
- [dir="rtl"] .x-padding--left-07 {
7220
- padding-right: var(--x-size-base-07) !important;
7174
+ [dir="ltr"] .x-border-width--left-00 {
7175
+ border-left-width: 0px !important;
7221
7176
  }
7222
- .x-padding--top-08 {
7223
- padding-top: var(--x-size-base-08) !important;
7177
+ [dir="rtl"] .x-border-width--left-00 {
7178
+ border-right-width: 0px !important;
7224
7179
  }
7225
- .x-padding--bottom-08 {
7226
- padding-bottom: var(--x-size-base-08) !important;
7180
+ .x-border-width--left-00 {
7181
+ border-style: solid !important;
7227
7182
  }
7228
- [dir="ltr"] .x-padding--right-08 {
7229
- padding-right: var(--x-size-base-08) !important;
7183
+ .x-border-width--01 {
7184
+ border-width: 1px !important;
7185
+ border-style: solid !important;
7230
7186
  }
7231
- [dir="rtl"] .x-padding--right-08 {
7232
- padding-left: var(--x-size-base-08) !important;
7187
+ .x-border-width--top-01 {
7188
+ border-top-width: 1px !important;
7189
+ border-style: solid !important;
7233
7190
  }
7234
- [dir="ltr"] .x-padding--left-08 {
7235
- padding-left: var(--x-size-base-08) !important;
7191
+ .x-border-width--bottom-01 {
7192
+ border-bottom-width: 1px !important;
7193
+ border-style: solid !important;
7236
7194
  }
7237
- [dir="rtl"] .x-padding--left-08 {
7238
- padding-right: var(--x-size-base-08) !important;
7195
+ [dir="ltr"] .x-border-width--right-01 {
7196
+ border-right-width: 1px !important;
7239
7197
  }
7240
- .x-padding--top-09 {
7241
- padding-top: var(--x-size-base-09) !important;
7198
+ [dir="rtl"] .x-border-width--right-01 {
7199
+ border-left-width: 1px !important;
7242
7200
  }
7243
- .x-padding--bottom-09 {
7244
- padding-bottom: var(--x-size-base-09) !important;
7201
+ .x-border-width--right-01 {
7202
+ border-style: solid !important;
7245
7203
  }
7246
- [dir="ltr"] .x-padding--right-09 {
7247
- padding-right: var(--x-size-base-09) !important;
7204
+ [dir="ltr"] .x-border-width--left-01 {
7205
+ border-left-width: 1px !important;
7248
7206
  }
7249
- [dir="rtl"] .x-padding--right-09 {
7250
- padding-left: var(--x-size-base-09) !important;
7207
+ [dir="rtl"] .x-border-width--left-01 {
7208
+ border-right-width: 1px !important;
7251
7209
  }
7252
- [dir="ltr"] .x-padding--left-09 {
7253
- padding-left: var(--x-size-base-09) !important;
7210
+ .x-border-width--left-01 {
7211
+ border-style: solid !important;
7254
7212
  }
7255
- [dir="rtl"] .x-padding--left-09 {
7256
- padding-right: var(--x-size-base-09) !important;
7213
+ .x-border-width--02 {
7214
+ border-width: 2px !important;
7215
+ border-style: solid !important;
7257
7216
  }
7258
- .x-padding--top-10 {
7259
- padding-top: var(--x-size-base-10) !important;
7217
+ .x-border-width--top-02 {
7218
+ border-top-width: 2px !important;
7219
+ border-style: solid !important;
7260
7220
  }
7261
- .x-padding--bottom-10 {
7262
- padding-bottom: var(--x-size-base-10) !important;
7221
+ .x-border-width--bottom-02 {
7222
+ border-bottom-width: 2px !important;
7223
+ border-style: solid !important;
7263
7224
  }
7264
- [dir="ltr"] .x-padding--right-10 {
7265
- padding-right: var(--x-size-base-10) !important;
7225
+ [dir="ltr"] .x-border-width--right-02 {
7226
+ border-right-width: 2px !important;
7266
7227
  }
7267
- [dir="rtl"] .x-padding--right-10 {
7268
- padding-left: var(--x-size-base-10) !important;
7228
+ [dir="rtl"] .x-border-width--right-02 {
7229
+ border-left-width: 2px !important;
7269
7230
  }
7270
- [dir="ltr"] .x-padding--left-10 {
7271
- padding-left: var(--x-size-base-10) !important;
7231
+ .x-border-width--right-02 {
7232
+ border-style: solid !important;
7272
7233
  }
7273
- [dir="rtl"] .x-padding--left-10 {
7274
- padding-right: var(--x-size-base-10) !important;
7234
+ [dir="ltr"] .x-border-width--left-02 {
7235
+ border-left-width: 2px !important;
7275
7236
  }
7276
- .x-padding--top-11 {
7277
- padding-top: var(--x-size-base-11) !important;
7237
+ [dir="rtl"] .x-border-width--left-02 {
7238
+ border-right-width: 2px !important;
7278
7239
  }
7279
- .x-padding--bottom-11 {
7280
- padding-bottom: var(--x-size-base-11) !important;
7240
+ .x-border-width--left-02 {
7241
+ border-style: solid !important;
7281
7242
  }
7282
- [dir="ltr"] .x-padding--right-11 {
7283
- padding-right: var(--x-size-base-11) !important;
7243
+ .x-border-width--03 {
7244
+ border-width: 3px !important;
7245
+ border-style: solid !important;
7284
7246
  }
7285
- [dir="rtl"] .x-padding--right-11 {
7286
- padding-left: var(--x-size-base-11) !important;
7247
+ .x-border-width--top-03 {
7248
+ border-top-width: 3px !important;
7249
+ border-style: solid !important;
7287
7250
  }
7288
- [dir="ltr"] .x-padding--left-11 {
7289
- padding-left: var(--x-size-base-11) !important;
7251
+ .x-border-width--bottom-03 {
7252
+ border-bottom-width: 3px !important;
7253
+ border-style: solid !important;
7290
7254
  }
7291
- [dir="rtl"] .x-padding--left-11 {
7292
- padding-right: var(--x-size-base-11) !important;
7255
+ [dir="ltr"] .x-border-width--right-03 {
7256
+ border-right-width: 3px !important;
7293
7257
  }
7294
- .x-padding--top-12 {
7295
- padding-top: var(--x-size-base-12) !important;
7258
+ [dir="rtl"] .x-border-width--right-03 {
7259
+ border-left-width: 3px !important;
7296
7260
  }
7297
- .x-padding--bottom-12 {
7298
- padding-bottom: var(--x-size-base-12) !important;
7261
+ .x-border-width--right-03 {
7262
+ border-style: solid !important;
7299
7263
  }
7300
- [dir="ltr"] .x-padding--right-12 {
7301
- padding-right: var(--x-size-base-12) !important;
7264
+ [dir="ltr"] .x-border-width--left-03 {
7265
+ border-left-width: 3px !important;
7302
7266
  }
7303
- [dir="rtl"] .x-padding--right-12 {
7304
- padding-left: var(--x-size-base-12) !important;
7267
+ [dir="rtl"] .x-border-width--left-03 {
7268
+ border-right-width: 3px !important;
7305
7269
  }
7306
- [dir="ltr"] .x-padding--left-12 {
7307
- padding-left: var(--x-size-base-12) !important;
7270
+ .x-border-width--left-03 {
7271
+ border-style: solid !important;
7308
7272
  }
7309
- [dir="rtl"] .x-padding--left-12 {
7310
- padding-right: var(--x-size-base-12) !important;
7273
+ .x-border-width--04 {
7274
+ border-width: 4px !important;
7275
+ border-style: solid !important;
7311
7276
  }
7312
- .x-padding--top-13 {
7313
- padding-top: var(--x-size-base-13) !important;
7277
+ .x-border-width--top-04 {
7278
+ border-top-width: 4px !important;
7279
+ border-style: solid !important;
7314
7280
  }
7315
- .x-padding--bottom-13 {
7316
- padding-bottom: var(--x-size-base-13) !important;
7281
+ .x-border-width--bottom-04 {
7282
+ border-bottom-width: 4px !important;
7283
+ border-style: solid !important;
7317
7284
  }
7318
- [dir="ltr"] .x-padding--right-13 {
7319
- padding-right: var(--x-size-base-13) !important;
7285
+ [dir="ltr"] .x-border-width--right-04 {
7286
+ border-right-width: 4px !important;
7320
7287
  }
7321
- [dir="rtl"] .x-padding--right-13 {
7322
- padding-left: var(--x-size-base-13) !important;
7288
+ [dir="rtl"] .x-border-width--right-04 {
7289
+ border-left-width: 4px !important;
7323
7290
  }
7324
- [dir="ltr"] .x-padding--left-13 {
7325
- padding-left: var(--x-size-base-13) !important;
7291
+ .x-border-width--right-04 {
7292
+ border-style: solid !important;
7326
7293
  }
7327
- [dir="rtl"] .x-padding--left-13 {
7328
- padding-right: var(--x-size-base-13) !important;
7294
+ [dir="ltr"] .x-border-width--left-04 {
7295
+ border-left-width: 4px !important;
7329
7296
  }
7330
- .x-padding--top-14 {
7331
- padding-top: var(--x-size-base-14) !important;
7297
+ [dir="rtl"] .x-border-width--left-04 {
7298
+ border-right-width: 4px !important;
7332
7299
  }
7333
- .x-padding--bottom-14 {
7334
- padding-bottom: var(--x-size-base-14) !important;
7300
+ .x-border-width--left-04 {
7301
+ border-style: solid !important;
7335
7302
  }
7336
- [dir="ltr"] .x-padding--right-14 {
7337
- padding-right: var(--x-size-base-14) !important;
7303
+ .x-border-width--05 {
7304
+ border-width: 5px !important;
7305
+ border-style: solid !important;
7306
+ }
7307
+ .x-border-width--top-05 {
7308
+ border-top-width: 5px !important;
7309
+ border-style: solid !important;
7338
7310
  }
7339
- [dir="rtl"] .x-padding--right-14 {
7340
- padding-left: var(--x-size-base-14) !important;
7311
+ .x-border-width--bottom-05 {
7312
+ border-bottom-width: 5px !important;
7313
+ border-style: solid !important;
7341
7314
  }
7342
- [dir="ltr"] .x-padding--left-14 {
7343
- padding-left: var(--x-size-base-14) !important;
7315
+ [dir="ltr"] .x-border-width--right-05 {
7316
+ border-right-width: 5px !important;
7344
7317
  }
7345
- [dir="rtl"] .x-padding--left-14 {
7346
- padding-right: var(--x-size-base-14) !important;
7318
+ [dir="rtl"] .x-border-width--right-05 {
7319
+ border-left-width: 5px !important;
7347
7320
  }
7348
- .x-padding--top-15 {
7349
- padding-top: var(--x-size-base-15) !important;
7321
+ .x-border-width--right-05 {
7322
+ border-style: solid !important;
7350
7323
  }
7351
- .x-padding--bottom-15 {
7352
- padding-bottom: var(--x-size-base-15) !important;
7324
+ [dir="ltr"] .x-border-width--left-05 {
7325
+ border-left-width: 5px !important;
7353
7326
  }
7354
- [dir="ltr"] .x-padding--right-15 {
7355
- padding-right: var(--x-size-base-15) !important;
7327
+ [dir="rtl"] .x-border-width--left-05 {
7328
+ border-right-width: 5px !important;
7356
7329
  }
7357
- [dir="rtl"] .x-padding--right-15 {
7358
- padding-left: var(--x-size-base-15) !important;
7330
+ .x-border-width--left-05 {
7331
+ border-style: solid !important;
7359
7332
  }
7360
- [dir="ltr"] .x-padding--left-15 {
7361
- padding-left: var(--x-size-base-15) !important;
7333
+ .x-border-width--06 {
7334
+ border-width: 6px !important;
7335
+ border-style: solid !important;
7362
7336
  }
7363
- [dir="rtl"] .x-padding--left-15 {
7364
- padding-right: var(--x-size-base-15) !important;
7337
+ .x-border-width--top-06 {
7338
+ border-top-width: 6px !important;
7339
+ border-style: solid !important;
7365
7340
  }
7366
- .x-padding--top-16 {
7367
- padding-top: var(--x-size-base-16) !important;
7341
+ .x-border-width--bottom-06 {
7342
+ border-bottom-width: 6px !important;
7343
+ border-style: solid !important;
7368
7344
  }
7369
- .x-padding--bottom-16 {
7370
- padding-bottom: var(--x-size-base-16) !important;
7345
+ [dir="ltr"] .x-border-width--right-06 {
7346
+ border-right-width: 6px !important;
7371
7347
  }
7372
- [dir="ltr"] .x-padding--right-16 {
7373
- padding-right: var(--x-size-base-16) !important;
7348
+ [dir="rtl"] .x-border-width--right-06 {
7349
+ border-left-width: 6px !important;
7374
7350
  }
7375
- [dir="rtl"] .x-padding--right-16 {
7376
- padding-left: var(--x-size-base-16) !important;
7351
+ .x-border-width--right-06 {
7352
+ border-style: solid !important;
7377
7353
  }
7378
- [dir="ltr"] .x-padding--left-16 {
7379
- padding-left: var(--x-size-base-16) !important;
7354
+ [dir="ltr"] .x-border-width--left-06 {
7355
+ border-left-width: 6px !important;
7380
7356
  }
7381
- [dir="rtl"] .x-padding--left-16 {
7382
- padding-right: var(--x-size-base-16) !important;
7357
+ [dir="rtl"] .x-border-width--left-06 {
7358
+ border-right-width: 6px !important;
7383
7359
  }
7384
- .x-padding--top-17 {
7385
- padding-top: var(--x-size-base-17) !important;
7360
+ .x-border-width--left-06 {
7361
+ border-style: solid !important;
7386
7362
  }
7387
- .x-padding--bottom-17 {
7388
- padding-bottom: var(--x-size-base-17) !important;
7363
+ .x-border-width--07 {
7364
+ border-width: 7px !important;
7365
+ border-style: solid !important;
7389
7366
  }
7390
- [dir="ltr"] .x-padding--right-17 {
7391
- padding-right: var(--x-size-base-17) !important;
7367
+ .x-border-width--top-07 {
7368
+ border-top-width: 7px !important;
7369
+ border-style: solid !important;
7392
7370
  }
7393
- [dir="rtl"] .x-padding--right-17 {
7394
- padding-left: var(--x-size-base-17) !important;
7371
+ .x-border-width--bottom-07 {
7372
+ border-bottom-width: 7px !important;
7373
+ border-style: solid !important;
7395
7374
  }
7396
- [dir="ltr"] .x-padding--left-17 {
7397
- padding-left: var(--x-size-base-17) !important;
7375
+ [dir="ltr"] .x-border-width--right-07 {
7376
+ border-right-width: 7px !important;
7398
7377
  }
7399
- [dir="rtl"] .x-padding--left-17 {
7400
- padding-right: var(--x-size-base-17) !important;
7378
+ [dir="rtl"] .x-border-width--right-07 {
7379
+ border-left-width: 7px !important;
7401
7380
  }
7402
- .x-padding--top-18 {
7403
- padding-top: var(--x-size-base-18) !important;
7381
+ .x-border-width--right-07 {
7382
+ border-style: solid !important;
7404
7383
  }
7405
- .x-padding--bottom-18 {
7406
- padding-bottom: var(--x-size-base-18) !important;
7384
+ [dir="ltr"] .x-border-width--left-07 {
7385
+ border-left-width: 7px !important;
7407
7386
  }
7408
- [dir="ltr"] .x-padding--right-18 {
7409
- padding-right: var(--x-size-base-18) !important;
7387
+ [dir="rtl"] .x-border-width--left-07 {
7388
+ border-right-width: 7px !important;
7410
7389
  }
7411
- [dir="rtl"] .x-padding--right-18 {
7412
- padding-left: var(--x-size-base-18) !important;
7390
+ .x-border-width--left-07 {
7391
+ border-style: solid !important;
7413
7392
  }
7414
- [dir="ltr"] .x-padding--left-18 {
7415
- padding-left: var(--x-size-base-18) !important;
7393
+ .x-border-width--08 {
7394
+ border-width: 8px !important;
7395
+ border-style: solid !important;
7416
7396
  }
7417
- [dir="rtl"] .x-padding--left-18 {
7418
- padding-right: var(--x-size-base-18) !important;
7397
+ .x-border-width--top-08 {
7398
+ border-top-width: 8px !important;
7399
+ border-style: solid !important;
7419
7400
  }
7420
- .x-padding--top-19 {
7421
- padding-top: var(--x-size-base-19) !important;
7401
+ .x-border-width--bottom-08 {
7402
+ border-bottom-width: 8px !important;
7403
+ border-style: solid !important;
7422
7404
  }
7423
- .x-padding--bottom-19 {
7424
- padding-bottom: var(--x-size-base-19) !important;
7405
+ [dir="ltr"] .x-border-width--right-08 {
7406
+ border-right-width: 8px !important;
7425
7407
  }
7426
- [dir="ltr"] .x-padding--right-19 {
7427
- padding-right: var(--x-size-base-19) !important;
7408
+ [dir="rtl"] .x-border-width--right-08 {
7409
+ border-left-width: 8px !important;
7428
7410
  }
7429
- [dir="rtl"] .x-padding--right-19 {
7430
- padding-left: var(--x-size-base-19) !important;
7411
+ .x-border-width--right-08 {
7412
+ border-style: solid !important;
7431
7413
  }
7432
- [dir="ltr"] .x-padding--left-19 {
7433
- padding-left: var(--x-size-base-19) !important;
7414
+ [dir="ltr"] .x-border-width--left-08 {
7415
+ border-left-width: 8px !important;
7434
7416
  }
7435
- [dir="rtl"] .x-padding--left-19 {
7436
- padding-right: var(--x-size-base-19) !important;
7417
+ [dir="rtl"] .x-border-width--left-08 {
7418
+ border-right-width: 8px !important;
7437
7419
  }
7438
- .x-padding--top-20 {
7439
- padding-top: var(--x-size-base-20) !important;
7420
+ .x-border-width--left-08 {
7421
+ border-style: solid !important;
7440
7422
  }
7441
- .x-padding--bottom-20 {
7442
- padding-bottom: var(--x-size-base-20) !important;
7423
+ .x-border-width--09 {
7424
+ border-width: 9px !important;
7425
+ border-style: solid !important;
7443
7426
  }
7444
- [dir="ltr"] .x-padding--right-20 {
7445
- padding-right: var(--x-size-base-20) !important;
7427
+ .x-border-width--top-09 {
7428
+ border-top-width: 9px !important;
7429
+ border-style: solid !important;
7446
7430
  }
7447
- [dir="rtl"] .x-padding--right-20 {
7448
- padding-left: var(--x-size-base-20) !important;
7431
+ .x-border-width--bottom-09 {
7432
+ border-bottom-width: 9px !important;
7433
+ border-style: solid !important;
7449
7434
  }
7450
- [dir="ltr"] .x-padding--left-20 {
7451
- padding-left: var(--x-size-base-20) !important;
7435
+ [dir="ltr"] .x-border-width--right-09 {
7436
+ border-right-width: 9px !important;
7452
7437
  }
7453
- [dir="rtl"] .x-padding--left-20 {
7454
- padding-right: var(--x-size-base-20) !important;
7438
+ [dir="rtl"] .x-border-width--right-09 {
7439
+ border-left-width: 9px !important;
7455
7440
  }
7456
- .x-static {
7457
- position: static !important;
7441
+ .x-border-width--right-09 {
7442
+ border-style: solid !important;
7458
7443
  }
7459
-
7460
- .x-fixed {
7461
- position: fixed !important;
7444
+ [dir="ltr"] .x-border-width--left-09 {
7445
+ border-left-width: 9px !important;
7462
7446
  }
7463
-
7464
- .x-absolute {
7465
- position: absolute !important;
7447
+ [dir="rtl"] .x-border-width--left-09 {
7448
+ border-right-width: 9px !important;
7466
7449
  }
7467
-
7468
- .x-relative {
7469
- position: relative !important;
7450
+ .x-border-width--left-09 {
7451
+ border-style: solid !important;
7470
7452
  }
7471
-
7472
- .x-sticky {
7473
- position: sticky !important;
7453
+ .x-border-width--10 {
7454
+ border-width: 10px !important;
7455
+ border-style: solid !important;
7474
7456
  }
7475
- .x-underline {
7476
- text-decoration-line: underline;
7457
+ .x-border-width--top-10 {
7458
+ border-top-width: 10px !important;
7459
+ border-style: solid !important;
7477
7460
  }
7478
-
7479
- .x-overline {
7480
- text-decoration-line: overline;
7461
+ .x-border-width--bottom-10 {
7462
+ border-bottom-width: 10px !important;
7463
+ border-style: solid !important;
7481
7464
  }
7482
-
7483
- .x-line-through {
7484
- text-decoration-line: line-through;
7465
+ [dir="ltr"] .x-border-width--right-10 {
7466
+ border-right-width: 10px !important;
7485
7467
  }
7486
-
7487
- .x-no-underline {
7488
- text-decoration-line: none;
7468
+ [dir="rtl"] .x-border-width--right-10 {
7469
+ border-left-width: 10px !important;
7489
7470
  }
7490
- .x-uppercase {
7491
- text-transform: uppercase;
7471
+ .x-border-width--right-10 {
7472
+ border-style: solid !important;
7492
7473
  }
7493
-
7494
- .x-lowercase {
7495
- text-transform: lowercase;
7474
+ [dir="ltr"] .x-border-width--left-10 {
7475
+ border-left-width: 10px !important;
7496
7476
  }
7497
-
7498
- .x-capitalize {
7499
- text-transform: capitalize;
7477
+ [dir="rtl"] .x-border-width--left-10 {
7478
+ border-right-width: 10px !important;
7500
7479
  }
7501
-
7502
- .x-normal-case {
7503
- text-transform: none;
7480
+ .x-border-width--left-10 {
7481
+ border-style: solid !important;
7504
7482
  }
7483
+ :root {
7484
+ --x-color-background-button-default: var(--x-color-base-lead);
7485
+ --x-color-border-button-default: var(--x-color-background-button-default);
7486
+ --x-color-text-button-default: var(--x-color-base-neutral-100);
7487
+ --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
7488
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
7489
+ --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
7490
+ --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
7491
+ --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
7492
+ --x-size-border-width-button-default: var(--x-size-border-width-base);
7493
+ --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
7494
+ --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
7495
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
7496
+ --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
7497
+ --x-size-height-button-default: var(--x-size-base-08);
7498
+ --x-size-padding-right-button-default: var(--x-size-base-05);
7499
+ --x-size-padding-left-button-default: var(--x-size-base-05);
7500
+ --x-size-gap-button-default: var(--x-size-base-03);
7501
+ --x-font-family-button-default: var(--x-font-family-text);
7502
+ --x-size-font-button-default: var(--x-size-font-text);
7503
+ --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
7504
+ --x-size-line-height-button-default: var(--x-size-line-height-text);
7505
+ }