@sc-360-v2/storefront-cms-library 0.4.51 → 0.4.52

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 (38) hide show
  1. package/dist/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/cart-details.scss +3207 -3207
  4. package/dist/cart.scss +271 -269
  5. package/dist/cartAttributes.scss +932 -935
  6. package/dist/checkout.scss +6496 -6460
  7. package/dist/dropdownTemplate.scss +4 -1
  8. package/dist/filters.scss +36 -4
  9. package/dist/functions.scss +91 -1
  10. package/dist/icon-list.scss +277 -268
  11. package/dist/language-selector.scss +702 -528
  12. package/dist/layouter.scss +307 -294
  13. package/dist/login.scss +1605 -1473
  14. package/dist/menu-v2.scss +752 -730
  15. package/dist/my-templates.scss +464 -463
  16. package/dist/myTemplates.scss +5 -5
  17. package/dist/order-status.scss +1877 -1856
  18. package/dist/product-image-allocation.scss +1365 -0
  19. package/dist/product-image.scss +2 -1
  20. package/dist/product-sizechart.scss +1826 -1826
  21. package/dist/profile.scss +23 -20
  22. package/dist/repeater-embla-controls.scss +6 -0
  23. package/dist/repeater.scss +920 -915
  24. package/dist/search.scss +361 -296
  25. package/dist/static-global.scss +5 -0
  26. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  27. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  28. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  29. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  30. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  31. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  33. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  34. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  35. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  36. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  37. package/dist/user-elements.scss +2555 -2471
  38. package/package.json +1 -1
@@ -1,268 +1,277 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $item: "flex__icon_list_item";
6
- $icon: "flex__ili_span_icn";
7
- $text: "flex__ili_span_txt";
8
- $textContaner: "flex__ili__container";
9
- $desc: "flex__ili__description";
10
- $pos2: (
11
- hrz: (
12
- keys: (
13
- 0: inline,
14
- after: (
15
- top: 0,
16
- right: 0,
17
- height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
18
- width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
19
- ),
20
- ),
21
- after: (
22
- start: (
23
- top: 0px,
24
- ),
25
- center: (
26
- top: 50%,
27
- transform: translateY(-50%),
28
- ),
29
- end: (
30
- top: auto,
31
- bottom: 0,
32
- ),
33
- ),
34
- ),
35
- vtl: (
36
- keys: (
37
- 0: block,
38
- after: (
39
- bottom: 0,
40
- left: 0,
41
- width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
42
- height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
43
- ),
44
- ),
45
- after: (
46
- start: (
47
- left: 0px,
48
- ),
49
- center: (
50
- left: 50%,
51
- transform: translateX(-50%),
52
- ),
53
- end: (
54
- left: auto,
55
- right: 0,
56
- ),
57
- ),
58
- ),
59
- );
60
- [data-div-type="element"] {
61
- &[data-element-type="icon-list"] {
62
- & > .wrapper {
63
- width: 100%;
64
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
65
- padding: prepareMediaVariable(--_ctm-lt-pg);
66
- display: var(--_d-flex) !important;
67
-
68
- &.hrz {
69
- flex-direction: row;
70
- // justify-content: space-between;
71
- align-items: prepareMediaVariable(--_ctm-lt-an-is);
72
- }
73
- &.vtl {
74
- flex-direction: column;
75
- justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
76
- }
77
-
78
- &[data-show-border="true"] {
79
- border-color: prepareMediaVariable(--_ctm-dn-lt-br-cr);
80
- border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
81
- border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
82
- }
83
- border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
84
- background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
85
-
86
- &[data-show-boxshadow="true"] {
87
- box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
88
- prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
89
- prepareMediaVariable(--_ctm-dn-lt-sw-cr);
90
- }
91
-
92
- &[data-show-divider="true"] {
93
- & > .#{$item} {
94
- &:not(:last-of-type) {
95
- position: var(--_p-relative);
96
-
97
- @each $key, $value in $pos2 {
98
- $isVertical: $key == vtl;
99
- $keys: map.get($value, keys);
100
- $afterKeys: map.get($keys, after);
101
- $afterPos: map.get($value, after);
102
-
103
- &:is(.#{$key} > *) {
104
- padding-#{map.get($keys, 0)}-end: calc(
105
- #{prepareMediaVariable(--_ctm-lt-im-gp)} +
106
- #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
107
- );
108
-
109
- @each $k, $v in $afterKeys {
110
- &::after {
111
- #{$k}: #{$v};
112
- }
113
- }
114
-
115
- @each $key1, $value1 in $afterPos {
116
- &:is([data-show-pos1="#{$key1}"] > *) {
117
- &::after {
118
- @each $k, $v in $value1 {
119
- #{$k}: #{$v};
120
- }
121
- }
122
- }
123
- }
124
- }
125
- }
126
- &::after {
127
- content: "";
128
- position: var(--_p-absolute);
129
- background: prepareMediaVariable(--_ctm-dn-lt-dr-cr);
130
- border-radius: prepareMediaVariable(--_ctm-dn-lt-dr-br-rs);
131
- }
132
- }
133
- }
134
- }
135
-
136
- & > div {
137
- &.#{$item} {
138
- display: var(--_d-flex);
139
- gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp));
140
-
141
- &:hover {
142
- --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp)};
143
- --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
144
- --_in-hr-as: #{prepareMediaVariable(--_ctm-dn-in-hr-se-vl-at)};
145
- --_in-hr-cr: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-c1)};
146
-
147
- --_txt-ht-ff: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-fy)};
148
- --_txt-ht-fs: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se)};
149
- --_txt-ht-cr: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-cr)};
150
- --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
151
- --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
152
- --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
153
- --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
154
- --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
155
- --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
156
- }
157
-
158
- & > span {
159
- &.#{$icon} {
160
- display: var(--_d-flex);
161
- align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
162
-
163
- & > svg {
164
- width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
165
- height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
166
-
167
- path {
168
- stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
169
- }
170
- }
171
- }
172
- }
173
-
174
- & > div {
175
- &.#{$textContaner} {
176
- display: var(--_d-flex);
177
- flex-grow: 1;
178
- flex-direction: column;
179
- align-self: prepareMediaVariable(--_ctm-dn-tt-cr-vl-at);
180
- padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
181
- row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
182
- &[data-show-divider="true"] {
183
- // margin-inline-start: calc(
184
- // #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
185
- // #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
186
- // );
187
- margin-inline-start: calc(
188
- var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp)) +
189
- var(
190
- --_ctm-mob-dn-tt-cr-dr-wt,
191
- var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
192
- )
193
- );
194
- position: relative;
195
- @each $key, $value in map.get(map.get($pos2, hrz), after) {
196
- &[data-divider-pos="#{$key}"] {
197
- &::before {
198
- @each $key1, $value1 in $value {
199
- #{$key1}: #{$value1};
200
- }
201
- }
202
- }
203
- }
204
- &::before {
205
- content: "";
206
- background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
207
- position: absolute;
208
- // left: calc(
209
- // -1 *
210
- // calc(
211
- // #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
212
- // #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
213
- // )
214
- // );
215
- left: calc(
216
- calc(
217
- -1 *
218
- var(
219
- --_ctm-mob-dn-tt-cr-dr-wt,
220
- var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
221
- )
222
- ) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp))
223
- );
224
- width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
225
- height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
226
- border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
227
- }
228
- }
229
- & > .#{$text} {
230
- &,
231
- * {
232
- font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
233
- font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
234
- color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
235
- font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
236
- text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
237
- font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
238
- text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
239
- letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
240
- line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
241
- }
242
- }
243
-
244
- & > .#{$desc} {
245
- &,
246
- * {
247
- font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
248
- font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
249
- color: prepareMediaVariable(--_ctm-dn-dn-cr);
250
- font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
251
- text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
252
- font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
253
- text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
254
- letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
255
- line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
256
- }
257
- }
258
- a {
259
- color: inherit;
260
- text-decoration: none;
261
- }
262
- }
263
- }
264
- }
265
- }
266
- }
267
- }
268
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $item: "flex__icon_list_item";
6
+ $icon: "flex__ili_span_icn";
7
+ $text: "flex__ili_span_txt";
8
+ $textContaner: "flex__ili__container";
9
+ $desc: "flex__ili__description";
10
+ $pos2: (
11
+ hrz: (
12
+ keys: (
13
+ 0: inline,
14
+ after: (
15
+ top: 0,
16
+ right: 0,
17
+ height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
18
+ width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
19
+ ),
20
+ ),
21
+ after: (
22
+ start: (
23
+ top: 0px,
24
+ ),
25
+ center: (
26
+ top: 50%,
27
+ transform: translateY(-50%),
28
+ ),
29
+ end: (
30
+ top: auto,
31
+ bottom: 0,
32
+ ),
33
+ ),
34
+ ),
35
+ vtl: (
36
+ keys: (
37
+ 0: block,
38
+ after: (
39
+ bottom: 0,
40
+ left: 0,
41
+ width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
42
+ height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
43
+ ),
44
+ ),
45
+ after: (
46
+ start: (
47
+ left: 0px,
48
+ ),
49
+ center: (
50
+ left: 50%,
51
+ transform: translateX(-50%),
52
+ ),
53
+ end: (
54
+ left: auto,
55
+ right: 0,
56
+ ),
57
+ ),
58
+ ),
59
+ );
60
+ [data-div-type="element"] {
61
+ &[data-element-type="icon-list"] {
62
+ & > .wrapper {
63
+ width: 100%;
64
+ // gap: prepareMediaVariable(--_ctm-lt-im-gp);
65
+ row-gap: prepareMediaVariable(--_ctm-lt-rw-gp);
66
+ column-gap: prepareMediaVariable(--_ctm-lt-cn-gp);
67
+ padding: prepareMediaVariable(--_ctm-lt-pg);
68
+ display: var(--_d-flex) !important;
69
+
70
+ &.hrz {
71
+ flex-direction: row;
72
+ // justify-content: space-between;
73
+ align-items: prepareMediaVariable(--_ctm-lt-an-is);
74
+ justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
75
+ flex-wrap: prepareMediaVariable(--_ctm-lt-fx-wp);
76
+ --_ctm-custom-lt-im-gp: #{prepareMediaVariable(--_ctm-lt-cn-gp)};
77
+ }
78
+ &.vtl {
79
+ flex-direction: column;
80
+ justify-content: prepareMediaVariable(--_ctm-lt-an-is);
81
+ align-items: prepareMediaVariable(--_ctm-lt-jy-ct);
82
+ --_ctm-custom-lt-im-gp: #{prepareMediaVariable(--_ctm-lt-rw-gp)};
83
+ }
84
+
85
+ &[data-show-border="true"] {
86
+ border-color: prepareMediaVariable(--_ctm-dn-lt-br-cr);
87
+ border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
88
+ border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
89
+ }
90
+ border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
91
+ background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
92
+
93
+ &[data-show-boxshadow="true"] {
94
+ box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
95
+ prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
96
+ prepareMediaVariable(--_ctm-dn-lt-sw-cr);
97
+ }
98
+
99
+ &[data-show-divider="true"] {
100
+ & > .#{$item} {
101
+ // &:not(:last-of-type)
102
+ &:not(:last-child) {
103
+ position: var(--_p-relative);
104
+
105
+ @each $key, $value in $pos2 {
106
+ $isVertical: $key == vtl;
107
+ $keys: map.get($value, keys);
108
+ $afterKeys: map.get($keys, after);
109
+ $afterPos: map.get($value, after);
110
+
111
+ &:is(.#{$key} > *) {
112
+ // padding-#{map.get($keys, 0)}-end: calc(
113
+ // #{prepareMediaVariable(--_ctm-lt-im-gp)} +
114
+ // #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
115
+ // );
116
+ padding-#{map.get($keys, 0)}-end: calc(
117
+ #{var(--_ctm-custom-lt-im-gp)} + #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
118
+ );
119
+
120
+ @each $k, $v in $afterKeys {
121
+ &::after {
122
+ #{$k}: #{$v};
123
+ }
124
+ }
125
+
126
+ @each $key1, $value1 in $afterPos {
127
+ &:is([data-show-pos1="#{$key1}"] > *) {
128
+ &::after {
129
+ @each $k, $v in $value1 {
130
+ #{$k}: #{$v};
131
+ }
132
+ }
133
+ }
134
+ }
135
+ }
136
+ }
137
+ &::after {
138
+ content: "";
139
+ position: var(--_p-absolute);
140
+ background: prepareMediaVariable(--_ctm-dn-lt-dr-cr);
141
+ border-radius: prepareMediaVariable(--_ctm-dn-lt-dr-br-rs);
142
+ }
143
+ }
144
+ }
145
+ }
146
+
147
+ & > .#{$item} {
148
+ display: var(--_d-flex);
149
+ gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp));
150
+
151
+ &:hover {
152
+ --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp)};
153
+ --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
154
+ --_in-hr-as: #{prepareMediaVariable(--_ctm-dn-in-hr-se-vl-at)};
155
+ --_in-hr-cr: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-c1)};
156
+
157
+ --_txt-ht-ff: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-fy)};
158
+ --_txt-ht-fs: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se)};
159
+ --_txt-ht-cr: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-cr)};
160
+ --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
161
+ --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
162
+ --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
163
+ --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
164
+ --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
165
+ --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
166
+ }
167
+
168
+ & > span {
169
+ &.#{$icon} {
170
+ display: var(--_d-flex);
171
+ align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
172
+
173
+ & > svg {
174
+ width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
175
+ height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
176
+
177
+ path {
178
+ stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ & > div {
185
+ &.#{$textContaner} {
186
+ display: var(--_d-flex);
187
+ flex-grow: 1;
188
+ flex-direction: column;
189
+ align-self: prepareMediaVariable(--_ctm-dn-tt-cr-vl-at);
190
+ padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
191
+ row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
192
+ &[data-show-divider="true"] {
193
+ // margin-inline-start: calc(
194
+ // #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
195
+ // #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
196
+ // );
197
+ margin-inline-start: calc(
198
+ var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp)) +
199
+ var(
200
+ --_ctm-mob-dn-tt-cr-dr-wt,
201
+ var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
202
+ )
203
+ );
204
+ position: relative;
205
+ @each $key, $value in map.get(map.get($pos2, hrz), after) {
206
+ &[data-divider-pos="#{$key}"] {
207
+ &::before {
208
+ @each $key1, $value1 in $value {
209
+ #{$key1}: #{$value1};
210
+ }
211
+ }
212
+ }
213
+ }
214
+ &::before {
215
+ content: "";
216
+ background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
217
+ position: absolute;
218
+ // left: calc(
219
+ // -1 *
220
+ // calc(
221
+ // #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
222
+ // #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
223
+ // )
224
+ // );
225
+ left: calc(
226
+ calc(
227
+ -1 *
228
+ var(
229
+ --_ctm-mob-dn-tt-cr-dr-wt,
230
+ var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
231
+ )
232
+ ) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp))
233
+ );
234
+ width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
235
+ height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
236
+ border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
237
+ }
238
+ }
239
+ & > .#{$text} {
240
+ &,
241
+ * {
242
+ font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
243
+ font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
244
+ color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
245
+ font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
246
+ text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
247
+ font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
248
+ text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
249
+ letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
250
+ line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
251
+ }
252
+ }
253
+
254
+ & > .#{$desc} {
255
+ &,
256
+ * {
257
+ font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
258
+ font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
259
+ color: prepareMediaVariable(--_ctm-dn-dn-cr);
260
+ font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
261
+ text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
262
+ font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
263
+ text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
264
+ letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
265
+ line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
266
+ }
267
+ }
268
+ a {
269
+ color: inherit;
270
+ text-decoration: none;
271
+ }
272
+ }
273
+ }
274
+ }
275
+ }
276
+ }
277
+ }