@salla.sa/twilight-components 1.0.100 → 1.0.107

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 (109) hide show
  1. package/README.md +8 -1
  2. package/dist/cjs/{index-3771e52a.js → index-b4140db0.js} +18 -11
  3. package/dist/cjs/loader.cjs.js +3 -3
  4. package/dist/cjs/salla-add-product-button.cjs.entry.js +85 -0
  5. package/dist/cjs/{salla-add-product-button_6.cjs.entry.js → salla-branches_13.cjs.entry.js} +1015 -80
  6. package/dist/cjs/salla-conditional-fields.cjs.entry.js +4 -2
  7. package/dist/cjs/salla-installment.cjs.entry.js +1 -1
  8. package/dist/cjs/salla-quantity-input.cjs.entry.js +2 -2
  9. package/dist/cjs/twilight-components.cjs.js +3 -3
  10. package/dist/collection/collection-manifest.json +1 -1
  11. package/dist/collection/components/salla-add-product-button/salla-add-product-button.js +13 -28
  12. package/dist/collection/components/salla-branches/salla-branches.css +0 -3
  13. package/dist/collection/components/salla-branches/salla-branches.js +9 -5
  14. package/dist/collection/components/salla-button/salla-button.css +0 -3
  15. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +3 -1
  16. package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.css +0 -3
  17. package/dist/collection/components/salla-installment/salla-installment.css +0 -3
  18. package/dist/collection/components/salla-localization-modal/salla-localization-modal.css +2 -5
  19. package/dist/collection/components/salla-localization-modal/salla-localization-modal.js +3 -2
  20. package/dist/collection/components/salla-login-modal/salla-login-modal.css +0 -3
  21. package/dist/collection/components/salla-login-modal/salla-login-modal.js +16 -5
  22. package/dist/collection/components/salla-modal/salla-modal.css +0 -3
  23. package/dist/collection/components/salla-modal/salla-modal.js +12 -11
  24. package/dist/collection/components/salla-offer-modal/salla-offer-modal.css +0 -3
  25. package/dist/collection/components/salla-offer-modal/salla-offer-modal.js +1 -0
  26. package/dist/collection/components/salla-product-availability/salla-product-availability.css +0 -3
  27. package/dist/collection/components/salla-product-availability/salla-product-availability.js +18 -13
  28. package/dist/collection/components/salla-quantity-input/salla-quantity-input.css +0 -3
  29. package/dist/collection/components/salla-quantity-input/salla-quantity-input.js +2 -2
  30. package/dist/collection/components/salla-rating-modal/salla-rating-modal.css +0 -3
  31. package/dist/collection/components/salla-rating-stars/salla-rating-stars.css +0 -3
  32. package/dist/collection/components/salla-search/salla-search.css +0 -3
  33. package/dist/collection/components/salla-tel-input/salla-tel-input.css +2 -5
  34. package/dist/collection/components/salla-verify/salla-verify.css +0 -3
  35. package/dist/collection/global/app.js +23 -0
  36. package/dist/collection/plugins/tailwind-theme/index.js +3 -4
  37. package/dist/components/index.d.ts +17 -5
  38. package/dist/components/index.js +17 -0
  39. package/dist/components/salla-add-product-button.js +14 -12
  40. package/dist/components/salla-branches.js +8 -4
  41. package/dist/components/salla-conditional-fields.js +3 -1
  42. package/dist/components/salla-localization-modal.js +4 -3
  43. package/dist/components/salla-login-modal.js +11 -3
  44. package/dist/components/salla-modal2.js +6 -6
  45. package/dist/components/salla-offer-modal.js +1 -0
  46. package/dist/components/salla-product-availability2.js +17 -12
  47. package/dist/components/salla-quantity-input.js +1 -1
  48. package/dist/components/salla-tel-input2.js +3 -3
  49. package/dist/esm/{index-ee729716.js → index-20b84fd0.js} +18 -11
  50. package/dist/esm/loader.js +3 -3
  51. package/dist/esm/polyfills/css-shim.js +1 -1
  52. package/dist/esm/salla-add-product-button.entry.js +81 -0
  53. package/dist/esm/{salla-add-product-button_6.entry.js → salla-branches_13.entry.js} +1008 -80
  54. package/dist/esm/salla-conditional-fields.entry.js +4 -2
  55. package/dist/esm/salla-installment.entry.js +1 -1
  56. package/dist/esm/salla-quantity-input.entry.js +2 -2
  57. package/dist/esm/twilight-components.js +3 -3
  58. package/dist/twilight-components/{p-f0f7a51b.entry.js → p-15fac4f2.entry.js} +1 -1
  59. package/dist/twilight-components/p-27d01075.entry.js +4 -0
  60. package/dist/twilight-components/{p-9a75d4ec.entry.js → p-5ee94c9e.entry.js} +1 -1
  61. package/dist/twilight-components/p-6f4f4260.entry.js +4 -0
  62. package/dist/twilight-components/p-7b5b8647.entry.js +4 -0
  63. package/dist/twilight-components/p-c2bef5f2.js +5 -0
  64. package/dist/twilight-components/twilight-components.esm.js +1 -1
  65. package/dist/types/components/salla-add-product-button/salla-add-product-button.d.ts +1 -2
  66. package/dist/types/components/salla-login-modal/salla-login-modal.d.ts +1 -1
  67. package/dist/types/components.d.ts +17 -13
  68. package/dist/types/global/app.d.ts +3 -0
  69. package/example/assets/tailwind.css +3938 -3
  70. package/example/assets/translations.js +4981 -0
  71. package/example/index.html +177 -155
  72. package/package.json +17 -14
  73. package/dist/cjs/salla-branches.cjs.entry.js +0 -94
  74. package/dist/cjs/salla-infinite-scroll.cjs.entry.js +0 -93
  75. package/dist/cjs/salla-localization-modal.cjs.entry.js +0 -120
  76. package/dist/cjs/salla-login-modal.cjs.entry.js +0 -196
  77. package/dist/cjs/salla-offer-modal.cjs.entry.js +0 -144
  78. package/dist/cjs/salla-rating-modal.cjs.entry.js +0 -177
  79. package/dist/cjs/salla-rating-stars.cjs.entry.js +0 -76
  80. package/dist/cjs/salla-verify.cjs.entry.js +0 -168
  81. package/dist/esm/salla-branches.entry.js +0 -90
  82. package/dist/esm/salla-infinite-scroll.entry.js +0 -89
  83. package/dist/esm/salla-localization-modal.entry.js +0 -116
  84. package/dist/esm/salla-login-modal.entry.js +0 -192
  85. package/dist/esm/salla-offer-modal.entry.js +0 -140
  86. package/dist/esm/salla-rating-modal.entry.js +0 -173
  87. package/dist/esm/salla-rating-stars.entry.js +0 -72
  88. package/dist/esm/salla-verify.entry.js +0 -164
  89. package/dist/twilight-components/p-00c61851.entry.js +0 -4
  90. package/dist/twilight-components/p-058ae0f8.entry.js +0 -4
  91. package/dist/twilight-components/p-27530b47.entry.js +0 -4
  92. package/dist/twilight-components/p-3f90fa16.entry.js +0 -4
  93. package/dist/twilight-components/p-5c1d4ef9.entry.js +0 -4
  94. package/dist/twilight-components/p-714ff288.entry.js +0 -4
  95. package/dist/twilight-components/p-77af5fef.entry.js +0 -4
  96. package/dist/twilight-components/p-a268e672.entry.js +0 -4
  97. package/dist/twilight-components/p-d566f357.js +0 -4
  98. package/dist/twilight-components/p-df7417e4.entry.js +0 -4
  99. package/dist/twilight-components/p-e97c00e1.entry.js +0 -4
  100. package/example/.DS_Store +0 -0
  101. package/example/.gitignore +0 -2
  102. package/example/dist/.DS_Store +0 -0
  103. package/example/dist/demo.js +0 -153
  104. package/example/dist/flags.png +0 -0
  105. package/example/dist/flags@2x.png +0 -0
  106. package/example/dist/intlTelInput.min.css +0 -1
  107. package/example/dist/tailwind.css +0 -3856
  108. package/example/dist/translations.js +0 -1
  109. package/example/dist/twilight.js +0 -437
@@ -1,3856 +0,0 @@
1
- /*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
2
-
3
- /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
4
-
5
- /*
6
- Document
7
- ========
8
- */
9
-
10
- /**
11
- Use a better box model (opinionated).
12
- */
13
-
14
- *,
15
- ::before,
16
- ::after {
17
- box-sizing: border-box;
18
- }
19
-
20
- /**
21
- Use a more readable tab size (opinionated).
22
- */
23
-
24
- html {
25
- -moz-tab-size: 4;
26
- -o-tab-size: 4;
27
- tab-size: 4;
28
- }
29
-
30
- /**
31
- 1. Correct the line height in all browsers.
32
- 2. Prevent adjustments of font size after orientation changes in iOS.
33
- */
34
-
35
- html {
36
- line-height: 1.15;
37
- /* 1 */
38
- -webkit-text-size-adjust: 100%;
39
- /* 2 */
40
- }
41
-
42
- /*
43
- Sections
44
- ========
45
- */
46
-
47
- /**
48
- Remove the margin in all browsers.
49
- */
50
-
51
- body {
52
- margin: 0;
53
- }
54
-
55
- /**
56
- Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
57
- */
58
-
59
- body {
60
- font-family:
61
- system-ui,
62
- -apple-system, /* Firefox supports this but not yet `system-ui` */
63
- 'Segoe UI',
64
- Roboto,
65
- Helvetica,
66
- Arial,
67
- sans-serif,
68
- 'Apple Color Emoji',
69
- 'Segoe UI Emoji';
70
- }
71
-
72
- /*
73
- Grouping content
74
- ================
75
- */
76
-
77
- /**
78
- 1. Add the correct height in Firefox.
79
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
80
- */
81
-
82
- hr {
83
- height: 0;
84
- /* 1 */
85
- color: inherit;
86
- /* 2 */
87
- }
88
-
89
- /*
90
- Text-level semantics
91
- ====================
92
- */
93
-
94
- /**
95
- Add the correct text decoration in Chrome, Edge, and Safari.
96
- */
97
-
98
- abbr[title] {
99
- -webkit-text-decoration: underline dotted;
100
- text-decoration: underline dotted;
101
- }
102
-
103
- /**
104
- Add the correct font weight in Edge and Safari.
105
- */
106
-
107
- b,
108
- strong {
109
- font-weight: bolder;
110
- }
111
-
112
- /**
113
- 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
114
- 2. Correct the odd 'em' font sizing in all browsers.
115
- */
116
-
117
- code,
118
- kbd,
119
- samp,
120
- pre {
121
- font-family:
122
- ui-monospace,
123
- SFMono-Regular,
124
- Consolas,
125
- 'Liberation Mono',
126
- Menlo,
127
- monospace;
128
- /* 1 */
129
- font-size: 1em;
130
- /* 2 */
131
- }
132
-
133
- /**
134
- Add the correct font size in all browsers.
135
- */
136
-
137
- small {
138
- font-size: 80%;
139
- }
140
-
141
- /**
142
- Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
143
- */
144
-
145
- sub,
146
- sup {
147
- font-size: 75%;
148
- line-height: 0;
149
- position: relative;
150
- vertical-align: baseline;
151
- }
152
-
153
- sub {
154
- bottom: -0.25em;
155
- }
156
-
157
- sup {
158
- top: -0.5em;
159
- }
160
-
161
- /*
162
- Tabular data
163
- ============
164
- */
165
-
166
- /**
167
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
168
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
169
- */
170
-
171
- table {
172
- text-indent: 0;
173
- /* 1 */
174
- border-color: inherit;
175
- /* 2 */
176
- }
177
-
178
- /*
179
- Forms
180
- =====
181
- */
182
-
183
- /**
184
- 1. Change the font styles in all browsers.
185
- 2. Remove the margin in Firefox and Safari.
186
- */
187
-
188
- button,
189
- input,
190
- optgroup,
191
- select,
192
- textarea {
193
- font-family: inherit;
194
- /* 1 */
195
- font-size: 100%;
196
- /* 1 */
197
- line-height: 1.15;
198
- /* 1 */
199
- margin: 0;
200
- /* 2 */
201
- }
202
-
203
- /**
204
- Remove the inheritance of text transform in Edge and Firefox.
205
- 1. Remove the inheritance of text transform in Firefox.
206
- */
207
-
208
- button,
209
- select {
210
- /* 1 */
211
- text-transform: none;
212
- }
213
-
214
- /**
215
- Correct the inability to style clickable types in iOS and Safari.
216
- */
217
-
218
- button,
219
- [type='button'],
220
- [type='reset'],
221
- [type='submit'] {
222
- -webkit-appearance: button;
223
- }
224
-
225
- /**
226
- Remove the inner border and padding in Firefox.
227
- */
228
-
229
- ::-moz-focus-inner {
230
- border-style: none;
231
- padding: 0;
232
- }
233
-
234
- /**
235
- Restore the focus styles unset by the previous rule.
236
- */
237
-
238
- :-moz-focusring {
239
- outline: 1px dotted ButtonText;
240
- }
241
-
242
- /**
243
- Remove the additional ':invalid' styles in Firefox.
244
- See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
245
- */
246
-
247
- :-moz-ui-invalid {
248
- box-shadow: none;
249
- }
250
-
251
- /**
252
- Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
253
- */
254
-
255
- legend {
256
- padding: 0;
257
- }
258
-
259
- /**
260
- Add the correct vertical alignment in Chrome and Firefox.
261
- */
262
-
263
- progress {
264
- vertical-align: baseline;
265
- }
266
-
267
- /**
268
- Correct the cursor style of increment and decrement buttons in Safari.
269
- */
270
-
271
- ::-webkit-inner-spin-button,
272
- ::-webkit-outer-spin-button {
273
- height: auto;
274
- }
275
-
276
- /**
277
- 1. Correct the odd appearance in Chrome and Safari.
278
- 2. Correct the outline style in Safari.
279
- */
280
-
281
- [type='search'] {
282
- -webkit-appearance: textfield;
283
- /* 1 */
284
- outline-offset: -2px;
285
- /* 2 */
286
- }
287
-
288
- /**
289
- Remove the inner padding in Chrome and Safari on macOS.
290
- */
291
-
292
- ::-webkit-search-decoration {
293
- -webkit-appearance: none;
294
- }
295
-
296
- /**
297
- 1. Correct the inability to style clickable types in iOS and Safari.
298
- 2. Change font properties to 'inherit' in Safari.
299
- */
300
-
301
- ::-webkit-file-upload-button {
302
- -webkit-appearance: button;
303
- /* 1 */
304
- font: inherit;
305
- /* 2 */
306
- }
307
-
308
- /*
309
- Interactive
310
- ===========
311
- */
312
-
313
- /*
314
- Add the correct display in Chrome and Safari.
315
- */
316
-
317
- summary {
318
- display: list-item;
319
- }
320
-
321
- /**
322
- * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
323
- * A thin layer on top of normalize.css that provides a starting point more
324
- * suitable for web applications.
325
- */
326
-
327
- /**
328
- * Removes the default spacing and border for appropriate elements.
329
- */
330
-
331
- blockquote,
332
- dl,
333
- dd,
334
- h1,
335
- h2,
336
- h3,
337
- h4,
338
- h5,
339
- h6,
340
- hr,
341
- figure,
342
- p,
343
- pre {
344
- margin: 0;
345
- }
346
-
347
- button {
348
- background-color: transparent;
349
- background-image: none;
350
- }
351
-
352
- fieldset {
353
- margin: 0;
354
- padding: 0;
355
- }
356
-
357
- ol,
358
- ul {
359
- list-style: none;
360
- margin: 0;
361
- padding: 0;
362
- }
363
-
364
- /**
365
- * Tailwind custom reset styles
366
- */
367
-
368
- /**
369
- * 1. Use the user's configured `sans` font-family (with Tailwind's default
370
- * sans-serif font stack as a fallback) as a sane default.
371
- * 2. Use Tailwind's default "normal" line-height so the user isn't forced
372
- * to override it to ensure consistency even when using the default theme.
373
- */
374
-
375
- html {
376
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
377
- /* 1 */
378
- line-height: 1.5;
379
- /* 2 */
380
- }
381
-
382
- /**
383
- * Inherit font-family and line-height from `html` so users can set them as
384
- * a class directly on the `html` element.
385
- */
386
-
387
- body {
388
- font-family: inherit;
389
- line-height: inherit;
390
- }
391
-
392
- /**
393
- * 1. Prevent padding and border from affecting element width.
394
- *
395
- * We used to set this in the html element and inherit from
396
- * the parent element for everything else. This caused issues
397
- * in shadow-dom-enhanced elements like <details> where the content
398
- * is wrapped by a div with box-sizing set to `content-box`.
399
- *
400
- * https://github.com/mozdevs/cssremedy/issues/4
401
- *
402
- *
403
- * 2. Allow adding a border to an element by just adding a border-width.
404
- *
405
- * By default, the way the browser specifies that an element should have no
406
- * border is by setting it's border-style to `none` in the user-agent
407
- * stylesheet.
408
- *
409
- * In order to easily add borders to elements by just setting the `border-width`
410
- * property, we change the default border-style for all elements to `solid`, and
411
- * use border-width to hide them instead. This way our `border` utilities only
412
- * need to set the `border-width` property instead of the entire `border`
413
- * shorthand, making our border utilities much more straightforward to compose.
414
- *
415
- * https://github.com/tailwindcss/tailwindcss/pull/116
416
- */
417
-
418
- *,
419
- ::before,
420
- ::after {
421
- box-sizing: border-box;
422
- /* 1 */
423
- border-width: 0;
424
- /* 2 */
425
- border-style: solid;
426
- /* 2 */
427
- border-color: currentColor;
428
- /* 2 */
429
- }
430
-
431
- /*
432
- * Ensure horizontal rules are visible by default
433
- */
434
-
435
- hr {
436
- border-top-width: 1px;
437
- }
438
-
439
- /**
440
- * Undo the `border-style: none` reset that Normalize applies to images so that
441
- * our `border-{width}` utilities have the expected effect.
442
- *
443
- * The Normalize reset is unnecessary for us since we default the border-width
444
- * to 0 on all elements.
445
- *
446
- * https://github.com/tailwindcss/tailwindcss/issues/362
447
- */
448
-
449
- img {
450
- border-style: solid;
451
- }
452
-
453
- textarea {
454
- resize: vertical;
455
- }
456
-
457
- input::-moz-placeholder, textarea::-moz-placeholder {
458
- opacity: 1;
459
- color: #a1a1aa;
460
- }
461
-
462
- input:-ms-input-placeholder, textarea:-ms-input-placeholder {
463
- opacity: 1;
464
- color: #a1a1aa;
465
- }
466
-
467
- input::placeholder,
468
- textarea::placeholder {
469
- opacity: 1;
470
- color: #a1a1aa;
471
- }
472
-
473
- button,
474
- [role="button"] {
475
- cursor: pointer;
476
- }
477
-
478
- /**
479
- * Override legacy focus reset from Normalize with modern Firefox focus styles.
480
- *
481
- * This is actually an improvement over the new defaults in Firefox in our testing,
482
- * as it triggers the better focus styles even for links, which still use a dotted
483
- * outline in Firefox by default.
484
- */
485
-
486
- :-moz-focusring {
487
- outline: auto;
488
- }
489
-
490
- table {
491
- border-collapse: collapse;
492
- }
493
-
494
- h1,
495
- h2,
496
- h3,
497
- h4,
498
- h5,
499
- h6 {
500
- font-size: inherit;
501
- font-weight: inherit;
502
- }
503
-
504
- /**
505
- * Reset links to optimize for opt-in styling instead of
506
- * opt-out.
507
- */
508
-
509
- a {
510
- color: inherit;
511
- text-decoration: inherit;
512
- }
513
-
514
- /**
515
- * Reset form element properties that are easy to forget to
516
- * style explicitly so you don't inadvertently introduce
517
- * styles that deviate from your design system. These styles
518
- * supplement a partial reset that is already applied by
519
- * normalize.css.
520
- */
521
-
522
- button,
523
- input,
524
- optgroup,
525
- select,
526
- textarea {
527
- padding: 0;
528
- line-height: inherit;
529
- color: inherit;
530
- }
531
-
532
- /**
533
- * Use the configured 'mono' font family for elements that
534
- * are expected to be rendered with a monospace font, falling
535
- * back to the system monospace stack if there is no configured
536
- * 'mono' font family.
537
- */
538
-
539
- pre,
540
- code,
541
- kbd,
542
- samp {
543
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
544
- }
545
-
546
- /**
547
- * 1. Make replaced elements `display: block` by default as that's
548
- * the behavior you want almost all of the time. Inspired by
549
- * CSS Remedy, with `svg` added as well.
550
- *
551
- * https://github.com/mozdevs/cssremedy/issues/14
552
- *
553
- * 2. Add `vertical-align: middle` to align replaced elements more
554
- * sensibly by default when overriding `display` by adding a
555
- * utility like `inline`.
556
- *
557
- * This can trigger a poorly considered linting error in some
558
- * tools but is included by design.
559
- *
560
- * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
561
- */
562
-
563
- img,
564
- svg,
565
- video,
566
- canvas,
567
- audio,
568
- iframe,
569
- embed,
570
- object {
571
- display: block;
572
- /* 1 */
573
- vertical-align: middle;
574
- /* 2 */
575
- }
576
-
577
- /**
578
- * Constrain images and videos to the parent width and preserve
579
- * their intrinsic aspect ratio.
580
- *
581
- * https://github.com/mozdevs/cssremedy/issues/14
582
- */
583
-
584
- img,
585
- video {
586
- max-width: 100%;
587
- height: auto;
588
- }
589
-
590
- /**
591
- * Ensure the default browser behavior of the `hidden` attribute.
592
- */
593
-
594
- [hidden] {
595
- display: none;
596
- }
597
-
598
- *, ::before, ::after {
599
- --tw-translate-x: 0;
600
- --tw-translate-y: 0;
601
- --tw-rotate: 0;
602
- --tw-skew-x: 0;
603
- --tw-skew-y: 0;
604
- --tw-scale-x: 1;
605
- --tw-scale-y: 1;
606
- --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
607
- --tw-border-opacity: 1;
608
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
609
- --tw-ring-offset-shadow: 0 0 #0000;
610
- --tw-ring-shadow: 0 0 #0000;
611
- --tw-shadow: 0 0 #0000;
612
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
613
- --tw-ring-offset-width: 0px;
614
- --tw-ring-offset-color: #fff;
615
- --tw-ring-color: rgba(59, 130, 246, 0.5);
616
- --tw-ring-offset-shadow: 0 0 #0000;
617
- --tw-ring-shadow: 0 0 #0000;
618
- --tw-shadow: 0 0 #0000;
619
- --tw-blur: var(--tw-empty,/*!*/ /*!*/);
620
- --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
621
- --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
622
- --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
623
- --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
624
- --tw-invert: var(--tw-empty,/*!*/ /*!*/);
625
- --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
626
- --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
627
- --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
628
- --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
629
- }
630
-
631
- .container {
632
- width: 100%;
633
- }
634
-
635
- @media (min-width: 380px) {
636
- .container {
637
- max-width: 380px;
638
- }
639
- }
640
-
641
- @media (min-width: 480px) {
642
- .container {
643
- max-width: 480px;
644
- }
645
- }
646
-
647
- @media (min-width: 640px) {
648
- .container {
649
- max-width: 640px;
650
- }
651
- }
652
-
653
- @media (min-width: 768px) {
654
- .container {
655
- max-width: 768px;
656
- }
657
- }
658
-
659
- @media (min-width: 1024px) {
660
- .container {
661
- max-width: 1024px;
662
- }
663
- }
664
-
665
- @media (min-width: 1280px) {
666
- .container {
667
- max-width: 1280px;
668
- }
669
- }
670
-
671
- @media (min-width: 1536px) {
672
- .container {
673
- max-width: 1536px;
674
- }
675
- }
676
-
677
- .sr-only {
678
- position: absolute;
679
- width: 1px;
680
- height: 1px;
681
- padding: 0;
682
- margin: -1px;
683
- overflow: hidden;
684
- clip: rect(0, 0, 0, 0);
685
- white-space: nowrap;
686
- border-width: 0;
687
- }
688
-
689
- .absolute {
690
- position: absolute;
691
- }
692
-
693
- .relative {
694
- position: relative;
695
- }
696
-
697
- .top-full {
698
- top: 100%;
699
- }
700
-
701
- .right-0 {
702
- right: 0px;
703
- }
704
-
705
- .z-50 {
706
- z-index: 50;
707
- }
708
-
709
- .col-span-3 {
710
- grid-column: span 3 / span 3;
711
- }
712
-
713
- .col-span-6 {
714
- grid-column: span 6 / span 6;
715
- }
716
-
717
- .mx-auto {
718
- margin-left: auto;
719
- margin-right: auto;
720
- }
721
-
722
- .-my-1 {
723
- margin-top: -0.25rem;
724
- margin-bottom: -0.25rem;
725
- }
726
-
727
- .ml-6 {
728
- margin-left: 1.5rem;
729
- }
730
-
731
- .mr-2 {
732
- margin-right: 0.5rem;
733
- }
734
-
735
- .ml-1\.5 {
736
- margin-left: 0.375rem;
737
- }
738
-
739
- .ml-1 {
740
- margin-left: 0.25rem;
741
- }
742
-
743
- .ml-auto {
744
- margin-left: auto;
745
- }
746
-
747
- .-mr-1\.5 {
748
- margin-right: -0.375rem;
749
- }
750
-
751
- .-mr-1 {
752
- margin-right: -0.25rem;
753
- }
754
-
755
- .ml-2\.5 {
756
- margin-left: 0.625rem;
757
- }
758
-
759
- .ml-2 {
760
- margin-left: 0.5rem;
761
- }
762
-
763
- .mt-3 {
764
- margin-top: 0.75rem;
765
- }
766
-
767
- .-mr-0\.5 {
768
- margin-right: -0.125rem;
769
- }
770
-
771
- .-mr-0 {
772
- margin-right: 0px;
773
- }
774
-
775
- .mb-0\.5 {
776
- margin-bottom: 0.125rem;
777
- }
778
-
779
- .mb-0 {
780
- margin-bottom: 0px;
781
- }
782
-
783
- .mr-3 {
784
- margin-right: 0.75rem;
785
- }
786
-
787
- .mt-2 {
788
- margin-top: 0.5rem;
789
- }
790
-
791
- .mb-4 {
792
- margin-bottom: 1rem;
793
- }
794
-
795
- .mb-8 {
796
- margin-bottom: 2rem;
797
- }
798
-
799
- .mb-10 {
800
- margin-bottom: 2.5rem;
801
- }
802
-
803
- .block {
804
- display: block;
805
- }
806
-
807
- .inline {
808
- display: inline;
809
- }
810
-
811
- .flex {
812
- display: flex;
813
- }
814
-
815
- .grid {
816
- display: grid;
817
- }
818
-
819
- .hidden {
820
- display: none;
821
- }
822
-
823
- .h-8 {
824
- height: 2rem;
825
- }
826
-
827
- .h-40 {
828
- height: 10rem;
829
- }
830
-
831
- .max-h-14 {
832
- max-height: 3.5rem;
833
- }
834
-
835
- .w-8 {
836
- width: 2rem;
837
- }
838
-
839
- .w-60 {
840
- width: 15rem;
841
- }
842
-
843
- .w-full {
844
- width: 100%;
845
- }
846
-
847
- .flex-none {
848
- flex: none;
849
- }
850
-
851
- .grid-flow-row {
852
- grid-auto-flow: row;
853
- }
854
-
855
- .grid-cols-3 {
856
- grid-template-columns: repeat(3, minmax(0, 1fr));
857
- }
858
-
859
- .grid-cols-2 {
860
- grid-template-columns: repeat(2, minmax(0, 1fr));
861
- }
862
-
863
- .grid-cols-5 {
864
- grid-template-columns: repeat(5, minmax(0, 1fr));
865
- }
866
-
867
- .flex-wrap {
868
- flex-wrap: wrap;
869
- }
870
-
871
- .items-start {
872
- align-items: flex-start;
873
- }
874
-
875
- .items-center {
876
- align-items: center;
877
- }
878
-
879
- .justify-center {
880
- justify-content: center;
881
- }
882
-
883
- .gap-2 {
884
- gap: 0.5rem;
885
- }
886
-
887
- .gap-3 {
888
- gap: 0.75rem;
889
- }
890
-
891
- .gap-6 {
892
- gap: 1.5rem;
893
- }
894
-
895
- .gap-x-8 {
896
- -moz-column-gap: 2rem;
897
- column-gap: 2rem;
898
- }
899
-
900
- .gap-y-6 {
901
- row-gap: 1.5rem;
902
- }
903
-
904
- .space-y-16 > :not([hidden]) ~ :not([hidden]) {
905
- --tw-space-y-reverse: 0;
906
- margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
907
- margin-bottom: calc(4rem * var(--tw-space-y-reverse));
908
- }
909
-
910
- .space-y-4 > :not([hidden]) ~ :not([hidden]) {
911
- --tw-space-y-reverse: 0;
912
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
913
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
914
- }
915
-
916
- .divide-y > :not([hidden]) ~ :not([hidden]) {
917
- --tw-divide-y-reverse: 0;
918
- border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
919
- border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
920
- }
921
-
922
- .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
923
- --tw-divide-opacity: 1;
924
- border-color: rgba(244, 244, 245, var(--tw-divide-opacity));
925
- }
926
-
927
- .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
928
- --tw-divide-opacity: 1;
929
- border-color: rgba(228, 228, 231, var(--tw-divide-opacity));
930
- }
931
-
932
- .truncate {
933
- overflow: hidden;
934
- text-overflow: ellipsis;
935
- white-space: nowrap;
936
- }
937
-
938
- .rounded-lg {
939
- border-radius: 0.5rem;
940
- }
941
-
942
- .rounded-md {
943
- border-radius: 0.375rem;
944
- }
945
-
946
- .border {
947
- border-width: 1px;
948
- }
949
-
950
- .border-2 {
951
- border-width: 2px;
952
- }
953
-
954
- .border-b {
955
- border-bottom-width: 1px;
956
- }
957
-
958
- .border-l {
959
- border-left-width: 1px;
960
- }
961
-
962
- .border-gray-100 {
963
- --tw-border-opacity: 1;
964
- border-color: rgba(244, 244, 245, var(--tw-border-opacity));
965
- }
966
-
967
- .border-gray-200 {
968
- --tw-border-opacity: 1;
969
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
970
- }
971
-
972
- .border-red-500 {
973
- --tw-border-opacity: 1;
974
- border-color: rgba(239, 68, 68, var(--tw-border-opacity));
975
- }
976
-
977
- .bg-gray-50 {
978
- --tw-bg-opacity: 1;
979
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
980
- }
981
-
982
- .bg-white {
983
- --tw-bg-opacity: 1;
984
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
985
- }
986
-
987
- .bg-gray-200 {
988
- --tw-bg-opacity: 1;
989
- background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
990
- }
991
-
992
- .bg-green-50 {
993
- --tw-bg-opacity: 1;
994
- background-color: rgba(240, 253, 244, var(--tw-bg-opacity));
995
- }
996
-
997
- .bg-red-50 {
998
- --tw-bg-opacity: 1;
999
- background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
1000
- }
1001
-
1002
- .bg-yellow-50 {
1003
- --tw-bg-opacity: 1;
1004
- background-color: rgba(254, 252, 232, var(--tw-bg-opacity));
1005
- }
1006
-
1007
- .bg-purple-50 {
1008
- --tw-bg-opacity: 1;
1009
- background-color: rgba(250, 245, 255, var(--tw-bg-opacity));
1010
- }
1011
-
1012
- .bg-green-100 {
1013
- --tw-bg-opacity: 1;
1014
- background-color: rgba(220, 252, 231, var(--tw-bg-opacity));
1015
- }
1016
-
1017
- .bg-red-100 {
1018
- --tw-bg-opacity: 1;
1019
- background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
1020
- }
1021
-
1022
- .bg-yellow-100 {
1023
- --tw-bg-opacity: 1;
1024
- background-color: rgba(254, 249, 195, var(--tw-bg-opacity));
1025
- }
1026
-
1027
- .bg-gray-100 {
1028
- --tw-bg-opacity: 1;
1029
- background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
1030
- }
1031
-
1032
- .bg-purple-100 {
1033
- --tw-bg-opacity: 1;
1034
- background-color: rgba(243, 232, 255, var(--tw-bg-opacity));
1035
- }
1036
-
1037
- .p-4 {
1038
- padding: 1rem;
1039
- }
1040
-
1041
- .px-4 {
1042
- padding-left: 1rem;
1043
- padding-right: 1rem;
1044
- }
1045
-
1046
- .py-5 {
1047
- padding-top: 1.25rem;
1048
- padding-bottom: 1.25rem;
1049
- }
1050
-
1051
- .py-3 {
1052
- padding-top: 0.75rem;
1053
- padding-bottom: 0.75rem;
1054
- }
1055
-
1056
- .px-3\.5 {
1057
- padding-left: 0.875rem;
1058
- padding-right: 0.875rem;
1059
- }
1060
-
1061
- .px-3 {
1062
- padding-left: 0.75rem;
1063
- padding-right: 0.75rem;
1064
- }
1065
-
1066
- .py-1\.5 {
1067
- padding-top: 0.375rem;
1068
- padding-bottom: 0.375rem;
1069
- }
1070
-
1071
- .py-1 {
1072
- padding-top: 0.25rem;
1073
- padding-bottom: 0.25rem;
1074
- }
1075
-
1076
- .py-8 {
1077
- padding-top: 2rem;
1078
- padding-bottom: 2rem;
1079
- }
1080
-
1081
- .px-2\.5 {
1082
- padding-left: 0.625rem;
1083
- padding-right: 0.625rem;
1084
- }
1085
-
1086
- .px-2 {
1087
- padding-left: 0.5rem;
1088
- padding-right: 0.5rem;
1089
- }
1090
-
1091
- .pl-6 {
1092
- padding-left: 1.5rem;
1093
- }
1094
-
1095
- .pt-16 {
1096
- padding-top: 4rem;
1097
- }
1098
-
1099
- .pb-24 {
1100
- padding-bottom: 6rem;
1101
- }
1102
-
1103
- .pb-12 {
1104
- padding-bottom: 3rem;
1105
- }
1106
-
1107
- .pb-6 {
1108
- padding-bottom: 1.5rem;
1109
- }
1110
-
1111
- .text-center {
1112
- text-align: center;
1113
- }
1114
-
1115
- .text-sm {
1116
- font-size: 0.875rem;
1117
- line-height: 1.25rem;
1118
- }
1119
-
1120
- .text-xs {
1121
- font-size: 0.75rem;
1122
- line-height: 1rem;
1123
- }
1124
-
1125
- .text-3xl {
1126
- font-size: 1.875rem;
1127
- line-height: 2.25rem;
1128
- }
1129
-
1130
- .text-2xl {
1131
- font-size: 1.5rem;
1132
- line-height: 2rem;
1133
- }
1134
-
1135
- .font-medium {
1136
- font-weight: 500;
1137
- }
1138
-
1139
- .font-normal {
1140
- font-weight: 400;
1141
- }
1142
-
1143
- .font-extrabold {
1144
- font-weight: 800;
1145
- }
1146
-
1147
- .font-semibold {
1148
- font-weight: 600;
1149
- }
1150
-
1151
- .font-bold {
1152
- font-weight: 700;
1153
- }
1154
-
1155
- .leading-6 {
1156
- line-height: 1.5rem;
1157
- }
1158
-
1159
- .text-gray-900 {
1160
- --tw-text-opacity: 1;
1161
- color: rgba(24, 24, 27, var(--tw-text-opacity));
1162
- }
1163
-
1164
- .text-gray-500 {
1165
- --tw-text-opacity: 1;
1166
- color: rgba(113, 113, 122, var(--tw-text-opacity));
1167
- }
1168
-
1169
- .text-gray-400 {
1170
- --tw-text-opacity: 1;
1171
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1172
- }
1173
-
1174
- .text-primary {
1175
- color: var(--color-main);
1176
- }
1177
-
1178
- .shadow-md {
1179
- --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1180
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1181
- }
1182
-
1183
- .ring-1 {
1184
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1185
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1186
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1187
- }
1188
-
1189
- .ring-gray-900 {
1190
- --tw-ring-opacity: 1;
1191
- --tw-ring-color: rgba(24, 24, 27, var(--tw-ring-opacity));
1192
- }
1193
-
1194
- .ring-opacity-5 {
1195
- --tw-ring-opacity: 0.05;
1196
- }
1197
-
1198
- .transition-colors {
1199
- transition-property: background-color, border-color, color, fill, stroke;
1200
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1201
- transition-duration: 150ms;
1202
- }
1203
-
1204
- .s-hidden {
1205
- display: none;
1206
- }
1207
-
1208
- .s-has-error {
1209
- --tw-border-opacity: 1;
1210
- border-color: rgba(248, 113, 113, var(--tw-border-opacity));
1211
- }
1212
-
1213
- .s-has-error:focus {
1214
- --tw-border-opacity: 1;
1215
- border-color: rgba(239, 68, 68, var(--tw-border-opacity));
1216
- }
1217
-
1218
- .s-has-error {
1219
- --tw-border-opacity: 1 !important;
1220
- border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
1221
- --tw-text-opacity: 1 !important;
1222
- color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
1223
- }
1224
-
1225
- .s-ltr {
1226
- direction: ltr;
1227
- }
1228
-
1229
- .s-input {
1230
- -webkit-appearance: none;
1231
- -moz-appearance: none;
1232
- appearance: none;
1233
- height: 2.5rem;
1234
- width: 100%;
1235
- border-radius: 0.375rem;
1236
- --tw-border-opacity: 1;
1237
- border-color: rgba(238, 238, 238, var(--tw-border-opacity));
1238
- transition-property: background-color, border-color, color, fill, stroke;
1239
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1240
- transition-duration: 150ms;
1241
- transition-duration: 300ms;
1242
- }
1243
-
1244
- .s-input:focus {
1245
- border-color: var(--color-main);
1246
- --tw-ring-color: transparent;
1247
- }
1248
-
1249
- .dark .s-input {
1250
- --tw-border-opacity: 1;
1251
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
1252
- --tw-bg-opacity: 1;
1253
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
1254
- }
1255
-
1256
- .dark .s-input:focus {
1257
- border-color: var(--color-main);
1258
- }
1259
-
1260
- @media (min-width: 640px) {
1261
- .s-input {
1262
- font-size: 0.875rem;
1263
- line-height: 1.25rem;
1264
- }
1265
- }
1266
-
1267
- .s-hidden {
1268
- display: none;
1269
- }
1270
-
1271
- .s-block {
1272
- display: block;
1273
- }
1274
-
1275
- .s-branches-title {
1276
- margin-bottom: 1.5rem;
1277
- font-size: 0.875rem;
1278
- line-height: 1.25rem;
1279
- --tw-text-opacity: 1;
1280
- color: rgba(82, 82, 91, var(--tw-text-opacity));
1281
- }
1282
-
1283
- .s-branches-input-wrap {
1284
- display: flex;
1285
- align-items: center;
1286
- }
1287
-
1288
- .s-branches-input {
1289
- height: 1rem;
1290
- width: 1rem;
1291
- --tw-border-opacity: 1;
1292
- border-color: rgba(212, 212, 216, var(--tw-border-opacity));
1293
- color: var(--color-main);
1294
- -webkit-margin-end: 0.75rem;
1295
- margin-inline-end: 0.75rem;
1296
- }
1297
-
1298
- .s-branches-input:focus {
1299
- --tw-ring-color: var(--color-main);
1300
- }
1301
-
1302
- .s-branches-label {
1303
- display: flex;
1304
- flex-grow: 1;
1305
- align-items: center;
1306
- justify-content: space-between;
1307
- font-size: 0.875rem;
1308
- line-height: 1.25rem;
1309
- font-weight: 500;
1310
- --tw-text-opacity: 1;
1311
- color: rgba(63, 63, 70, var(--tw-text-opacity));
1312
- }
1313
-
1314
- .s-branches-select {
1315
- height: 2.5rem;
1316
- width: 100%;
1317
- -webkit-appearance: none;
1318
- -moz-appearance: none;
1319
- appearance: none;
1320
- border-radius: 0.375rem;
1321
- --tw-border-opacity: 1;
1322
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
1323
- padding-left: 1rem;
1324
- padding-right: 1rem;
1325
- font-size: 0.875rem;
1326
- line-height: 1.25rem;
1327
- transition-property: background-color, border-color, color, fill, stroke;
1328
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1329
- transition-duration: 150ms;
1330
- transition-duration: 300ms;
1331
- }
1332
-
1333
- .s-branches-select:focus {
1334
- border-color: var(--color-main);
1335
- }
1336
-
1337
- .s-branches-space-v > :not([hidden]) ~ :not([hidden]) {
1338
- --tw-space-y-reverse: 0;
1339
- margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
1340
- margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
1341
- }
1342
-
1343
- .s-branches-sr-only {
1344
- position: absolute;
1345
- width: 1px;
1346
- height: 1px;
1347
- padding: 0;
1348
- margin: -1px;
1349
- overflow: hidden;
1350
- clip: rect(0, 0, 0, 0);
1351
- white-space: nowrap;
1352
- border-width: 0;
1353
- }
1354
-
1355
- .s-branches-is-closed {
1356
- opacity: 0.5;
1357
- }
1358
-
1359
- .s-branches-closed-badge {
1360
- --tw-text-opacity: 1;
1361
- color: rgba(248, 113, 113, var(--tw-text-opacity));
1362
- }
1363
-
1364
- .s-branches-clickable {
1365
- cursor: pointer;
1366
- }
1367
-
1368
- .s-branches-submit {
1369
- margin-top: 1.5rem;
1370
- }
1371
-
1372
- .s-branches-color-red {
1373
- --tw-text-opacity: 1;
1374
- color: rgba(248, 113, 113, var(--tw-text-opacity));
1375
- }
1376
-
1377
- .s-branches-color-green {
1378
- --tw-text-opacity: 1;
1379
- color: rgba(34, 197, 94, var(--tw-text-opacity));
1380
- }
1381
-
1382
- .s-branches-color-gray {
1383
- --tw-text-opacity: 1;
1384
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1385
- }
1386
-
1387
- .s-button-btn {
1388
- position: relative;
1389
- display: inline-flex;
1390
- flex: 1 1 0%;
1391
- -webkit-user-select: none;
1392
- -moz-user-select: none;
1393
- -ms-user-select: none;
1394
- user-select: none;
1395
- flex-direction: row-reverse;
1396
- align-items: center;
1397
- justify-content: center;
1398
- white-space: nowrap;
1399
- border-radius: 0.375rem;
1400
- border-style: solid;
1401
- padding-left: 1.5rem;
1402
- padding-right: 1.5rem;
1403
- padding-bottom: 0.625rem;
1404
- padding-top: 0.5rem;
1405
- font-size: 0.875rem;
1406
- line-height: 1.25rem;
1407
- font-weight: 700;
1408
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1409
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1410
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1411
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1412
- transition-duration: 150ms;
1413
- transition-duration: 300ms;
1414
- }
1415
-
1416
- .s-button-btn:hover {
1417
- opacity: 0.8;
1418
- }
1419
-
1420
- .s-button-icon {
1421
- position: relative;
1422
- margin-left: 0.25rem;
1423
- margin-right: 0.25rem;
1424
- display: inline-flex;
1425
- height: 2.5rem;
1426
- width: 2.5rem;
1427
- flex-shrink: 0;
1428
- align-items: center;
1429
- justify-content: center;
1430
- border-radius: 9999px !important;
1431
- padding: 0px !important;
1432
- font-weight: 500;
1433
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1434
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1435
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1436
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1437
- transition-duration: 150ms;
1438
- transition-duration: 300ms;
1439
- }
1440
-
1441
- .s-button-link {
1442
- padding-left: 0.25rem;
1443
- padding-right: 0.25rem;
1444
- padding-top: 0.125rem;
1445
- padding-bottom: 0.125rem;
1446
- color: var(--color-main);
1447
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1448
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1449
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1450
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1451
- transition-duration: 150ms;
1452
- transition-duration: 300ms;
1453
- }
1454
-
1455
- .s-button-link:hover {
1456
- opacity: 0.7;
1457
- }
1458
-
1459
- .s-button-disabled {
1460
- opacity: 0.5;
1461
- }
1462
-
1463
- .s-button-fill-none {
1464
- border-width: 0px !important;
1465
- background-color: transparent !important;
1466
- }
1467
-
1468
- .s-button-primary {
1469
- background-color: var(--color-main);
1470
- color: var(--color-main-reverse);
1471
- }
1472
-
1473
- .s-button-primary:hover {
1474
- background-color: var(--color-main-d);
1475
- }
1476
-
1477
- .s-button-success {
1478
- --tw-bg-opacity: 1;
1479
- background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
1480
- --tw-text-opacity: 1;
1481
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1482
- }
1483
-
1484
- .s-button-success:hover {
1485
- --tw-bg-opacity: 1;
1486
- background-color: rgba(22, 163, 74, var(--tw-bg-opacity));
1487
- }
1488
-
1489
- .s-button-danger {
1490
- --tw-bg-opacity: 1;
1491
- background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
1492
- --tw-text-opacity: 1;
1493
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1494
- }
1495
-
1496
- .s-button-danger:hover {
1497
- --tw-bg-opacity: 1;
1498
- background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
1499
- }
1500
-
1501
- .s-button-warning {
1502
- --tw-bg-opacity: 1;
1503
- background-color: rgba(251, 191, 36, var(--tw-bg-opacity));
1504
- --tw-text-opacity: 1;
1505
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1506
- }
1507
-
1508
- .s-button-warning:hover {
1509
- --tw-bg-opacity: 1;
1510
- background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
1511
- }
1512
-
1513
- .s-button-gray {
1514
- --tw-bg-opacity: 1;
1515
- background-color: rgba(161, 161, 170, var(--tw-bg-opacity));
1516
- --tw-text-opacity: 1;
1517
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1518
- }
1519
-
1520
- .s-button-gray:hover {
1521
- --tw-bg-opacity: 1;
1522
- background-color: rgba(113, 113, 122, var(--tw-bg-opacity));
1523
- }
1524
-
1525
- .s-button-dark {
1526
- --tw-bg-opacity: 1;
1527
- background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
1528
- --tw-text-opacity: 1;
1529
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1530
- }
1531
-
1532
- .s-button-dark:hover {
1533
- --tw-bg-opacity: 1;
1534
- background-color: rgba(39, 39, 42, var(--tw-bg-opacity));
1535
- }
1536
-
1537
- .s-button-light {
1538
- --tw-bg-opacity: 1;
1539
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
1540
- --tw-text-opacity: 1;
1541
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1542
- }
1543
-
1544
- .s-button-light:hover {
1545
- --tw-bg-opacity: 1;
1546
- background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
1547
- }
1548
-
1549
- .s-button-primary-outline {
1550
- color: var(--color-main);
1551
- }
1552
-
1553
- .s-button-primary-outline:hover {
1554
- background-color: var(--color-main);
1555
- color: var(--color-main-reverse);
1556
- }
1557
-
1558
- .s-button-success-outline {
1559
- --tw-text-opacity: 1;
1560
- color: rgba(34, 197, 94, var(--tw-text-opacity));
1561
- }
1562
-
1563
- .s-button-success-outline:hover {
1564
- --tw-bg-opacity: 1;
1565
- background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
1566
- --tw-text-opacity: 1;
1567
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1568
- }
1569
-
1570
- .s-button-danger-outline {
1571
- --tw-text-opacity: 1;
1572
- color: rgba(248, 113, 113, var(--tw-text-opacity));
1573
- }
1574
-
1575
- .s-button-danger-outline:hover {
1576
- --tw-bg-opacity: 1;
1577
- background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
1578
- --tw-text-opacity: 1;
1579
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1580
- }
1581
-
1582
- .s-button-warning-outline {
1583
- --tw-text-opacity: 1;
1584
- color: rgba(251, 191, 36, var(--tw-text-opacity));
1585
- }
1586
-
1587
- .s-button-warning-outline:hover {
1588
- --tw-bg-opacity: 1;
1589
- background-color: rgba(251, 191, 36, var(--tw-bg-opacity));
1590
- --tw-text-opacity: 1;
1591
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1592
- }
1593
-
1594
- .s-button-gray-outline {
1595
- --tw-text-opacity: 1;
1596
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1597
- }
1598
-
1599
- .s-button-gray-outline:hover {
1600
- --tw-bg-opacity: 1;
1601
- background-color: rgba(161, 161, 170, var(--tw-bg-opacity));
1602
- --tw-text-opacity: 1;
1603
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1604
- }
1605
-
1606
- .s-button-dark-outline {
1607
- --tw-text-opacity: 1;
1608
- color: rgba(63, 63, 70, var(--tw-text-opacity));
1609
- }
1610
-
1611
- .s-button-dark-outline:hover {
1612
- --tw-bg-opacity: 1;
1613
- background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
1614
- --tw-text-opacity: 1;
1615
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1616
- }
1617
-
1618
- .s-button-light-outline {
1619
- --tw-border-opacity: 1 !important;
1620
- border-color: rgba(239, 240, 240, var(--tw-border-opacity)) !important;
1621
- --tw-bg-opacity: 1;
1622
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1623
- --tw-text-opacity: 1;
1624
- color: rgba(113, 113, 122, var(--tw-text-opacity));
1625
- }
1626
-
1627
- .s-button-light-outline:hover {
1628
- --tw-border-opacity: 1 !important;
1629
- border-color: rgba(228, 228, 231, var(--tw-border-opacity)) !important;
1630
- }
1631
-
1632
- .s-button-primary-link {
1633
- color: var(--color-main);
1634
- }
1635
-
1636
- .s-button-success-link {
1637
- --tw-text-opacity: 1;
1638
- color: rgba(34, 197, 94, var(--tw-text-opacity));
1639
- }
1640
-
1641
- .s-button-danger-link {
1642
- --tw-text-opacity: 1;
1643
- color: rgba(248, 113, 113, var(--tw-text-opacity));
1644
- }
1645
-
1646
- .s-button-warning-link {
1647
- --tw-text-opacity: 1;
1648
- color: rgba(251, 191, 36, var(--tw-text-opacity));
1649
- }
1650
-
1651
- .s-button-gray-link {
1652
- --tw-text-opacity: 1;
1653
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1654
- }
1655
-
1656
- .s-button-dark-link {
1657
- --tw-text-opacity: 1;
1658
- color: rgba(63, 63, 70, var(--tw-text-opacity));
1659
- }
1660
-
1661
- .s-button-light-link {
1662
- --tw-text-opacity: 1;
1663
- color: rgba(113, 113, 122, var(--tw-text-opacity));
1664
- }
1665
-
1666
- .s-button-small {
1667
- border-radius: 0.125rem;
1668
- padding-left: 1rem;
1669
- padding-right: 1rem;
1670
- padding-bottom: 0.375rem;
1671
- padding-top: 0.25rem;
1672
- font-size: 0.75rem;
1673
- line-height: 1rem;
1674
- }
1675
-
1676
- .s-button-large {
1677
- padding-left: 2rem;
1678
- padding-right: 2rem;
1679
- padding-bottom: 1rem;
1680
- padding-top: 1rem;
1681
- font-size: 1.25rem;
1682
- line-height: 1.75rem;
1683
- }
1684
-
1685
- .s-button-wide {
1686
- width: 100%;
1687
- }
1688
-
1689
- .s-button-text {
1690
- pointer-events: none;
1691
- display: flex;
1692
- align-items: center;
1693
- transition-property: opacity;
1694
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1695
- transition-duration: 150ms;
1696
- transition-duration: 300ms;
1697
- }
1698
-
1699
- .s-button-loader {
1700
- margin-left: 0.5rem;
1701
- margin-right: 0.5rem;
1702
- display: flex;
1703
- align-items: center;
1704
- justify-content: center;
1705
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1706
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1707
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1708
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1709
- transition-duration: 150ms;
1710
- }
1711
-
1712
- .s-button-loader::before {
1713
- content: "";
1714
- display: inline-block;
1715
- content: "";
1716
- height: 1rem;
1717
- content: "";
1718
- width: 1rem;
1719
- }
1720
-
1721
- @-webkit-keyframes spin {
1722
- to {
1723
- transform: rotate(360deg);
1724
- }
1725
- }
1726
-
1727
- @keyframes spin {
1728
- to {
1729
- transform: rotate(360deg);
1730
- }
1731
- }
1732
-
1733
- .s-button-loader::before {
1734
- content: "";
1735
- -webkit-animation: spin 1s linear infinite;
1736
- animation: spin 1s linear infinite;
1737
- content: "";
1738
- border-radius: 9999px;
1739
- content: "";
1740
- border-width: 2px;
1741
- content: "";
1742
- border-style: solid;
1743
- content: "";
1744
- border-top-color: var(--color-main);
1745
- content: "";
1746
- border-left-color: var(--color-main);
1747
- content: "";
1748
- --tw-border-opacity: 1;
1749
- border-bottom-color: rgba(244, 244, 245, var(--tw-border-opacity));
1750
- content: "";
1751
- --tw-border-opacity: 1;
1752
- border-right-color: rgba(244, 244, 245, var(--tw-border-opacity));
1753
- content: '';
1754
- }
1755
-
1756
- .s-infinite-scroll-wrapper {
1757
- margin-top: 1rem;
1758
- text-align: center;
1759
- }
1760
-
1761
- .s-infinite-scroll-last {
1762
- margin: 0px;
1763
- text-align: center;
1764
- }
1765
-
1766
- .s-infinite-scroll-error {
1767
- margin: 0px;
1768
- text-align: center;
1769
- }
1770
-
1771
- .s-localization-modal-title {
1772
- font-size: 1rem;
1773
- line-height: 1.5rem;
1774
- font-weight: 500;
1775
- --tw-text-opacity: 1;
1776
- color: rgba(24, 24, 27, var(--tw-text-opacity));
1777
- }
1778
-
1779
- .s-localization-modal-section {
1780
- margin-bottom: 2rem;
1781
- }
1782
-
1783
- .s-localization-modal-section-inner {
1784
- margin-top: 1rem;
1785
- }
1786
-
1787
- .s-localization-modal-section-inner > :not([hidden]) ~ :not([hidden]) {
1788
- --tw-space-y-reverse: 0;
1789
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1790
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1791
- }
1792
-
1793
- .s-localization-modal-item {
1794
- display: flex;
1795
- align-items: center;
1796
- }
1797
-
1798
- .s-localization-modal-input {
1799
- height: 1rem;
1800
- width: 1rem;
1801
- --tw-border-opacity: 1;
1802
- border-color: rgba(212, 212, 216, var(--tw-border-opacity));
1803
- color: var(--color-main);
1804
- }
1805
-
1806
- .s-localization-modal-input:focus {
1807
- --tw-ring-color: var(--color-main);
1808
- }
1809
-
1810
- .s-localization-modal-label {
1811
- display: flex;
1812
- flex-grow: 1;
1813
- cursor: pointer;
1814
- align-items: center;
1815
- justify-content: space-between;
1816
- font-size: 0.875rem;
1817
- line-height: 1.25rem;
1818
- font-weight: 500;
1819
- --tw-text-opacity: 1;
1820
- color: rgba(63, 63, 70, var(--tw-text-opacity));
1821
- -webkit-margin-start: 0.75rem;
1822
- margin-inline-start: 0.75rem;
1823
- }
1824
-
1825
- .s-localization-modal-flag {
1826
- border-radius: 0.125rem;
1827
- }
1828
-
1829
- .s-localization-modal-currency {
1830
- --tw-text-opacity: 1;
1831
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1832
- }
1833
-
1834
- .s-localization-modal-select {
1835
- height: 2.5rem;
1836
- width: 100%;
1837
- border-radius: 0.375rem;
1838
- --tw-border-opacity: 1;
1839
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
1840
- padding-left: 1rem;
1841
- padding-right: 1rem;
1842
- font-size: 0.875rem;
1843
- line-height: 1.25rem;
1844
- --tw-text-opacity: 1;
1845
- color: rgba(113, 113, 122, var(--tw-text-opacity));
1846
- transition-property: background-color, border-color, color, fill, stroke;
1847
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1848
- transition-duration: 150ms;
1849
- transition-duration: 300ms;
1850
- }
1851
-
1852
- .s-localization-modal-select:focus {
1853
- border-color: var(--color-main);
1854
- }
1855
-
1856
- .s-login-modal-sub-title {
1857
- margin-bottom: 0.625rem;
1858
- font-size: 0.875rem;
1859
- line-height: 1.25rem;
1860
- --tw-text-opacity: 1;
1861
- color: rgba(161, 161, 170, var(--tw-text-opacity));
1862
- }
1863
-
1864
- .s-login-modal-main-btn {
1865
- position: relative;
1866
- margin-bottom: 0.625rem;
1867
- box-sizing: content-box;
1868
- display: flex;
1869
- min-width: 0px;
1870
- flex: 1 1 0%;
1871
- align-items: center;
1872
- justify-content: space-between;
1873
- border-radius: 0.375rem;
1874
- border-width: 1px;
1875
- --tw-border-opacity: 1;
1876
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
1877
- --tw-bg-opacity: 1;
1878
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1879
- padding-top: 1.25rem;
1880
- padding-bottom: 1.25rem;
1881
- transition-property: all;
1882
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1883
- transition-duration: 150ms;
1884
- transition-duration: 300ms;
1885
- -webkit-padding-end: 1rem;
1886
- padding-inline-end: 1rem;
1887
- -webkit-padding-start: 1.25rem;
1888
- padding-inline-start: 1.25rem;
1889
- }
1890
-
1891
- .s-login-modal-main-btn > :not([hidden]) ~ :not([hidden]) {
1892
- --tw-space-s-reverse: 0;
1893
- -webkit-margin-end: calc(0.75rem * var(--tw-space-s-reverse));
1894
- margin-inline-end: calc(0.75rem * var(--tw-space-s-reverse));
1895
- -webkit-margin-start: calc(0.75rem * calc(1 - var(--tw-space-s-reverse)));
1896
- margin-inline-start: calc(0.75rem * calc(1 - var(--tw-space-s-reverse)));
1897
- }
1898
-
1899
- .s-login-modal-main-btn:hover {
1900
- --tw-bg-opacity: 1;
1901
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
1902
- }
1903
-
1904
- .s-login-modal-main-btn-icon {
1905
- height: 3rem;
1906
- width: 3rem;
1907
- flex-shrink: 0;
1908
- background-color: var(--color-main);
1909
- font-size: 1.125rem;
1910
- line-height: 1.75rem;
1911
- --tw-text-opacity: 1;
1912
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1913
- display: flex;
1914
- height: 4rem;
1915
- width: 4rem;
1916
- align-items: center;
1917
- justify-content: center;
1918
- border-radius: 9999px;
1919
- font-size: 1.875rem;
1920
- line-height: 2.25rem;
1921
- }
1922
-
1923
- .s-login-modal-main-btn-text {
1924
- flex: 1 1 0%;
1925
- padding: 0.75rem;
1926
- font-weight: 700;
1927
- }
1928
-
1929
- .s-login-modal-main-btn-arrow {
1930
- font-size: 1.25rem;
1931
- line-height: 1.75rem;
1932
- color: var(--color-main);
1933
- }
1934
-
1935
- .s-login-modal-label {
1936
- margin-bottom: 0.5rem;
1937
- display: block;
1938
- font-size: 0.875rem;
1939
- line-height: 1.25rem;
1940
- font-weight: 500;
1941
- --tw-text-opacity: 1;
1942
- color: rgba(63, 63, 70, var(--tw-text-opacity));
1943
- }
1944
-
1945
- .s-login-modal-input {
1946
- height: 2.5rem;
1947
- width: 100%;
1948
- border-radius: 0.375rem;
1949
- border-width: 1px;
1950
- --tw-border-opacity: 1;
1951
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
1952
- padding-left: 0.75rem;
1953
- padding-right: 0.75rem;
1954
- font-size: 0.875rem;
1955
- line-height: 1.25rem;
1956
- transition-property: background-color, border-color, color, fill, stroke;
1957
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1958
- transition-duration: 150ms;
1959
- }
1960
-
1961
- .s-login-modal-input:focus {
1962
- border-color: var(--color-main);
1963
- }
1964
-
1965
- .dark .s-login-modal-input {
1966
- --tw-border-opacity: 1;
1967
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
1968
- --tw-bg-opacity: 1;
1969
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
1970
- }
1971
-
1972
- .s-login-modal-link {
1973
- margin-top: 1.5rem;
1974
- display: block;
1975
- text-align: center;
1976
- font-size: 0.875rem;
1977
- line-height: 1.25rem;
1978
- color: var(--color-main);
1979
- }
1980
-
1981
- .s-login-modal-error-message {
1982
- display: block;
1983
- height: 1.75rem;
1984
- padding-top: 0.25rem;
1985
- font-size: 0.75rem;
1986
- line-height: 1rem;
1987
- --tw-border-opacity: 1;
1988
- border-color: rgba(248, 113, 113, var(--tw-border-opacity));
1989
- }
1990
-
1991
- .s-login-modal-error-message:focus {
1992
- --tw-border-opacity: 1;
1993
- border-color: rgba(239, 68, 68, var(--tw-border-opacity));
1994
- }
1995
-
1996
- .s-login-modal-error-message {
1997
- --tw-border-opacity: 1 !important;
1998
- border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
1999
- --tw-text-opacity: 1 !important;
2000
- color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
2001
- }
2002
-
2003
- .s-login-modal-wrapper {
2004
- transition-property: all;
2005
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2006
- transition-duration: 150ms;
2007
- transition-duration: 300ms;
2008
- transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
2009
- }
2010
-
2011
- .s-login-modal-tab {
2012
- transition-property: all;
2013
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2014
- transition-duration: 150ms;
2015
- transition-duration: 500ms;
2016
- }
2017
-
2018
- .s-login-modal-active {
2019
- --tw-translate-x: 0px;
2020
- transform: var(--tw-transform);
2021
- opacity: 1;
2022
- }
2023
-
2024
- .s-login-modal-unactive {
2025
- --tw-translate-x: 0.75rem;
2026
- transform: var(--tw-transform);
2027
- opacity: 0;
2028
- }
2029
-
2030
- .s-modal-container {
2031
- position: fixed;
2032
- top: 0px;
2033
- right: 0px;
2034
- bottom: 0px;
2035
- left: 0px;
2036
- z-index: 50;
2037
- overflow: hidden;
2038
- }
2039
-
2040
- .s-modal-wrapper {
2041
- display: flex;
2042
- height: 100%;
2043
- align-items: flex-end;
2044
- justify-content: center;
2045
- overflow-y: auto;
2046
- text-align: center;
2047
- }
2048
-
2049
- @media (min-width: 640px) {
2050
- .s-modal-wrapper {
2051
- display: block;
2052
- }
2053
- }
2054
-
2055
- .s-modal-loader-wrap {
2056
- display: flex;
2057
- height: 6rem;
2058
- align-items: center;
2059
- justify-content: center;
2060
- }
2061
-
2062
- .s-modal-loader {
2063
- margin-left: 0.5rem;
2064
- margin-right: 0.5rem;
2065
- display: flex;
2066
- align-items: center;
2067
- justify-content: center;
2068
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2069
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2070
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2071
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2072
- transition-duration: 150ms;
2073
- }
2074
-
2075
- .s-modal-loader::before {
2076
- content: "";
2077
- display: inline-block;
2078
- content: "";
2079
- height: 2.5rem;
2080
- content: "";
2081
- width: 2.5rem;
2082
- }
2083
-
2084
- @keyframes spin {
2085
- to {
2086
- transform: rotate(360deg);
2087
- }
2088
- }
2089
-
2090
- .s-modal-loader::before {
2091
- content: "";
2092
- -webkit-animation: spin 1s linear infinite;
2093
- animation: spin 1s linear infinite;
2094
- content: "";
2095
- border-radius: 9999px;
2096
- content: "";
2097
- border-width: 2px;
2098
- content: "";
2099
- border-style: solid;
2100
- content: "";
2101
- border-top-color: var(--color-main);
2102
- content: "";
2103
- border-left-color: var(--color-main);
2104
- content: "";
2105
- --tw-border-opacity: 1;
2106
- border-bottom-color: rgba(244, 244, 245, var(--tw-border-opacity));
2107
- content: "";
2108
- --tw-border-opacity: 1;
2109
- border-right-color: rgba(244, 244, 245, var(--tw-border-opacity));
2110
- content: '';
2111
- }
2112
-
2113
- .s-modal-close {
2114
- position: absolute;
2115
- top: 1rem;
2116
- z-index: 1;
2117
- cursor: pointer;
2118
- border-style: none;
2119
- background-color: transparent;
2120
- font-size: 1rem;
2121
- line-height: 1.5rem;
2122
- --tw-text-opacity: 1;
2123
- color: rgba(248, 113, 113, var(--tw-text-opacity));
2124
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2125
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2126
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2127
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2128
- transition-duration: 150ms;
2129
- }
2130
-
2131
- [dir="rtl"] .s-modal-close {
2132
- left: 1rem;
2133
- }
2134
-
2135
- [dir="ltr"] .s-modal-close {
2136
- right: 1rem;
2137
- }
2138
-
2139
- .s-modal-close:hover {
2140
- --tw-text-opacity: 1;
2141
- color: rgba(239, 68, 68, var(--tw-text-opacity));
2142
- }
2143
-
2144
- @media (min-width: 640px) {
2145
- .s-modal-close {
2146
- top: 1.25rem;
2147
- }
2148
-
2149
- [dir="rtl"] .s-modal-close {
2150
- left: 1.25rem;
2151
- }
2152
-
2153
- [dir="ltr"] .s-modal-close {
2154
- right: 1.25rem;
2155
- }
2156
- }
2157
-
2158
- .s-modal-header {
2159
- display: flex;
2160
- }
2161
-
2162
- @media (min-width: 640px) {
2163
- .s-modal-header {
2164
- flex-direction: column;
2165
- }
2166
- }
2167
-
2168
- .s-modal-header-inner {
2169
- margin-bottom: 2.5rem;
2170
- display: flex;
2171
- align-items: center;
2172
- }
2173
-
2174
- @media (min-width: 640px) {
2175
- .s-modal-header-inner {
2176
- display: block;
2177
- }
2178
- }
2179
-
2180
- .s-modal-header-content {
2181
- display: flex;
2182
- flex-direction: column;
2183
- -webkit-padding-end: 2.5rem;
2184
- padding-inline-end: 2.5rem;
2185
- }
2186
-
2187
- @media (min-width: 640px) {
2188
- .s-modal-header-content {
2189
- -webkit-padding-end: 0px;
2190
- padding-inline-end: 0px;
2191
- }
2192
- }
2193
-
2194
- .s-modal-header-img {
2195
- margin-left: auto;
2196
- margin-right: auto;
2197
- max-width: 150px;
2198
- }
2199
-
2200
- @media (min-width: 640px) {
2201
- .s-modal-header-img {
2202
- margin-bottom: 1rem;
2203
- }
2204
- }
2205
-
2206
- .s-modal-icon {
2207
- display: inline-flex;
2208
- height: 4rem;
2209
- width: 4rem;
2210
- flex-shrink: 0;
2211
- align-items: center;
2212
- justify-content: center;
2213
- border-radius: 9999px;
2214
- border-width: 1px;
2215
- border-style: solid;
2216
- --tw-border-opacity: 1;
2217
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
2218
- font-size: 1.875rem;
2219
- line-height: 2.25rem;
2220
- --tw-text-opacity: 1;
2221
- color: rgba(161, 161, 170, var(--tw-text-opacity));
2222
- -webkit-margin-end: 0.5rem;
2223
- margin-inline-end: 0.5rem;
2224
- }
2225
-
2226
- @media (min-width: 640px) {
2227
- .s-modal-icon {
2228
- margin-left: auto;
2229
- margin-right: auto;
2230
- }
2231
-
2232
- .s-modal-icon {
2233
- margin-bottom: 1rem;
2234
- }
2235
-
2236
- .s-modal-icon {
2237
- height: 5rem;
2238
- }
2239
-
2240
- .s-modal-icon {
2241
- width: 5rem;
2242
- }
2243
-
2244
- .s-modal-icon {
2245
- -webkit-margin-end: 0px;
2246
- margin-inline-end: 0px;
2247
- }
2248
- }
2249
-
2250
- .s-modal-bg-normal {
2251
- --tw-bg-opacity: 1;
2252
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2253
- }
2254
-
2255
- .s-modal-bg-success {
2256
- --tw-border-opacity: 1;
2257
- border-color: rgba(134, 239, 172, var(--tw-border-opacity));
2258
- --tw-bg-opacity: 1;
2259
- background-color: rgba(220, 252, 231, var(--tw-bg-opacity));
2260
- --tw-text-opacity: 1;
2261
- color: rgba(22, 163, 74, var(--tw-text-opacity));
2262
- }
2263
-
2264
- .s-modal-bg-error {
2265
- --tw-border-opacity: 1;
2266
- border-color: rgba(252, 165, 165, var(--tw-border-opacity));
2267
- --tw-bg-opacity: 1;
2268
- background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
2269
- --tw-text-opacity: 1;
2270
- color: rgba(220, 38, 38, var(--tw-text-opacity));
2271
- }
2272
-
2273
- .s-modal-bg-primary {
2274
- border-color: var(--color-main);
2275
- background-color: var(--color-main);
2276
- color: var(--color-main-reverse);
2277
- }
2278
-
2279
- .s-modal-title {
2280
- font-size: 1.125rem;
2281
- line-height: 1.75rem;
2282
- font-weight: 700;
2283
- line-height: 1.5rem;
2284
- --tw-text-opacity: 1;
2285
- color: rgba(24, 24, 27, var(--tw-text-opacity));
2286
- }
2287
-
2288
- @media (min-width: 640px) {
2289
- .s-modal-title {
2290
- margin-bottom: 0.5rem;
2291
- }
2292
- }
2293
-
2294
- .s-modal-sub-title {
2295
- font-size: 0.875rem;
2296
- line-height: 1.25rem;
2297
- --tw-text-opacity: 1;
2298
- color: rgba(113, 113, 122, var(--tw-text-opacity));
2299
- }
2300
-
2301
- @media (min-width: 640px) {
2302
- .s-modal-sub-title {
2303
- margin-bottom: 0.5rem;
2304
- }
2305
- }
2306
-
2307
- .s-modal-title-below {
2308
- order: 10;
2309
- }
2310
-
2311
- .s-modal-body-slot {
2312
- width: 100%;
2313
- }
2314
-
2315
- .s-modal-body {
2316
- position: relative;
2317
- display: inline-block;
2318
- width: 100%;
2319
- --tw-translate-y: 1rem;
2320
- transform: var(--tw-transform);
2321
- transform: var(--tw-transform);
2322
- overflow: hidden;
2323
- border-radius: 0.5rem;
2324
- border-bottom-right-radius: 0px;
2325
- border-bottom-left-radius: 0px;
2326
- --tw-bg-opacity: 1;
2327
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2328
- --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
2329
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2330
- transition-property: all;
2331
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2332
- transition-duration: 150ms;
2333
- transition-duration: 200ms;
2334
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2335
- }
2336
-
2337
- [dir="rtl"] .s-modal-body {
2338
- text-align: right;
2339
- }
2340
-
2341
- [dir="ltr"] .s-modal-body {
2342
- text-align: left;
2343
- }
2344
-
2345
- @media (min-width: 640px) {
2346
- .s-modal-body {
2347
- margin-top: 2rem;
2348
- margin-bottom: 2rem;
2349
- }
2350
-
2351
- .s-modal-body {
2352
- --tw-translate-y: 0px;
2353
- transform: var(--tw-transform);
2354
- }
2355
-
2356
- .s-modal-body {
2357
- --tw-scale-x: .95;
2358
- --tw-scale-y: .95;
2359
- transform: var(--tw-transform);
2360
- }
2361
-
2362
- .s-modal-body {
2363
- overflow: visible;
2364
- }
2365
-
2366
- .s-modal-body {
2367
- border-bottom-right-radius: 0.5rem;
2368
- border-bottom-left-radius: 0.5rem;
2369
- }
2370
- }
2371
-
2372
- .s-modal-padding {
2373
- padding: 1rem;
2374
- padding-top: 1.5rem;
2375
- }
2376
-
2377
- @media (min-width: 640px) {
2378
- .s-modal-padding {
2379
- padding: 2rem;
2380
- }
2381
- }
2382
-
2383
- .s-modal-spacer {
2384
- display: inline-block;
2385
- height: 100vh;
2386
- }
2387
-
2388
- .s-modal-align-middle {
2389
- vertical-align: middle;
2390
- }
2391
-
2392
- .s-modal-align-top {
2393
- vertical-align: top;
2394
- }
2395
-
2396
- .s-modal-align-bottom {
2397
- vertical-align: bottom;
2398
- }
2399
-
2400
- .s-modal-overlay {
2401
- position: fixed;
2402
- top: 0px;
2403
- right: 0px;
2404
- bottom: 0px;
2405
- left: 0px;
2406
- --tw-bg-opacity: 1;
2407
- background-color: rgba(113, 113, 122, var(--tw-bg-opacity));
2408
- --tw-bg-opacity: 0.75;
2409
- transition-property: opacity;
2410
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2411
- transition-duration: 150ms;
2412
- transition-duration: 200ms;
2413
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2414
- }
2415
-
2416
- .s-modal-overlay-leaving {
2417
- opacity: 0;
2418
- }
2419
-
2420
- .s-modal-entering {
2421
- --tw-translate-y: 0px;
2422
- transform: var(--tw-transform);
2423
- opacity: 1;
2424
- transition-duration: 300ms;
2425
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2426
- }
2427
-
2428
- @media (min-width: 640px) {
2429
- .s-modal-entering {
2430
- --tw-scale-x: 1;
2431
- --tw-scale-y: 1;
2432
- transform: var(--tw-transform);
2433
- }
2434
- }
2435
-
2436
- .s-modal-leaving {
2437
- --tw-translate-y: 1rem;
2438
- transform: var(--tw-transform);
2439
- opacity: 0;
2440
- }
2441
-
2442
- @media (min-width: 640px) {
2443
- .s-modal-leaving {
2444
- --tw-translate-y: 0px;
2445
- transform: var(--tw-transform);
2446
- }
2447
-
2448
- .s-modal-leaving {
2449
- --tw-scale-x: .95;
2450
- --tw-scale-y: .95;
2451
- transform: var(--tw-transform);
2452
- }
2453
- }
2454
-
2455
- .s-modal-is-center {
2456
- align-items: center;
2457
- }
2458
-
2459
- @media (min-width: 640px) {
2460
- .s-modal-is-center {
2461
- text-align: center;
2462
- }
2463
-
2464
- .s-modal-xs {
2465
- width: 380px;
2466
- }
2467
-
2468
- .s-modal-sm {
2469
- width: 480px;
2470
- }
2471
- }
2472
-
2473
- @media (min-width: 768px) {
2474
- .s-modal-md {
2475
- width: 768px;
2476
- }
2477
- }
2478
-
2479
- .s-modal-lg {
2480
- width: 992px;
2481
- }
2482
-
2483
- .s-modal-xl {
2484
- width: 1280px;
2485
- }
2486
-
2487
- .s-modal-full {
2488
- height: 100%;
2489
- width: 100%;
2490
- }
2491
-
2492
- @media (min-width: 768px) {
2493
- .s-modal-full {
2494
- height: calc(100% - 70px);
2495
- }
2496
-
2497
- .s-modal-full {
2498
- width: calc(100% - 70px);
2499
- }
2500
- }
2501
-
2502
- .s-offer-modal-body {
2503
- margin-left: -2rem;
2504
- margin-right: -2rem;
2505
- display: flex;
2506
- gap: 1.5rem;
2507
- overflow-x: auto;
2508
- padding-left: 2rem;
2509
- padding-right: 2rem;
2510
- padding-bottom: 2rem;
2511
- }
2512
-
2513
- .s-offer-modal-badge {
2514
- margin-bottom: 0.625rem;
2515
- display: inline-flex;
2516
- align-items: center;
2517
- justify-content: center;
2518
- border-radius: 22px;
2519
- --tw-bg-opacity: 1;
2520
- background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
2521
- padding-top: 0.625rem;
2522
- padding-bottom: 0.625rem;
2523
- padding-left: 1rem;
2524
- padding-right: 1rem;
2525
- font-size: 0.875rem;
2526
- line-height: 1.25rem;
2527
- --tw-text-opacity: 1;
2528
- color: rgba(113, 113, 122, var(--tw-text-opacity));
2529
- -webkit-margin-end: 0.625rem;
2530
- margin-inline-end: 0.625rem;
2531
- }
2532
-
2533
- .s-offer-modal-badge-icon {
2534
- font-weight: 500;
2535
- -webkit-margin-end: 0.375rem;
2536
- margin-inline-end: 0.375rem;
2537
- }
2538
-
2539
- .s-offer-modal-badge-text {
2540
- --tw-translate-y: -0.125rem;
2541
- transform: var(--tw-transform);
2542
- }
2543
-
2544
- .s-offer-modal-product {
2545
- display: flex;
2546
- width: 70%;
2547
- flex-shrink: 0;
2548
- flex-grow: 1;
2549
- flex-direction: column;
2550
- }
2551
-
2552
- @media (min-width: 640px) {
2553
- .s-offer-modal-product {
2554
- width: 40%;
2555
- }
2556
- }
2557
-
2558
- @media (min-width: 1024px) {
2559
- .s-offer-modal-product {
2560
- width: 28%;
2561
- }
2562
- }
2563
-
2564
- .s-offer-modal-product-image-wrap {
2565
- position: relative;
2566
- margin-bottom: 1rem;
2567
- display: block;
2568
- height: 8rem;
2569
- overflow: hidden;
2570
- border-radius: 0.375rem;
2571
- --tw-bg-opacity: 1;
2572
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
2573
- }
2574
-
2575
- .s-offer-modal-product-image {
2576
- height: 100%;
2577
- width: 100%;
2578
- -o-object-fit: cover;
2579
- object-fit: cover;
2580
- }
2581
-
2582
- .s-offer-modal-not-available {
2583
- --tw-grayscale: grayscale(100%);
2584
- filter: var(--tw-filter);
2585
- }
2586
-
2587
- .s-offer-modal-product-info {
2588
- margin-bottom: 1rem;
2589
- }
2590
-
2591
- .s-offer-modal-product-name {
2592
- margin-bottom: 0.375rem;
2593
- display: flex;
2594
- flex-direction: column;
2595
- align-items: baseline;
2596
- justify-content: flex-start;
2597
- font-size: 1rem;
2598
- line-height: 1.5rem;
2599
- line-height: 1.5rem;
2600
- color: var(--color-title);
2601
- transition-property: background-color, border-color, color, fill, stroke;
2602
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2603
- transition-duration: 150ms;
2604
- }
2605
-
2606
- .s-offer-modal-product-name:hover {
2607
- color: var(--color-main);
2608
- }
2609
-
2610
- .s-offer-modal-product-price {
2611
- margin-bottom: 1.25rem;
2612
- display: flex;
2613
- width: 100%;
2614
- align-items: center;
2615
- font-size: 0.875rem;
2616
- line-height: 1.25rem;
2617
- font-weight: 700;
2618
- }
2619
-
2620
- .s-offer-modal-product-price > :not([hidden]) ~ :not([hidden]) {
2621
- --tw-space-s-reverse: 0;
2622
- -webkit-margin-end: calc(0.25rem * var(--tw-space-s-reverse));
2623
- margin-inline-end: calc(0.25rem * var(--tw-space-s-reverse));
2624
- -webkit-margin-start: calc(0.25rem * calc(1 - var(--tw-space-s-reverse)));
2625
- margin-inline-start: calc(0.25rem * calc(1 - var(--tw-space-s-reverse)));
2626
- }
2627
-
2628
- @media (min-width: 768px) {
2629
- .s-offer-modal-product-price {
2630
- margin-bottom: 0px;
2631
- }
2632
- }
2633
-
2634
- .s-offer-modal-product-old-price {
2635
- margin-left: 0.25rem;
2636
- margin-right: 0.25rem;
2637
- font-size: 0.75rem;
2638
- line-height: 1rem;
2639
- --tw-text-opacity: 1;
2640
- color: rgba(161, 161, 170, var(--tw-text-opacity));
2641
- text-decoration: line-through;
2642
- }
2643
-
2644
- .s-offer-modal-btn-wrap {
2645
- margin-top: auto;
2646
- }
2647
-
2648
- .s-offer-modal-footer {
2649
- display: flex;
2650
- flex-direction: column;
2651
- justify-content: space-between;
2652
- font-size: 0.875rem;
2653
- line-height: 1.25rem;
2654
- --tw-text-opacity: 1;
2655
- color: rgba(161, 161, 170, var(--tw-text-opacity));
2656
- }
2657
-
2658
- @media (min-width: 640px) {
2659
- .s-offer-modal-footer {
2660
- margin-top: 2rem;
2661
- }
2662
-
2663
- .s-offer-modal-footer {
2664
- flex-direction: row;
2665
- }
2666
- }
2667
-
2668
- .s-offer-modal-expiry {
2669
- margin-bottom: 1.25rem;
2670
- }
2671
-
2672
- @media (min-width: 768px) {
2673
- .s-offer-modal-expiry {
2674
- margin-bottom: 0px;
2675
- }
2676
- }
2677
-
2678
- .s-offer-modal-remember-label {
2679
- display: flex;
2680
- cursor: pointer;
2681
- font-size: 0.875rem;
2682
- line-height: 1.25rem;
2683
- font-weight: 500;
2684
- transition-property: background-color, border-color, color, fill, stroke;
2685
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2686
- transition-duration: 150ms;
2687
- }
2688
-
2689
- .s-offer-modal-remember-label:hover {
2690
- --tw-text-opacity: 1;
2691
- color: rgba(113, 113, 122, var(--tw-text-opacity));
2692
- }
2693
-
2694
- @media (min-width: 640px) {
2695
- .s-offer-modal-remember-label {
2696
- -webkit-margin-start: 0.5rem;
2697
- margin-inline-start: 0.5rem;
2698
- }
2699
- }
2700
-
2701
- .s-offer-modal-remember-input {
2702
- height: 1.5rem;
2703
- width: 1.5rem;
2704
- border-radius: 0.375rem;
2705
- --tw-border-opacity: 1;
2706
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
2707
- color: var(--color-main);
2708
- }
2709
-
2710
- .s-offer-modal-remember-input:focus {
2711
- --tw-ring-color: transparent;
2712
- }
2713
-
2714
- .s-offer-modal-scrolled-slider-wrap {
2715
- position: relative;
2716
- }
2717
-
2718
- .s-offer-modal-slider-nav {
2719
- pointer-events: none;
2720
- position: absolute;
2721
- top: 0px;
2722
- margin-left: -2rem;
2723
- margin-right: -2rem;
2724
- display: none;
2725
- height: 100%;
2726
- width: calc(100% + 64px);
2727
- overflow: hidden;
2728
- }
2729
-
2730
- @media (min-width: 640px) {
2731
- .s-offer-modal-slider-nav {
2732
- display: block;
2733
- }
2734
- }
2735
-
2736
- .s-offer-modal-nav-btn {
2737
- position: absolute;
2738
- top: 0px;
2739
- display: flex;
2740
- height: 100%;
2741
- width: 5rem;
2742
- align-items: center;
2743
- justify-content: center;
2744
- opacity: 0;
2745
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2746
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2747
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2748
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2749
- transition-duration: 150ms;
2750
- transition-duration: 300ms;
2751
- }
2752
-
2753
- .s-offer-modal-nav-btn-icon {
2754
- display: inline-flex;
2755
- height: 2.5rem;
2756
- width: 2.5rem;
2757
- align-items: center;
2758
- justify-content: center;
2759
- border-radius: 9999px;
2760
- --tw-bg-opacity: 1;
2761
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2762
- font-size: 1.25rem;
2763
- line-height: 1.75rem;
2764
- color: var(--color-main);
2765
- --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
2766
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2767
- transition-property: box-shadow;
2768
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2769
- transition-duration: 150ms;
2770
- }
2771
-
2772
- .s-offer-modal-nav-btn-icon:hover {
2773
- --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2774
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2775
- }
2776
-
2777
- .s-offer-modal-next-btn {
2778
- --tw-translate-x: 100%;
2779
- transform: var(--tw-transform);
2780
- }
2781
-
2782
- [dir="rtl"] .s-offer-modal-next-btn {
2783
- left: 0px;
2784
- }
2785
-
2786
- [dir="ltr"] .s-offer-modal-next-btn {
2787
- right: 0px;
2788
- }
2789
-
2790
- .s-offer-modal-prev-btn {
2791
- --tw-translate-x: -100%;
2792
- transform: var(--tw-transform);
2793
- }
2794
-
2795
- [dir="rtl"] .s-offer-modal-prev-btn {
2796
- right: 0px;
2797
- }
2798
-
2799
- [dir="ltr"] .s-offer-modal-prev-btn {
2800
- left: 0px;
2801
- }
2802
-
2803
- .s-offer-modal-btn-is-active {
2804
- pointer-events: auto;
2805
- --tw-translate-x: 0px;
2806
- transform: var(--tw-transform);
2807
- opacity: 1;
2808
- }
2809
-
2810
- .s-product-availability-wrap {
2811
- width: 100%;
2812
- }
2813
-
2814
- .s-product-availability-subscribed {
2815
- display: flex;
2816
- width: 100%;
2817
- align-items: center;
2818
- justify-content: center;
2819
- border-radius: 0.375rem;
2820
- --tw-bg-opacity: 1;
2821
- background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
2822
- padding-left: 1.5rem;
2823
- padding-right: 1.5rem;
2824
- padding-top: 0.75rem;
2825
- padding-bottom: 0.75rem;
2826
- font-size: 0.875rem;
2827
- line-height: 1.25rem;
2828
- font-weight: 700;
2829
- --tw-text-opacity: 1;
2830
- color: rgba(34, 197, 94, var(--tw-text-opacity));
2831
- }
2832
-
2833
- .s-product-availability-subs-icon {
2834
- margin-left: 0.375rem;
2835
- margin-right: 0.375rem;
2836
- font-weight: 700;
2837
- }
2838
-
2839
- .s-product-availability-body {
2840
- position: relative;
2841
- z-index: 50;
2842
- }
2843
-
2844
- .s-product-availability-label {
2845
- margin-bottom: 0.625rem;
2846
- display: block;
2847
- font-size: 0.875rem;
2848
- line-height: 1.25rem;
2849
- font-weight: 700;
2850
- --tw-text-opacity: 1;
2851
- color: rgba(63, 63, 70, var(--tw-text-opacity));
2852
- }
2853
-
2854
- [dir="rtl"] .s-product-availability-label {
2855
- text-align: right;
2856
- }
2857
-
2858
- [dir="ltr"] .s-product-availability-label {
2859
- text-align: left;
2860
- }
2861
-
2862
- .s-product-availability-input {
2863
- height: 2.5rem;
2864
- width: 100%;
2865
- border-radius: 0.375rem;
2866
- border-width: 1px;
2867
- --tw-border-opacity: 1;
2868
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
2869
- padding-left: 0.75rem;
2870
- padding-right: 0.75rem;
2871
- font-size: 0.875rem;
2872
- line-height: 1.25rem;
2873
- transition-property: background-color, border-color, color, fill, stroke;
2874
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2875
- transition-duration: 150ms;
2876
- }
2877
-
2878
- .s-product-availability-input:focus {
2879
- border-color: var(--color-main);
2880
- }
2881
-
2882
- .dark .s-product-availability-input {
2883
- --tw-border-opacity: 1;
2884
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
2885
- --tw-bg-opacity: 1;
2886
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
2887
- }
2888
-
2889
- .s-product-availability-footer {
2890
- display: flex;
2891
- justify-content: space-between;
2892
- }
2893
-
2894
- .s-product-availability-footer > :not([hidden]) ~ :not([hidden]) {
2895
- --tw-space-s-reverse: 0;
2896
- -webkit-margin-end: calc(1rem * var(--tw-space-s-reverse));
2897
- margin-inline-end: calc(1rem * var(--tw-space-s-reverse));
2898
- -webkit-margin-start: calc(1rem * calc(1 - var(--tw-space-s-reverse)));
2899
- margin-inline-start: calc(1rem * calc(1 - var(--tw-space-s-reverse)));
2900
- }
2901
-
2902
- .s-product-availability-footer-btn {
2903
- width: 100%;
2904
- }
2905
-
2906
- .s-product-availability-error-msg {
2907
- display: block;
2908
- height: 1.75rem;
2909
- padding-top: 0.25rem;
2910
- font-size: 0.75rem;
2911
- line-height: 1rem;
2912
- --tw-border-opacity: 1;
2913
- border-color: rgba(248, 113, 113, var(--tw-border-opacity));
2914
- }
2915
-
2916
- .s-product-availability-error-msg:focus {
2917
- --tw-border-opacity: 1;
2918
- border-color: rgba(239, 68, 68, var(--tw-border-opacity));
2919
- }
2920
-
2921
- .s-product-availability-error-msg {
2922
- --tw-border-opacity: 1 !important;
2923
- border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
2924
- --tw-text-opacity: 1 !important;
2925
- color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
2926
- }
2927
-
2928
- .s-quantity-input-container {
2929
- display: flex;
2930
- height: 2.5rem;
2931
- align-items: stretch;
2932
- border-radius: 0.375rem;
2933
- border-width: 1px;
2934
- font-size: 0.875rem;
2935
- line-height: 1.25rem;
2936
- }
2937
-
2938
- .s-quantity-input-input {
2939
- width: 3rem;
2940
- border-width: 1px;
2941
- border-top-width: 0px;
2942
- border-bottom-width: 0px;
2943
- --tw-border-opacity: 1;
2944
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
2945
- padding-left: 0.5rem;
2946
- padding-right: 0.5rem;
2947
- text-align: center;
2948
- font-weight: 700;
2949
- --tw-shadow: 0 0 #0000;
2950
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2951
- }
2952
-
2953
- .s-quantity-input-input:focus {
2954
- --tw-border-opacity: 1;
2955
- border-color: rgba(212, 212, 216, var(--tw-border-opacity));
2956
- }
2957
-
2958
- .s-quantity-input-button {
2959
- width: 2.75rem;
2960
- --tw-text-opacity: 1;
2961
- color: rgba(161, 161, 170, var(--tw-text-opacity));
2962
- transition-property: background-color, border-color, color, fill, stroke;
2963
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2964
- transition-duration: 150ms;
2965
- transition-duration: 300ms;
2966
- }
2967
-
2968
- .s-quantity-input-button:hover {
2969
- color: var(--color-main);
2970
- }
2971
-
2972
- .s-rating-modal-wrapper {
2973
- margin-bottom: 2.5rem;
2974
- transition-property: all;
2975
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2976
- transition-duration: 150ms;
2977
- transition-duration: 300ms;
2978
- transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
2979
- }
2980
-
2981
- .s-rating-modal-footer {
2982
- position: relative;
2983
- display: flex;
2984
- align-items: center;
2985
- justify-content: space-between;
2986
- }
2987
-
2988
- .s-rating-modal-btn {
2989
- height: 2.5rem;
2990
- padding-left: 1rem;
2991
- padding-right: 1rem;
2992
- font-size: 0.875rem;
2993
- line-height: 1.25rem;
2994
- font-weight: 700;
2995
- color: var(--color-main);
2996
- transition-property: all;
2997
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2998
- transition-duration: 150ms;
2999
- transition-duration: 300ms;
3000
- }
3001
-
3002
- .s-rating-modal-btn:hover {
3003
- color: var(--color-main-d);
3004
- }
3005
-
3006
- .s-rating-modal-dots {
3007
- position: absolute;
3008
- left: 50%;
3009
- display: flex;
3010
- flex: 1 1 0%;
3011
- --tw-translate-x: -50%;
3012
- transform: var(--tw-transform);
3013
- justify-content: center;
3014
- text-align: center;
3015
- }
3016
-
3017
- .s-rating-modal-dots > :not([hidden]) ~ :not([hidden]) {
3018
- --tw-space-s-reverse: 0;
3019
- -webkit-margin-end: calc(0.375rem * var(--tw-space-s-reverse));
3020
- margin-inline-end: calc(0.375rem * var(--tw-space-s-reverse));
3021
- -webkit-margin-start: calc(0.375rem * calc(1 - var(--tw-space-s-reverse)));
3022
- margin-inline-start: calc(0.375rem * calc(1 - var(--tw-space-s-reverse)));
3023
- }
3024
-
3025
- .s-rating-modal-step-dot {
3026
- height: 0.625rem;
3027
- width: 0.625rem;
3028
- border-radius: 9999px;
3029
- transition-property: background-color, border-color, color, fill, stroke;
3030
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3031
- transition-duration: 150ms;
3032
- transition-duration: 300ms;
3033
- }
3034
-
3035
- .s-rating-modal-step {
3036
- transition-property: all;
3037
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3038
- transition-duration: 150ms;
3039
- transition-duration: 500ms;
3040
- }
3041
-
3042
- .s-rating-modal-active {
3043
- --tw-translate-x: 0px;
3044
- transform: var(--tw-transform);
3045
- opacity: 1;
3046
- }
3047
-
3048
- .s-rating-modal-unactive {
3049
- --tw-translate-x: 0.75rem;
3050
- transform: var(--tw-transform);
3051
- opacity: 0;
3052
- }
3053
-
3054
- .s-rating-modal-hidden {
3055
- display: none !important;
3056
- }
3057
-
3058
- .s-rating-modal-unvisiable {
3059
- pointer-events: none;
3060
- opacity: 0;
3061
- }
3062
-
3063
- .s-rating-modal-step-wrap {
3064
- position: relative;
3065
- display: flex;
3066
- flex-direction: column;
3067
- align-items: center;
3068
- padding-bottom: 1rem;
3069
- }
3070
-
3071
- .s-rating-modal-product-details {
3072
- position: relative;
3073
- display: flex;
3074
- flex: 1 1 0%;
3075
- flex-direction: column;
3076
- padding-bottom: 1rem;
3077
- }
3078
-
3079
- .s-rating-modal-rounded-icon {
3080
- margin-bottom: 1rem;
3081
- display: flex;
3082
- height: 7rem;
3083
- width: 7rem;
3084
- align-items: center;
3085
- justify-content: center;
3086
- overflow: hidden;
3087
- border-radius: 9999px;
3088
- border-width: 1px;
3089
- --tw-border-opacity: 1;
3090
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
3091
- }
3092
-
3093
- .s-rating-modal-title {
3094
- margin-bottom: 1rem;
3095
- font-size: 1.125rem;
3096
- line-height: 1.75rem;
3097
- font-weight: 700;
3098
- }
3099
-
3100
- .s-rating-modal-store-logo {
3101
- width: 4rem;
3102
- -o-object-fit: contain;
3103
- object-fit: contain;
3104
- }
3105
-
3106
- .s-rating-modal-shipping-logo {
3107
- height: 100%;
3108
- width: 100%;
3109
- -o-object-fit: contain;
3110
- object-fit: contain;
3111
- }
3112
-
3113
- .s-rating-modal-shipping-icon {
3114
- font-size: 3rem;
3115
- line-height: 1;
3116
- color: var(--color-main);
3117
- }
3118
-
3119
- .s-rating-modal-comment {
3120
- margin-bottom: 1rem;
3121
- margin-bottom: 0.5rem;
3122
- height: 5rem !important;
3123
- width: 100%;
3124
- border-radius: 0.375rem;
3125
- border-width: 1px;
3126
- --tw-border-opacity: 1;
3127
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
3128
- padding: 0.75rem;
3129
- font-size: 0.875rem;
3130
- line-height: 1.25rem;
3131
- transition-property: background-color, border-color, color, fill, stroke;
3132
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3133
- transition-duration: 150ms;
3134
- }
3135
-
3136
- .s-rating-modal-comment:focus {
3137
- border-color: var(--color-main);
3138
- }
3139
-
3140
- .dark .s-rating-modal-comment {
3141
- --tw-border-opacity: 1;
3142
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
3143
- --tw-bg-opacity: 1;
3144
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
3145
- }
3146
-
3147
- .s-rating-modal-validation-msg {
3148
- position: absolute;
3149
- bottom: 0px;
3150
- display: block;
3151
- width: 100%;
3152
- --tw-text-opacity: 1;
3153
- color: rgba(248, 113, 113, var(--tw-text-opacity));
3154
- }
3155
-
3156
- .s-rating-modal-product {
3157
- margin-bottom: 1.5rem;
3158
- display: flex;
3159
- }
3160
-
3161
- .s-rating-modal-product > :not([hidden]) ~ :not([hidden]) {
3162
- --tw-space-s-reverse: 0;
3163
- -webkit-margin-end: calc(1.25rem * var(--tw-space-s-reverse));
3164
- margin-inline-end: calc(1.25rem * var(--tw-space-s-reverse));
3165
- -webkit-margin-start: calc(1.25rem * calc(1 - var(--tw-space-s-reverse)));
3166
- margin-inline-start: calc(1.25rem * calc(1 - var(--tw-space-s-reverse)));
3167
- }
3168
-
3169
- .s-rating-modal-product:last-child {
3170
- margin-bottom: 0px;
3171
- }
3172
-
3173
- .s-rating-modal-product-img-wrap {
3174
- height: 3.5rem;
3175
- width: 4.5rem;
3176
- overflow: hidden;
3177
- border-radius: 0.375rem;
3178
- --tw-bg-opacity: 1;
3179
- background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
3180
- }
3181
-
3182
- .s-rating-modal-product-img {
3183
- height: 100%;
3184
- width: 100%;
3185
- -o-object-fit: cover;
3186
- object-fit: cover;
3187
- }
3188
-
3189
- .s-rating-modal-product-title {
3190
- margin-bottom: 0.375rem;
3191
- font-weight: 700;
3192
- line-height: 1.25rem;
3193
- }
3194
-
3195
- @media (min-width: 768px) {
3196
- .s-rating-modal-product-title {
3197
- font-size: 0.875rem;
3198
- line-height: 1.25rem;
3199
- }
3200
- }
3201
-
3202
- .s-rating-modal-thanks {
3203
- padding-left: 2rem;
3204
- padding-right: 2rem;
3205
- text-align: center;
3206
- transition-property: all;
3207
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3208
- transition-duration: 150ms;
3209
- transition-duration: 500ms;
3210
- }
3211
-
3212
- .s-rating-modal-icon {
3213
- display: inline-flex;
3214
- height: 5rem;
3215
- width: 5rem;
3216
- align-items: center;
3217
- justify-content: center;
3218
- border-radius: 9999px;
3219
- --tw-bg-opacity: 1;
3220
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
3221
- font-size: 2.25rem;
3222
- line-height: 2.5rem;
3223
- color: var(--color-main);
3224
- }
3225
-
3226
- .s-rating-modal-thanks-title {
3227
- margin-top: 1rem;
3228
- font-weight: 700;
3229
- }
3230
-
3231
- .s-rating-modal-thanks-msg {
3232
- margin-bottom: 1.5rem;
3233
- font-size: 0.875rem;
3234
- line-height: 1.25rem;
3235
- --tw-text-opacity: 1;
3236
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3237
- }
3238
-
3239
- .s-rating-modal-thanks-btn {
3240
- height: 2.5rem;
3241
- flex: none;
3242
- padding-left: 2rem;
3243
- padding-right: 2rem;
3244
- display: inline-flex;
3245
- flex: 1 1 0%;
3246
- align-items: center;
3247
- justify-content: center;
3248
- white-space: nowrap;
3249
- border-radius: 0.375rem;
3250
- padding-left: 1.5rem;
3251
- padding-right: 1.5rem;
3252
- padding-bottom: 0.625rem;
3253
- padding-top: 0.5rem;
3254
- font-size: 0.875rem;
3255
- line-height: 1.25rem;
3256
- font-weight: 700;
3257
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
3258
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3259
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
3260
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3261
- transition-duration: 150ms;
3262
- transition-duration: 300ms;
3263
- }
3264
-
3265
- .s-rating-modal-thanks-btn:hover {
3266
- opacity: 0.8;
3267
- }
3268
-
3269
- .s-rating-modal-thanks-btn {
3270
- border-width: 1px;
3271
- border-color: var(--color-main);
3272
- background-color: var(--color-main);
3273
- color: var(--color-main-reverse);
3274
- }
3275
-
3276
- .s-rating-modal-thanks-time {
3277
- margin-top: 0.75rem;
3278
- display: block;
3279
- height: 1.5rem;
3280
- font-size: 0.875rem;
3281
- line-height: 1.25rem;
3282
- --tw-text-opacity: 1;
3283
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3284
- }
3285
-
3286
- .s-rating-modal-stars-company {
3287
- margin-bottom: 1.25rem;
3288
- }
3289
-
3290
- .s-rating-modal-stars-product {
3291
- margin-bottom: 0.25rem;
3292
- }
3293
-
3294
- .s-rating-modal-bg-gray {
3295
- --tw-bg-opacity: 1;
3296
- background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
3297
- }
3298
-
3299
- .s-rating-modal-bg-primary {
3300
- background-color: var(--color-main);
3301
- }
3302
-
3303
- .s-rating-stars-wrapper {
3304
- display: inline-flex;
3305
- }
3306
-
3307
- .s-rating-stars-btn-star {
3308
- border-width: 0px;
3309
- padding-left: 0.125rem;
3310
- padding-right: 0.125rem;
3311
- --tw-text-opacity: 1;
3312
- color: rgba(212, 212, 216, var(--tw-text-opacity));
3313
- transition-property: background-color, border-color, color, fill, stroke;
3314
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3315
- transition-duration: 150ms;
3316
- }
3317
-
3318
- .s-rating-stars-large {
3319
- font-size: 1.5rem;
3320
- line-height: 2rem;
3321
- }
3322
-
3323
- .s-rating-stars-medium {
3324
- font-size: 1.25rem;
3325
- line-height: 1.75rem;
3326
- }
3327
-
3328
- .s-rating-stars-small {
3329
- font-size: 1.125rem;
3330
- line-height: 1.75rem;
3331
- }
3332
-
3333
- .s-rating-stars-hovered {
3334
- --tw-text-opacity: 1;
3335
- color: rgba(251, 191, 36, var(--tw-text-opacity));
3336
- }
3337
-
3338
- .s-rating-stars-selected {
3339
- --tw-text-opacity: 1;
3340
- color: rgba(251, 191, 36, var(--tw-text-opacity));
3341
- }
3342
-
3343
- .s-search-container {
3344
- position: relative;
3345
- z-index: 1;
3346
- max-height: 14rem;
3347
- border-radius: 0.375rem;
3348
- --tw-bg-opacity: 1;
3349
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
3350
- }
3351
-
3352
- .s-search-oval {
3353
- border-radius: 20px;
3354
- }
3355
-
3356
- .s-search-inline {
3357
- min-width: 220px;
3358
- }
3359
-
3360
- .s-search-container-open {
3361
- max-height: 28rem;
3362
- border-bottom-right-radius: 0px !important;
3363
- border-bottom-left-radius: 0px !important;
3364
- }
3365
-
3366
- .s-search-input {
3367
- width: 100%;
3368
- border-width: 0px;
3369
- background-color: transparent;
3370
- padding-top: 0px;
3371
- padding-bottom: 0.125rem;
3372
- --tw-text-opacity: 1;
3373
- color: rgba(82, 82, 91, var(--tw-text-opacity));
3374
- height: 2.5rem;
3375
- width: 100%;
3376
- border-radius: 0.375rem;
3377
- --tw-border-opacity: 1;
3378
- border-color: rgba(238, 238, 238, var(--tw-border-opacity));
3379
- transition-property: background-color, border-color, color, fill, stroke;
3380
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3381
- transition-duration: 150ms;
3382
- transition-duration: 300ms;
3383
- }
3384
-
3385
- .s-search-input:focus {
3386
- border-color: var(--color-main);
3387
- --tw-ring-color: transparent;
3388
- }
3389
-
3390
- .dark .s-search-input {
3391
- --tw-border-opacity: 1;
3392
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
3393
- --tw-bg-opacity: 1;
3394
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
3395
- }
3396
-
3397
- .dark .s-search-input:focus {
3398
- border-color: var(--color-main);
3399
- }
3400
-
3401
- @media (min-width: 640px) {
3402
- .s-search-input {
3403
- font-size: 0.875rem;
3404
- line-height: 1.25rem;
3405
- }
3406
- }
3407
-
3408
- .s-search-input {
3409
- -webkit-padding-start: 2.5rem;
3410
- padding-inline-start: 2.5rem;
3411
- }
3412
-
3413
- .s-search-icon-wrap {
3414
- position: absolute;
3415
- top: 50%;
3416
- --tw-translate-y: -50%;
3417
- transform: var(--tw-transform);
3418
- transform: var(--tw-transform);
3419
- line-height: 1;
3420
- --tw-text-opacity: 1;
3421
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3422
- }
3423
-
3424
- [dir="rtl"] .s-search-icon-wrap {
3425
- right: 1rem;
3426
- }
3427
-
3428
- [dir="ltr"] .s-search-icon-wrap {
3429
- left: 1rem;
3430
- }
3431
-
3432
- .s-search-spinner-loader {
3433
- display: block;
3434
- height: 1rem;
3435
- width: 1rem;
3436
- }
3437
-
3438
- @keyframes spin {
3439
- to {
3440
- transform: rotate(360deg);
3441
- }
3442
- }
3443
-
3444
- .s-search-spinner-loader {
3445
- -webkit-animation: spin 1s linear infinite;
3446
- animation: spin 1s linear infinite;
3447
- border-radius: 9999px;
3448
- border-width: 2px;
3449
- --tw-border-opacity: 1;
3450
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
3451
- border-right-color: var(--color-main);
3452
- }
3453
-
3454
- .s-search-results {
3455
- position: absolute;
3456
- margin: auto;
3457
- max-height: 24rem;
3458
- width: 100%;
3459
- min-width: 400px;
3460
- max-width: 100%;
3461
- overflow-y: auto;
3462
- border-bottom-right-radius: 0.375rem;
3463
- border-bottom-left-radius: 0.375rem;
3464
- --tw-bg-opacity: 1;
3465
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
3466
- --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3467
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3468
- }
3469
-
3470
- .s-search-no-results {
3471
- border-bottom-right-radius: 0px !important;
3472
- border-bottom-left-radius: 0px !important;
3473
- }
3474
-
3475
- .s-search-no-results-placeholder {
3476
- padding: 1rem;
3477
- text-align: center;
3478
- font-size: 0.875rem;
3479
- line-height: 1.25rem;
3480
- --tw-text-opacity: 1;
3481
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3482
- }
3483
-
3484
- .s-search-product {
3485
- display: flex;
3486
- height: 100%;
3487
- justify-content: space-around;
3488
- overflow: hidden;
3489
- border-bottom-width: 1px;
3490
- --tw-border-opacity: 1;
3491
- border-color: rgba(244, 244, 245, var(--tw-border-opacity));
3492
- background-color: transparent;
3493
- padding-left: 1rem;
3494
- padding-right: 1rem;
3495
- padding-top: 0.75rem;
3496
- padding-bottom: 0.75rem;
3497
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
3498
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3499
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
3500
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3501
- transition-duration: 150ms;
3502
- transition-property: background-color, border-color, color, fill, stroke;
3503
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3504
- transition-duration: 150ms;
3505
- transition-duration: 500ms;
3506
- transition-duration: 300ms;
3507
- }
3508
-
3509
- .s-search-product:last-child {
3510
- border-bottom-width: 0px;
3511
- }
3512
-
3513
- .s-search-product:hover {
3514
- --tw-bg-opacity: 1;
3515
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
3516
- }
3517
-
3518
- @media (min-width: 480px) {
3519
- .s-search-product {
3520
- padding-left: 1.25rem;
3521
- padding-right: 1.25rem;
3522
- }
3523
- }
3524
-
3525
- .s-search-product-image-container {
3526
- position: relative;
3527
- height: 3.5rem;
3528
- width: 5rem;
3529
- overflow: hidden;
3530
- border-radius: 0.375rem;
3531
- --tw-bg-opacity: 1;
3532
- background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
3533
- }
3534
-
3535
- .s-search-product-image {
3536
- height: 100%;
3537
- width: 100%;
3538
- -o-object-fit: cover;
3539
- object-fit: cover;
3540
- }
3541
-
3542
- .s-search-product-details {
3543
- flex: 1 1 0%;
3544
- padding-top: 0.25rem;
3545
- -webkit-padding-start: 1rem;
3546
- padding-inline-start: 1rem;
3547
- }
3548
-
3549
- @media (min-width: 480px) {
3550
- .s-search-product-details {
3551
- -webkit-padding-start: 1.25rem;
3552
- padding-inline-start: 1.25rem;
3553
- }
3554
- }
3555
-
3556
- .s-search-product-title {
3557
- margin-bottom: 0.375rem;
3558
- display: flex;
3559
- flex-direction: column;
3560
- align-items: baseline;
3561
- justify-content: flex-start;
3562
- font-size: 0.875rem;
3563
- line-height: 1.25rem;
3564
- font-weight: 700;
3565
- line-height: 1.5rem;
3566
- --tw-text-opacity: 1;
3567
- color: rgba(82, 82, 91, var(--tw-text-opacity));
3568
- }
3569
-
3570
- .s-search-product-price {
3571
- display: flex;
3572
- width: 100%;
3573
- align-items: center;
3574
- font-size: 0.875rem;
3575
- line-height: 1.25rem;
3576
- font-weight: 700;
3577
- color: var(--color-main);
3578
- }
3579
-
3580
- .s-search-product-regular-price {
3581
- padding-left: 0.75rem;
3582
- padding-right: 0.75rem;
3583
- font-weight: 500;
3584
- --tw-text-opacity: 1;
3585
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3586
- text-decoration: line-through;
3587
- }
3588
-
3589
- .s-search-product-not-available {
3590
- --tw-grayscale: grayscale(100%);
3591
- filter: var(--tw-filter);
3592
- }
3593
-
3594
- .s-tel-input-control {
3595
- height: 2.5rem;
3596
- width: 100%;
3597
- border-radius: 0.375rem;
3598
- border-width: 1px;
3599
- --tw-border-opacity: 1;
3600
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
3601
- padding-left: 0.75rem;
3602
- padding-right: 0.75rem;
3603
- font-size: 0.875rem;
3604
- line-height: 1.25rem;
3605
- transition-property: background-color, border-color, color, fill, stroke;
3606
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3607
- transition-duration: 150ms;
3608
- }
3609
-
3610
- .s-tel-input-control:focus {
3611
- border-color: var(--color-main);
3612
- }
3613
-
3614
- .dark .s-tel-input-control {
3615
- --tw-border-opacity: 1;
3616
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
3617
- --tw-bg-opacity: 1;
3618
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
3619
- }
3620
-
3621
- .s-tel-input-error-msg {
3622
- margin-bottom: 0.625rem;
3623
- display: block;
3624
- height: 1.5rem;
3625
- padding-top: 0.25rem;
3626
- font-size: 0.75rem;
3627
- line-height: 1rem;
3628
- --tw-border-opacity: 1;
3629
- border-color: rgba(248, 113, 113, var(--tw-border-opacity));
3630
- }
3631
-
3632
- .s-tel-input-error-msg:focus {
3633
- --tw-border-opacity: 1;
3634
- border-color: rgba(239, 68, 68, var(--tw-border-opacity));
3635
- }
3636
-
3637
- .s-tel-input-error-msg {
3638
- --tw-border-opacity: 1 !important;
3639
- border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
3640
- --tw-text-opacity: 1 !important;
3641
- color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
3642
- }
3643
-
3644
- .s-verify-modal-message {
3645
- margin-bottom: 1.75rem;
3646
- text-align: center;
3647
- font-size: 0.75rem;
3648
- line-height: 1rem;
3649
- --tw-text-opacity: 1;
3650
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3651
- }
3652
-
3653
- .s-verify-modal-label {
3654
- margin-bottom: 1rem;
3655
- display: block;
3656
- text-align: center;
3657
- font-size: 0.875rem;
3658
- line-height: 1.25rem;
3659
- }
3660
-
3661
- .s-verify-modal-codes {
3662
- margin-bottom: 1.25rem;
3663
- display: flex;
3664
- justify-content: space-between;
3665
- }
3666
-
3667
- .s-verify-modal-codes > :not([hidden]) ~ :not([hidden]) {
3668
- --tw-space-s-reverse: 0;
3669
- -webkit-margin-end: calc(0.5rem * var(--tw-space-s-reverse));
3670
- margin-inline-end: calc(0.5rem * var(--tw-space-s-reverse));
3671
- -webkit-margin-start: calc(0.5rem * calc(1 - var(--tw-space-s-reverse)));
3672
- margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-s-reverse)));
3673
- }
3674
-
3675
- .s-verify-modal-input {
3676
- height: 2.5rem;
3677
- width: 100%;
3678
- border-radius: 0.375rem;
3679
- border-width: 1px;
3680
- --tw-border-opacity: 1;
3681
- border-color: rgba(228, 228, 231, var(--tw-border-opacity));
3682
- padding-left: 0.5rem;
3683
- padding-right: 0.5rem;
3684
- text-align: center;
3685
- font-size: 1.125rem;
3686
- line-height: 1.75rem;
3687
- font-weight: 700;
3688
- transition-property: background-color, border-color, color, fill, stroke;
3689
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3690
- transition-duration: 150ms;
3691
- }
3692
-
3693
- .s-verify-modal-input:focus {
3694
- border-color: var(--color-main);
3695
- }
3696
-
3697
- .dark .s-verify-modal-input {
3698
- --tw-border-opacity: 1;
3699
- border-color: rgba(82, 82, 91, var(--tw-border-opacity));
3700
- --tw-bg-opacity: 1;
3701
- background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
3702
- }
3703
-
3704
- .s-verify-modal-footer {
3705
- text-align: center;
3706
- }
3707
-
3708
- .s-verify-modal-submit {
3709
- margin-bottom: 1.25rem;
3710
- width: 100%;
3711
- }
3712
-
3713
- .s-verify-modal-resend-message {
3714
- font-size: 0.875rem;
3715
- line-height: 1.25rem;
3716
- --tw-text-opacity: 1;
3717
- color: rgba(161, 161, 170, var(--tw-text-opacity));
3718
- }
3719
-
3720
- .s-verify-modal-timer {
3721
- margin-left: 0.25rem;
3722
- margin-right: 0.25rem;
3723
- --tw-text-opacity: 1;
3724
- color: rgba(63, 63, 70, var(--tw-text-opacity));
3725
- }
3726
-
3727
- .s-verify-modal-resend {
3728
- text-align: center;
3729
- font-size: 0.875rem;
3730
- line-height: 1.25rem;
3731
- color: var(--color-main);
3732
- }
3733
-
3734
- .s-verify-modal-back {
3735
- position: absolute;
3736
- top: -12rem;
3737
- display: flex;
3738
- height: 2.5rem;
3739
- width: 2.5rem;
3740
- align-items: center;
3741
- justify-content: center;
3742
- border-radius: 9999px;
3743
- --tw-bg-opacity: 1;
3744
- background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
3745
- font-size: 1.125rem;
3746
- line-height: 1.75rem;
3747
- --tw-text-opacity: 1;
3748
- color: rgba(82, 82, 91, var(--tw-text-opacity));
3749
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
3750
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3751
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
3752
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3753
- transition-duration: 150ms;
3754
- }
3755
-
3756
- [dir="rtl"] .s-verify-modal-back {
3757
- right: -0.75rem;
3758
- }
3759
-
3760
- [dir="ltr"] .s-verify-modal-back {
3761
- left: -0.75rem;
3762
- }
3763
-
3764
- .s-verify-modal-back:hover {
3765
- --tw-bg-opacity: 1;
3766
- background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
3767
- }
3768
-
3769
- .me-6 {
3770
- -webkit-margin-end: 1.5rem;
3771
- margin-inline-end: 1.5rem;
3772
- }
3773
-
3774
- .hover\:text-primary:hover {
3775
- color: var(--color-main);
3776
- }
3777
-
3778
- .hover\:text-gray-900:hover {
3779
- --tw-text-opacity: 1;
3780
- color: rgba(24, 24, 27, var(--tw-text-opacity));
3781
- }
3782
-
3783
- .hover\:text-teal-600:hover {
3784
- --tw-text-opacity: 1;
3785
- color: rgba(13, 148, 136, var(--tw-text-opacity));
3786
- }
3787
-
3788
- .group:hover .group-hover\:text-teal-600 {
3789
- --tw-text-opacity: 1;
3790
- color: rgba(13, 148, 136, var(--tw-text-opacity));
3791
- }
3792
-
3793
- @media (min-width: 640px) {
3794
- .sm\:ml-2 {
3795
- margin-left: 0.5rem;
3796
- }
3797
-
3798
- .sm\:mr-0 {
3799
- margin-right: 0px;
3800
- }
3801
-
3802
- .sm\:-mr-3\.5 {
3803
- margin-right: -0.875rem;
3804
- }
3805
-
3806
- .sm\:-mr-3 {
3807
- margin-right: -0.75rem;
3808
- }
3809
-
3810
- .sm\:block {
3811
- display: block;
3812
- }
3813
-
3814
- .sm\:flex {
3815
- display: flex;
3816
- }
3817
-
3818
- .sm\:hidden {
3819
- display: none;
3820
- }
3821
-
3822
- .sm\:border-l {
3823
- border-left-width: 1px;
3824
- }
3825
-
3826
- .sm\:px-6 {
3827
- padding-left: 1.5rem;
3828
- padding-right: 1.5rem;
3829
- }
3830
-
3831
- .sm\:pl-6 {
3832
- padding-left: 1.5rem;
3833
- }
3834
- }
3835
-
3836
- @media (min-width: 1024px) {
3837
- .lg\:block {
3838
- display: block;
3839
- }
3840
-
3841
- .lg\:px-8 {
3842
- padding-left: 2rem;
3843
- padding-right: 2rem;
3844
- }
3845
- }
3846
-
3847
- @media (min-width: 1280px) {
3848
- .xl\:col-span-1 {
3849
- grid-column: span 1 / span 1;
3850
- }
3851
-
3852
- .xl\:grid-cols-4 {
3853
- grid-template-columns: repeat(4, minmax(0, 1fr));
3854
- }
3855
- }
3856
-