@bridgeline-digital/hawksearch-handlebars-ui 5.2.7 → 5.2.8

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.
@@ -0,0 +1,1896 @@
1
+ /***************
2
+ CSS Reset
3
+ http://meyerweb.com/eric/tools/css/reset/
4
+ v2.0 | 20110126
5
+ License: none (public domain)
6
+ ***************/
7
+ html,
8
+ body,
9
+ div,
10
+ span,
11
+ applet,
12
+ object,
13
+ iframe,
14
+ h1,
15
+ h2,
16
+ h3,
17
+ h4,
18
+ h5,
19
+ h6,
20
+ p,
21
+ blockquote,
22
+ pre,
23
+ a,
24
+ abbr,
25
+ acronym,
26
+ address,
27
+ big,
28
+ cite,
29
+ code,
30
+ del,
31
+ dfn,
32
+ em,
33
+ img,
34
+ ins,
35
+ kbd,
36
+ q,
37
+ s,
38
+ samp,
39
+ small,
40
+ strike,
41
+ strong,
42
+ sub,
43
+ sup,
44
+ tt,
45
+ var,
46
+ b,
47
+ u,
48
+ i,
49
+ center,
50
+ dl,
51
+ dt,
52
+ dd,
53
+ ol,
54
+ ul,
55
+ li,
56
+ fieldset,
57
+ form,
58
+ label,
59
+ legend,
60
+ table,
61
+ caption,
62
+ tbody,
63
+ tfoot,
64
+ thead,
65
+ tr,
66
+ th,
67
+ td,
68
+ article,
69
+ aside,
70
+ canvas,
71
+ details,
72
+ embed,
73
+ figure,
74
+ figcaption,
75
+ footer,
76
+ header,
77
+ hgroup,
78
+ menu,
79
+ nav,
80
+ output,
81
+ ruby,
82
+ section,
83
+ summary,
84
+ time,
85
+ mark,
86
+ audio,
87
+ video {
88
+ box-shadow: none;
89
+ margin: 0;
90
+ padding: 0;
91
+ border: 0;
92
+ font-size: 100%;
93
+ font-weight: normal;
94
+ font: inherit;
95
+ vertical-align: baseline;
96
+ color: inherit;
97
+ text-transform: none;
98
+ text-shadow: none;
99
+ background: transparent;
100
+ }
101
+
102
+ /* HTML5 display-role reset for older browsers */
103
+ article,
104
+ aside,
105
+ details,
106
+ figcaption,
107
+ figure,
108
+ footer,
109
+ header,
110
+ hgroup,
111
+ menu,
112
+ nav,
113
+ section {
114
+ display: block;
115
+ }
116
+
117
+ body {
118
+ line-height: 1;
119
+ }
120
+
121
+ ol,
122
+ ul {
123
+ list-style: none;
124
+ width: auto;
125
+ }
126
+ ol li,
127
+ ul li {
128
+ list-style: none;
129
+ }
130
+
131
+ blockquote,
132
+ q {
133
+ quotes: none;
134
+ }
135
+
136
+ blockquote:before,
137
+ blockquote:after,
138
+ q:before,
139
+ q:after {
140
+ content: "";
141
+ content: none;
142
+ }
143
+
144
+ table {
145
+ border-collapse: collapse;
146
+ border-spacing: 0;
147
+ }
148
+
149
+ img {
150
+ display: inline-block;
151
+ }
152
+
153
+ /**************
154
+ Clearfix
155
+ **************/
156
+ .clearfix:after {
157
+ content: "";
158
+ display: table;
159
+ clear: both;
160
+ }
161
+
162
+ /**********
163
+ Base
164
+ **********/
165
+ *,
166
+ *:before,
167
+ *:after {
168
+ box-sizing: border-box !important;
169
+ transition: none;
170
+ }
171
+
172
+ b,
173
+ strong {
174
+ font-weight: bold;
175
+ }
176
+
177
+ i,
178
+ em {
179
+ font-style: italic;
180
+ }
181
+
182
+ u {
183
+ text-decoration: underline;
184
+ }
185
+
186
+ sup {
187
+ vertical-align: super;
188
+ font-size: 75%;
189
+ }
190
+
191
+ sub {
192
+ vertical-align: sub;
193
+ font-size: 75%;
194
+ }
195
+
196
+ a {
197
+ cursor: pointer;
198
+ }
199
+
200
+ .label {
201
+ display: block;
202
+ margin: 0 0 5px 0;
203
+ text-align: left;
204
+ }
205
+
206
+ input[type=text],
207
+ input[type=number],
208
+ input[type=search],
209
+ select {
210
+ display: block;
211
+ outline: none;
212
+ width: 100%;
213
+ height: 45px;
214
+ border: var(--form-element-border);
215
+ border-radius: var(--form-element-border-radius);
216
+ padding: var(--padding-sm);
217
+ background: var(--form-element-background);
218
+ font-family: var(--default-font-family);
219
+ font-size: 16px;
220
+ line-height: 1;
221
+ color: var(--default-font-color);
222
+ }
223
+ input[type=text]:hover, input[type=text]:focus,
224
+ input[type=number]:hover,
225
+ input[type=number]:focus,
226
+ input[type=search]:hover,
227
+ input[type=search]:focus,
228
+ select:hover,
229
+ select:focus {
230
+ border: var(--form-element-border--focus);
231
+ }
232
+
233
+ select {
234
+ padding-right: var(--padding);
235
+ }
236
+
237
+ ::placeholder {
238
+ color: var(--form-element-placeholder-color);
239
+ }
240
+
241
+ input[type=checkbox] {
242
+ display: none;
243
+ }
244
+ input[type=checkbox] + label {
245
+ position: relative;
246
+ display: block;
247
+ margin: 0 0 5px 0;
248
+ padding-left: calc(16px + var(--padding-sm));
249
+ cursor: pointer;
250
+ }
251
+ input[type=checkbox] + label:before {
252
+ content: "";
253
+ position: absolute;
254
+ top: 1px;
255
+ left: 0;
256
+ width: 16px;
257
+ height: 16px;
258
+ border: var(--form-element-border);
259
+ background: var(--form-element-background);
260
+ }
261
+ input[type=checkbox]:checked + label:before {
262
+ background: var(--color-accent);
263
+ }
264
+
265
+ .row {
266
+ --gap: var(--padding);
267
+ display: flex;
268
+ flex-direction: row;
269
+ flex-wrap: wrap;
270
+ gap: var(--gap);
271
+ margin: 0 0 var(--margin) 0;
272
+ }
273
+ .row:last-child {
274
+ margin-bottom: 0;
275
+ }
276
+ .row--reverse {
277
+ flex-direction: row-reverse;
278
+ }
279
+ .row--tight {
280
+ --gap: var(--padding-xs);
281
+ }
282
+ @media (min-width: 740px) {
283
+ .row-sm {
284
+ --gap: var(--padding);
285
+ display: flex;
286
+ flex-direction: row;
287
+ flex-wrap: wrap;
288
+ gap: var(--gap);
289
+ margin: 0 0 var(--margin) 0;
290
+ }
291
+ .row-sm:last-child {
292
+ margin-bottom: 0;
293
+ }
294
+ .row-sm--reverse {
295
+ flex-direction: row-reverse;
296
+ }
297
+ .row-sm--tight {
298
+ --gap: var(--padding-xs);
299
+ }
300
+ }
301
+ @media (min-width: 990px) {
302
+ .row-md {
303
+ --gap: var(--padding);
304
+ display: flex;
305
+ flex-direction: row;
306
+ flex-wrap: wrap;
307
+ gap: var(--gap);
308
+ margin: 0 0 var(--margin) 0;
309
+ }
310
+ .row-md:last-child {
311
+ margin-bottom: 0;
312
+ }
313
+ .row-md--reverse {
314
+ flex-direction: row-reverse;
315
+ }
316
+ .row-md--tight {
317
+ --gap: var(--padding-xs);
318
+ }
319
+ }
320
+ @media (min-width: 1260px) {
321
+ .row-lg {
322
+ --gap: var(--padding);
323
+ display: flex;
324
+ flex-direction: row;
325
+ flex-wrap: wrap;
326
+ gap: var(--gap);
327
+ margin: 0 0 var(--margin) 0;
328
+ }
329
+ .row-lg:last-child {
330
+ margin-bottom: 0;
331
+ }
332
+ .row-lg--reverse {
333
+ flex-direction: row-reverse;
334
+ }
335
+ .row-lg--tight {
336
+ --gap: var(--padding-xs);
337
+ }
338
+ }
339
+ @media (min-width: 1800px) {
340
+ .row-xl {
341
+ --gap: var(--padding);
342
+ display: flex;
343
+ flex-direction: row;
344
+ flex-wrap: wrap;
345
+ gap: var(--gap);
346
+ margin: 0 0 var(--margin) 0;
347
+ }
348
+ .row-xl:last-child {
349
+ margin-bottom: 0;
350
+ }
351
+ .row-xl--reverse {
352
+ flex-direction: row-reverse;
353
+ }
354
+ .row-xl--tight {
355
+ --gap: var(--padding-xs);
356
+ }
357
+ }
358
+
359
+ .column {
360
+ flex-grow: 0;
361
+ flex-shrink: 0;
362
+ width: 100%;
363
+ }
364
+ .column--1 {
365
+ flex-basis: calc(8.3333333333% - (0.9166666667 * var(--gap)));
366
+ }
367
+ .column--2 {
368
+ flex-basis: calc(16.6666666667% - (0.8333333333 * var(--gap)));
369
+ }
370
+ .column--3 {
371
+ flex-basis: calc(25% - (0.75 * var(--gap)));
372
+ }
373
+ .column--4 {
374
+ flex-basis: calc(33.3333333333% - (0.6666666667 * var(--gap)));
375
+ }
376
+ .column--5 {
377
+ flex-basis: calc(41.6666666667% - (0.5833333333 * var(--gap)));
378
+ }
379
+ .column--6 {
380
+ flex-basis: calc(50% - (0.5 * var(--gap)));
381
+ }
382
+ .column--7 {
383
+ flex-basis: calc(58.3333333333% - (0.4166666667 * var(--gap)));
384
+ }
385
+ .column--8 {
386
+ flex-basis: calc(66.6666666667% - (0.3333333333 * var(--gap)));
387
+ }
388
+ .column--9 {
389
+ flex-basis: calc(75% - (0.25 * var(--gap)));
390
+ }
391
+ .column--10 {
392
+ flex-basis: calc(83.3333333333% - (0.1666666667 * var(--gap)));
393
+ }
394
+ .column--11 {
395
+ flex-basis: calc(91.6666666667% - (0.0833333333 * var(--gap)));
396
+ }
397
+ .column--12 {
398
+ flex-basis: calc(100% - (0 * var(--gap)));
399
+ }
400
+ .column--pull-right {
401
+ margin-left: auto;
402
+ }
403
+ @media (min-width: 740px) {
404
+ .column-sm {
405
+ flex-grow: 0;
406
+ flex-shrink: 0;
407
+ width: 100%;
408
+ }
409
+ .column-sm--1 {
410
+ flex-basis: calc(8.3333333333% - (0.9166666667 * var(--gap)));
411
+ }
412
+ .column-sm--2 {
413
+ flex-basis: calc(16.6666666667% - (0.8333333333 * var(--gap)));
414
+ }
415
+ .column-sm--3 {
416
+ flex-basis: calc(25% - (0.75 * var(--gap)));
417
+ }
418
+ .column-sm--4 {
419
+ flex-basis: calc(33.3333333333% - (0.6666666667 * var(--gap)));
420
+ }
421
+ .column-sm--5 {
422
+ flex-basis: calc(41.6666666667% - (0.5833333333 * var(--gap)));
423
+ }
424
+ .column-sm--6 {
425
+ flex-basis: calc(50% - (0.5 * var(--gap)));
426
+ }
427
+ .column-sm--7 {
428
+ flex-basis: calc(58.3333333333% - (0.4166666667 * var(--gap)));
429
+ }
430
+ .column-sm--8 {
431
+ flex-basis: calc(66.6666666667% - (0.3333333333 * var(--gap)));
432
+ }
433
+ .column-sm--9 {
434
+ flex-basis: calc(75% - (0.25 * var(--gap)));
435
+ }
436
+ .column-sm--10 {
437
+ flex-basis: calc(83.3333333333% - (0.1666666667 * var(--gap)));
438
+ }
439
+ .column-sm--11 {
440
+ flex-basis: calc(91.6666666667% - (0.0833333333 * var(--gap)));
441
+ }
442
+ .column-sm--12 {
443
+ flex-basis: calc(100% - (0 * var(--gap)));
444
+ }
445
+ .column-sm--pull-right {
446
+ margin-left: auto;
447
+ }
448
+ }
449
+ @media (min-width: 990px) {
450
+ .column-md {
451
+ flex-grow: 0;
452
+ flex-shrink: 0;
453
+ width: 100%;
454
+ }
455
+ .column-md--1 {
456
+ flex-basis: calc(8.3333333333% - (0.9166666667 * var(--gap)));
457
+ }
458
+ .column-md--2 {
459
+ flex-basis: calc(16.6666666667% - (0.8333333333 * var(--gap)));
460
+ }
461
+ .column-md--3 {
462
+ flex-basis: calc(25% - (0.75 * var(--gap)));
463
+ }
464
+ .column-md--4 {
465
+ flex-basis: calc(33.3333333333% - (0.6666666667 * var(--gap)));
466
+ }
467
+ .column-md--5 {
468
+ flex-basis: calc(41.6666666667% - (0.5833333333 * var(--gap)));
469
+ }
470
+ .column-md--6 {
471
+ flex-basis: calc(50% - (0.5 * var(--gap)));
472
+ }
473
+ .column-md--7 {
474
+ flex-basis: calc(58.3333333333% - (0.4166666667 * var(--gap)));
475
+ }
476
+ .column-md--8 {
477
+ flex-basis: calc(66.6666666667% - (0.3333333333 * var(--gap)));
478
+ }
479
+ .column-md--9 {
480
+ flex-basis: calc(75% - (0.25 * var(--gap)));
481
+ }
482
+ .column-md--10 {
483
+ flex-basis: calc(83.3333333333% - (0.1666666667 * var(--gap)));
484
+ }
485
+ .column-md--11 {
486
+ flex-basis: calc(91.6666666667% - (0.0833333333 * var(--gap)));
487
+ }
488
+ .column-md--12 {
489
+ flex-basis: calc(100% - (0 * var(--gap)));
490
+ }
491
+ .column-md--pull-right {
492
+ margin-left: auto;
493
+ }
494
+ }
495
+ @media (min-width: 1260px) {
496
+ .column-lg {
497
+ flex-grow: 0;
498
+ flex-shrink: 0;
499
+ width: 100%;
500
+ }
501
+ .column-lg--1 {
502
+ flex-basis: calc(8.3333333333% - (0.9166666667 * var(--gap)));
503
+ }
504
+ .column-lg--2 {
505
+ flex-basis: calc(16.6666666667% - (0.8333333333 * var(--gap)));
506
+ }
507
+ .column-lg--3 {
508
+ flex-basis: calc(25% - (0.75 * var(--gap)));
509
+ }
510
+ .column-lg--4 {
511
+ flex-basis: calc(33.3333333333% - (0.6666666667 * var(--gap)));
512
+ }
513
+ .column-lg--5 {
514
+ flex-basis: calc(41.6666666667% - (0.5833333333 * var(--gap)));
515
+ }
516
+ .column-lg--6 {
517
+ flex-basis: calc(50% - (0.5 * var(--gap)));
518
+ }
519
+ .column-lg--7 {
520
+ flex-basis: calc(58.3333333333% - (0.4166666667 * var(--gap)));
521
+ }
522
+ .column-lg--8 {
523
+ flex-basis: calc(66.6666666667% - (0.3333333333 * var(--gap)));
524
+ }
525
+ .column-lg--9 {
526
+ flex-basis: calc(75% - (0.25 * var(--gap)));
527
+ }
528
+ .column-lg--10 {
529
+ flex-basis: calc(83.3333333333% - (0.1666666667 * var(--gap)));
530
+ }
531
+ .column-lg--11 {
532
+ flex-basis: calc(91.6666666667% - (0.0833333333 * var(--gap)));
533
+ }
534
+ .column-lg--12 {
535
+ flex-basis: calc(100% - (0 * var(--gap)));
536
+ }
537
+ .column-lg--pull-right {
538
+ margin-left: auto;
539
+ }
540
+ }
541
+ @media (min-width: 1800px) {
542
+ .column-xl {
543
+ flex-grow: 0;
544
+ flex-shrink: 0;
545
+ width: 100%;
546
+ }
547
+ .column-xl--1 {
548
+ flex-basis: calc(8.3333333333% - (0.9166666667 * var(--gap)));
549
+ }
550
+ .column-xl--2 {
551
+ flex-basis: calc(16.6666666667% - (0.8333333333 * var(--gap)));
552
+ }
553
+ .column-xl--3 {
554
+ flex-basis: calc(25% - (0.75 * var(--gap)));
555
+ }
556
+ .column-xl--4 {
557
+ flex-basis: calc(33.3333333333% - (0.6666666667 * var(--gap)));
558
+ }
559
+ .column-xl--5 {
560
+ flex-basis: calc(41.6666666667% - (0.5833333333 * var(--gap)));
561
+ }
562
+ .column-xl--6 {
563
+ flex-basis: calc(50% - (0.5 * var(--gap)));
564
+ }
565
+ .column-xl--7 {
566
+ flex-basis: calc(58.3333333333% - (0.4166666667 * var(--gap)));
567
+ }
568
+ .column-xl--8 {
569
+ flex-basis: calc(66.6666666667% - (0.3333333333 * var(--gap)));
570
+ }
571
+ .column-xl--9 {
572
+ flex-basis: calc(75% - (0.25 * var(--gap)));
573
+ }
574
+ .column-xl--10 {
575
+ flex-basis: calc(83.3333333333% - (0.1666666667 * var(--gap)));
576
+ }
577
+ .column-xl--11 {
578
+ flex-basis: calc(91.6666666667% - (0.0833333333 * var(--gap)));
579
+ }
580
+ .column-xl--12 {
581
+ flex-basis: calc(100% - (0 * var(--gap)));
582
+ }
583
+ .column-xl--pull-right {
584
+ margin-left: auto;
585
+ }
586
+ }
587
+
588
+ img {
589
+ max-width: 100%;
590
+ height: auto;
591
+ }
592
+
593
+ .heading {
594
+ display: block;
595
+ margin: 0 0 var(--padding) 0;
596
+ font-size: 1.375rem;
597
+ font-weight: bold;
598
+ }
599
+
600
+ p {
601
+ margin: 0 0 var(--padding) 0;
602
+ }
603
+ p:last-child {
604
+ margin-bottom: 0;
605
+ }
606
+
607
+ a,
608
+ .link {
609
+ text-decoration: none;
610
+ cursor: pointer;
611
+ }
612
+ a:hover,
613
+ .link:hover {
614
+ color: var(--color-accent);
615
+ }
616
+
617
+ .autocomplete {
618
+ position: absolute;
619
+ left: 0;
620
+ right: 0;
621
+ margin-top: -1px;
622
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
623
+ border: var(--container-border);
624
+ padding: var(--padding);
625
+ background: var(--container-background);
626
+ z-index: 1;
627
+ }
628
+ .autocomplete__title {
629
+ display: block;
630
+ margin: 0 0 var(--padding) 0;
631
+ font-size: 1.1rem;
632
+ font-weight: bold;
633
+ }
634
+ .autocomplete__list:not(:last-child) {
635
+ margin-bottom: var(--margin);
636
+ }
637
+ .autocomplete__product {
638
+ height: 100%;
639
+ text-align: center;
640
+ }
641
+ .autocomplete__product__image {
642
+ display: flex;
643
+ justify-content: center;
644
+ align-items: center;
645
+ padding: 0 var(--padding) var(--padding) var(--padding);
646
+ height: 150px;
647
+ }
648
+ .autocomplete__product__image a {
649
+ display: block;
650
+ }
651
+ .autocomplete__product__image img {
652
+ margin: 0;
653
+ max-height: 100%;
654
+ }
655
+ .autocomplete__product__title {
656
+ display: block;
657
+ margin: 0 0 var(--padding-sm) 0;
658
+ font-weight: bold;
659
+ }
660
+ .autocomplete__product__title:last-child {
661
+ margin-bottom: 0;
662
+ }
663
+ .autocomplete__product__price {
664
+ display: block;
665
+ margin: 0 0 var(--padding-sm) 0;
666
+ }
667
+ .autocomplete__product__price__original {
668
+ text-decoration: line-through;
669
+ }
670
+ .autocomplete__product__price:last-child {
671
+ margin-bottom: 0;
672
+ }
673
+ .autocomplete__view-all {
674
+ text-align: center;
675
+ }
676
+
677
+ .button {
678
+ display: inline-block;
679
+ outline: none;
680
+ height: 45px;
681
+ border-radius: var(--button-border-radius);
682
+ border: none;
683
+ padding: var(--padding-sm) var(--padding);
684
+ background: var(--button-background);
685
+ font-weight: bold;
686
+ color: var(--button-font-color);
687
+ text-align: center;
688
+ cursor: pointer;
689
+ }
690
+ .button:hover {
691
+ outline: solid 2px var(--button-background);
692
+ }
693
+ .button--full-width {
694
+ display: block;
695
+ width: 100%;
696
+ }
697
+
698
+ hawksearch-featured-items-content-item {
699
+ display: block;
700
+ height: 100%;
701
+ }
702
+
703
+ .custom-content {
704
+ margin: 0 0 var(--margin) 0;
705
+ }
706
+
707
+ .featured-items-content__item {
708
+ position: relative;
709
+ }
710
+ .featured-items-content__item__sale-indicator {
711
+ position: absolute;
712
+ top: 0;
713
+ left: 0;
714
+ padding: 5px;
715
+ background: var(--container-background--alternate);
716
+ }
717
+ .featured-items-content__item__pin {
718
+ position: absolute;
719
+ top: var(--padding-xs);
720
+ right: var(--padding-xs);
721
+ font-size: 1.2rem;
722
+ }
723
+ .featured-items-content__item__image {
724
+ display: flex;
725
+ justify-content: center;
726
+ align-items: center;
727
+ padding: 0 var(--padding) var(--padding) var(--padding);
728
+ height: 200px;
729
+ }
730
+ .featured-items-content__item__image img {
731
+ margin: 0;
732
+ max-height: 100%;
733
+ }
734
+ .featured-items-content__item__title {
735
+ display: block;
736
+ margin: 0 0 var(--padding-sm) 0;
737
+ font-size: 1.125rem;
738
+ font-weight: bold;
739
+ }
740
+ .featured-items-content__item__title:last-child {
741
+ margin-bottom: 0;
742
+ }
743
+ .featured-items-content__item__price {
744
+ display: block;
745
+ margin: 0 0 var(--padding-sm) 0;
746
+ }
747
+ .featured-items-content__item__price__original {
748
+ text-decoration: line-through;
749
+ }
750
+ .featured-items-content__item__price:last-child {
751
+ margin-bottom: 0;
752
+ }
753
+ .featured-items-content__item--content {
754
+ border-bottom: var(--container-border);
755
+ padding: 0 0 var(--padding) 0;
756
+ }
757
+ .featured-items-content__item--product {
758
+ position: relative;
759
+ height: 100%;
760
+ padding: var(--padding);
761
+ border: var(--container-border);
762
+ background: var(--container-background);
763
+ text-align: center;
764
+ }
765
+ .featured-items-content__item--product:hover {
766
+ border-color: var(--color-accent);
767
+ }
768
+
769
+ .image-content {
770
+ margin: 0 0 var(--margin) 0;
771
+ }
772
+ .image-content__image {
773
+ display: block;
774
+ margin: 0 auto;
775
+ }
776
+
777
+ .popular-queries-content {
778
+ margin: 0 0 var(--margin) 0;
779
+ text-align: center;
780
+ line-height: 1;
781
+ }
782
+ .popular-queries-content__item {
783
+ display: inline-block;
784
+ margin: 0 5px;
785
+ vertical-align: middle;
786
+ }
787
+ .popular-queries-content__item--1 {
788
+ font-size: 100%;
789
+ }
790
+ .popular-queries-content__item--2 {
791
+ font-size: 150%;
792
+ }
793
+ .popular-queries-content__item--3 {
794
+ font-size: 200%;
795
+ }
796
+ .popular-queries-content__item--4 {
797
+ font-size: 250%;
798
+ }
799
+ .popular-queries-content__item--5 {
800
+ font-size: 300%;
801
+ }
802
+
803
+ .content-zone {
804
+ margin: 0 0 var(--margin) 0;
805
+ }
806
+
807
+ .date-picker {
808
+ position: relative;
809
+ }
810
+ .date-picker__modal {
811
+ position: absolute;
812
+ width: 310px;
813
+ border: var(--container-border);
814
+ padding: var(--padding-sm);
815
+ background: var(--container-background);
816
+ z-index: 10;
817
+ }
818
+ .date-picker__modal__header {
819
+ display: flex;
820
+ align-items: center;
821
+ gap: var(--padding-sm);
822
+ margin: 0 0 var(--padding-sm) 0;
823
+ padding: var(--padding-sm);
824
+ background: var(--container-background--alternate);
825
+ font-weight: bold;
826
+ text-align: center;
827
+ }
828
+ .date-picker__modal__header__previous, .date-picker__modal__header__next {
829
+ display: inline-flex;
830
+ font-size: 1.5rem;
831
+ flex-grow: 0;
832
+ }
833
+ .date-picker__modal__header__month {
834
+ flex-grow: 1;
835
+ }
836
+ .date-picker__calendar {
837
+ width: 100%;
838
+ }
839
+ .date-picker__calendar thead th {
840
+ width: 14.286%;
841
+ padding: var(--padding-xs);
842
+ background: var(--container-background);
843
+ font-weight: bold;
844
+ text-align: center;
845
+ }
846
+ .date-picker__calendar tbody td {
847
+ border: var(--container-border);
848
+ padding: var(--padding-xs);
849
+ text-align: center;
850
+ }
851
+ .date-picker__calendar tbody td:hover {
852
+ color: var(--color-accent);
853
+ }
854
+ .date-picker__calendar__day {
855
+ background: var(--container-background);
856
+ cursor: pointer;
857
+ }
858
+ .date-picker__calendar__day--alternate {
859
+ background: var(--color-secondary-light);
860
+ }
861
+ .date-picker__calendar__day--selected {
862
+ background: var(--color-accent);
863
+ color: var(--default-font-color--inverse) !important;
864
+ }
865
+ .date-picker__calendar__day--disabled {
866
+ cursor: no-drop;
867
+ opacity: 0.5;
868
+ }
869
+
870
+ hawksearch-facets-list {
871
+ display: block;
872
+ margin: 0 0 var(--margin-sm) 0;
873
+ }
874
+ hawksearch-facets-list:last-child {
875
+ margin-bottom: 0;
876
+ }
877
+
878
+ .facets {
879
+ border: var(--container-border);
880
+ background: var(--container-background);
881
+ }
882
+ .facets__heading {
883
+ display: flex;
884
+ align-items: center;
885
+ padding: var(--padding-sm) var(--padding);
886
+ font-size: 1.2rem;
887
+ font-weight: bold;
888
+ background: var(--container-background--alternate);
889
+ cursor: pointer;
890
+ }
891
+ .facets__heading__mobile-toggle {
892
+ margin-left: auto;
893
+ }
894
+ .facets__heading:hover {
895
+ color: var(--color-accent);
896
+ }
897
+ .facets__content {
898
+ display: none;
899
+ }
900
+ .facets--expanded .facets__content {
901
+ display: block;
902
+ }
903
+ @media (min-width: 990px) {
904
+ .facets__heading {
905
+ cursor: default;
906
+ }
907
+ .facets__heading__mobile-toggle {
908
+ display: none;
909
+ }
910
+ .facets__heading:hover {
911
+ color: var(--default-font-color);
912
+ }
913
+ .facets__content {
914
+ display: block;
915
+ }
916
+ }
917
+
918
+ .facet__heading {
919
+ display: flex;
920
+ align-items: center;
921
+ padding: var(--padding-sm) var(--padding);
922
+ font-size: 1.125rem;
923
+ cursor: default;
924
+ }
925
+ .facet__heading__tooltip {
926
+ font-size: 1.2em;
927
+ margin-left: 5px;
928
+ }
929
+ .facet__heading__toggle {
930
+ margin-left: auto;
931
+ }
932
+ .facet__heading--collapsible {
933
+ cursor: pointer;
934
+ }
935
+ .facet__heading--collapsible:hover {
936
+ --icon-color: var(--color-accent);
937
+ color: var(--color-accent);
938
+ }
939
+ .facet__search {
940
+ margin: 0 0 var(--padding) 0;
941
+ }
942
+ .facet__content {
943
+ padding: 0 var(--padding) var(--padding) var(--padding);
944
+ }
945
+ .facet__value {
946
+ display: flex;
947
+ align-items: center;
948
+ flex-wrap: wrap;
949
+ }
950
+ .facet__value__image {
951
+ margin-right: 5px;
952
+ }
953
+ .facet__value__count {
954
+ color: var(--secondary-font-color);
955
+ }
956
+
957
+ .checkbox-list-facet {
958
+ overflow-y: auto;
959
+ }
960
+ .checkbox-list-facet__list {
961
+ margin: 0 0 var(--padding-xs) 0;
962
+ }
963
+ .checkbox-list-facet__list__item {
964
+ display: flex;
965
+ margin: 0 0 var(--padding-xs) 0;
966
+ }
967
+ .checkbox-list-facet__list__item__content {
968
+ flex-grow: 1;
969
+ }
970
+ .checkbox-list-facet__list__item__actions {
971
+ position: relative;
972
+ top: -2px;
973
+ flex-grow: 0;
974
+ margin-left: auto;
975
+ white-space: nowrap;
976
+ line-height: 1;
977
+ }
978
+ .checkbox-list-facet__list__item__actions__item {
979
+ font-size: 1.3em;
980
+ cursor: pointer;
981
+ }
982
+ .checkbox-list-facet__list__item__actions__item:hover {
983
+ color: var(--color-accent);
984
+ }
985
+ .checkbox-list-facet__list__item--excluded > .checkbox-list-facet__item__content > label .facet__value__title {
986
+ text-decoration: line-through;
987
+ }
988
+ .checkbox-list-facet__list__item:last-child {
989
+ margin-bottom: 0;
990
+ }
991
+ .checkbox-list-facet__list__item .checkbox-list-facet__list {
992
+ margin-left: calc(16px + var(--padding-sm));
993
+ }
994
+ .checkbox-list-facet__list:last-child {
995
+ margin-bottom: 0;
996
+ }
997
+
998
+ .color-facet__items {
999
+ margin-bottom: var(--padding-xs);
1000
+ }
1001
+ .color-facet__item {
1002
+ position: relative;
1003
+ border: var(--container-border);
1004
+ cursor: pointer;
1005
+ }
1006
+ .color-facet__item__box {
1007
+ padding: 0 0 100% 0;
1008
+ }
1009
+ .color-facet__item__image {
1010
+ display: block;
1011
+ width: 100%;
1012
+ height: 100%;
1013
+ }
1014
+ .color-facet__item__actions {
1015
+ display: none;
1016
+ }
1017
+ .color-facet__item--selected {
1018
+ outline: solid 1px var(--color-accent);
1019
+ border-color: var(--color-accent);
1020
+ }
1021
+ .color-facet__item:hover {
1022
+ outline: solid 1px var(--color-accent);
1023
+ border-color: var(--color-accent);
1024
+ }
1025
+ .color-facet__item:hover .color-facet__item__actions {
1026
+ display: block;
1027
+ position: absolute;
1028
+ top: 0;
1029
+ right: 0;
1030
+ border: var(--container-border);
1031
+ background: var(--container-background);
1032
+ font-size: 1rem;
1033
+ line-height: 1;
1034
+ }
1035
+ .color-facet__item:hover .color-facet__item__actions:hover {
1036
+ color: var(--color-accent);
1037
+ }
1038
+
1039
+ .link-list-facet {
1040
+ overflow-y: auto;
1041
+ }
1042
+ .link-list-facet__list__item {
1043
+ margin-bottom: var(--padding-xs);
1044
+ }
1045
+
1046
+ .recent-searches-facet__list__item {
1047
+ margin-bottom: var(--padding-xs);
1048
+ }
1049
+
1050
+ .related-searches-facet__list__item {
1051
+ margin-bottom: var(--padding-xs);
1052
+ }
1053
+
1054
+ .size-facet__items {
1055
+ margin-bottom: var(--padding-xs);
1056
+ }
1057
+ .size-facet__item {
1058
+ position: relative;
1059
+ border: var(--container-border);
1060
+ }
1061
+ .size-facet__item__outer {
1062
+ position: relative;
1063
+ padding: 0 0 100% 0;
1064
+ cursor: pointer;
1065
+ }
1066
+ .size-facet__item__inner {
1067
+ display: flex;
1068
+ align-items: center;
1069
+ justify-content: center;
1070
+ position: absolute;
1071
+ top: 0;
1072
+ right: 0;
1073
+ bottom: 0;
1074
+ left: 0;
1075
+ padding: var(--padding-xs);
1076
+ background: var(--container-background--alternate);
1077
+ font-size: 0.6875rem;
1078
+ }
1079
+ .size-facet__item__actions {
1080
+ display: none;
1081
+ }
1082
+ .size-facet__item--selected {
1083
+ outline: solid 1px var(--color-accent);
1084
+ border-color: var(--color-accent);
1085
+ }
1086
+ .size-facet__item:hover {
1087
+ border-color: var(--color-accent);
1088
+ }
1089
+ .size-facet__item:hover .size-facet__item__actions {
1090
+ display: block;
1091
+ position: absolute;
1092
+ top: 0;
1093
+ right: 0;
1094
+ border: var(--container-border);
1095
+ background: var(--container-background);
1096
+ font-size: 1rem;
1097
+ line-height: 1;
1098
+ cursor: pointer;
1099
+ }
1100
+ .size-facet__item:hover .size-facet__item__actions:hover {
1101
+ color: var(--color-accent);
1102
+ }
1103
+
1104
+ hawksearch-icon {
1105
+ display: inline-flex;
1106
+ align-items: center;
1107
+ font-size: var(--icon-font-size, 1em);
1108
+ color: var(--icon-color, currentColor);
1109
+ }
1110
+
1111
+ .icon {
1112
+ display: inline-flex;
1113
+ align-items: center;
1114
+ margin: 0 0.5em 0 0;
1115
+ max-width: none;
1116
+ fill: currentColor;
1117
+ vertical-align: middle;
1118
+ }
1119
+ .icon:last-child {
1120
+ margin: 0;
1121
+ }
1122
+
1123
+ .modified-query {
1124
+ margin: 0 0 var(--margin) 0;
1125
+ }
1126
+ .modified-query__modified {
1127
+ font-style: italic;
1128
+ }
1129
+ .modified-query__original {
1130
+ font-weight: bold;
1131
+ }
1132
+
1133
+ .pagination {
1134
+ display: flex;
1135
+ align-items: center;
1136
+ gap: var(--padding);
1137
+ line-height: 1;
1138
+ }
1139
+ .pagination__pages {
1140
+ display: flex;
1141
+ align-items: center;
1142
+ gap: var(--padding-xs);
1143
+ }
1144
+ .pagination__page--selected {
1145
+ font-weight: bold;
1146
+ color: var(--color-accent);
1147
+ }
1148
+
1149
+ .query-suggestions {
1150
+ margin: 0 0 var(--margin) 0;
1151
+ }
1152
+ .query-suggestions a {
1153
+ font-style: italic;
1154
+ }
1155
+
1156
+ .range-slider {
1157
+ padding: 0 12px;
1158
+ }
1159
+ .range-slider__container {
1160
+ position: relative;
1161
+ padding: 8px 0;
1162
+ }
1163
+ .range-slider__bar {
1164
+ position: relative;
1165
+ border: var(--container-border);
1166
+ height: 8px;
1167
+ background: var(--container-background);
1168
+ }
1169
+ .range-slider__bar__active {
1170
+ position: absolute;
1171
+ left: 0;
1172
+ right: 0;
1173
+ height: 100%;
1174
+ background: var(--color-accent);
1175
+ }
1176
+ .range-slider__handle {
1177
+ display: block;
1178
+ position: absolute;
1179
+ top: 0;
1180
+ outline: solid 1px var(--color-accent);
1181
+ margin-left: -12px;
1182
+ border: solid 3px var(--color-background);
1183
+ border-radius: 100%;
1184
+ width: 24px;
1185
+ height: 24px;
1186
+ padding: 4px;
1187
+ background: var(--color-accent);
1188
+ cursor: pointer;
1189
+ touch-action: none;
1190
+ }
1191
+ .range-slider__handle--start {
1192
+ left: 0;
1193
+ }
1194
+ .range-slider__handle--end {
1195
+ left: 100%;
1196
+ }
1197
+ .range-slider__handle:hover {
1198
+ outline-width: 2px;
1199
+ }
1200
+
1201
+ hawksearch-rating {
1202
+ display: inline-flex;
1203
+ align-items: center;
1204
+ margin: 0 0 var(--padding-sm) 0;
1205
+ font-size: var(--icon-font-size, 1em);
1206
+ color: var(--icon-color, currentColor);
1207
+ }
1208
+ hawksearch-rating:last-child {
1209
+ margin: 0;
1210
+ }
1211
+
1212
+ .rating {
1213
+ display: inline-flex;
1214
+ align-items: center;
1215
+ margin: 0 0 var(--padding-sm) 0;
1216
+ max-width: none;
1217
+ fill: currentColor;
1218
+ vertical-align: middle;
1219
+ font-size: 1.2em;
1220
+ color: var(--color-accent);
1221
+ }
1222
+ .rating:last-child {
1223
+ margin: 0;
1224
+ }
1225
+
1226
+ hawksearch-recommendations-item {
1227
+ display: block;
1228
+ height: 100%;
1229
+ }
1230
+
1231
+ .recommendations {
1232
+ margin: 0 0 var(--margin) 0;
1233
+ }
1234
+ .recommendations__content {
1235
+ display: flex;
1236
+ }
1237
+ .recommendations__button {
1238
+ flex-shrink: 0;
1239
+ align-self: center;
1240
+ font-size: 2.5em;
1241
+ }
1242
+ .recommendations__carousel {
1243
+ position: relative;
1244
+ flex-grow: 1;
1245
+ overflow: hidden;
1246
+ }
1247
+ .recommendations__carousel__item {
1248
+ flex-grow: 0;
1249
+ flex-shrink: 0;
1250
+ margin-bottom: var(--padding);
1251
+ padding: 0 calc(0.5 * var(--padding));
1252
+ }
1253
+ .recommendations__list {
1254
+ position: relative;
1255
+ display: flex;
1256
+ flex-wrap: wrap;
1257
+ margin: 0 calc(-0.5 * var(--padding)) calc(-1 * var(--padding)) calc(-0.5 * var(--padding));
1258
+ transition: left 0.5s;
1259
+ }
1260
+ .recommendations__list--carousel {
1261
+ flex-wrap: nowrap;
1262
+ margin: 0;
1263
+ }
1264
+ .recommendations__item {
1265
+ position: relative;
1266
+ height: 100%;
1267
+ padding: var(--padding);
1268
+ border: var(--container-border);
1269
+ background: var(--container-background);
1270
+ text-align: center;
1271
+ }
1272
+ .recommendations__item__sale-indicator {
1273
+ position: absolute;
1274
+ top: 0;
1275
+ left: 0;
1276
+ padding: 5px;
1277
+ background: var(--container-background--alternate);
1278
+ }
1279
+ .recommendations__item__pin {
1280
+ position: absolute;
1281
+ top: var(--padding-xs);
1282
+ right: var(--padding-xs);
1283
+ font-size: 1.2rem;
1284
+ }
1285
+ .recommendations__item__image {
1286
+ display: flex;
1287
+ justify-content: center;
1288
+ align-items: center;
1289
+ padding: 0 var(--padding) var(--padding) var(--padding);
1290
+ height: 200px;
1291
+ }
1292
+ .recommendations__item__image img {
1293
+ margin: 0;
1294
+ max-height: 100%;
1295
+ }
1296
+ .recommendations__item__title {
1297
+ display: block;
1298
+ margin: 0 0 var(--padding-sm) 0;
1299
+ font-size: 1.125rem;
1300
+ font-weight: bold;
1301
+ }
1302
+ .recommendations__item__title:last-child {
1303
+ margin-bottom: 0;
1304
+ }
1305
+ .recommendations__item__price {
1306
+ display: block;
1307
+ margin: 0 0 var(--padding-sm) 0;
1308
+ }
1309
+ .recommendations__item__price__original {
1310
+ text-decoration: line-through;
1311
+ }
1312
+ .recommendations__item__price:last-child {
1313
+ margin-bottom: 0;
1314
+ }
1315
+ .recommendations__item:hover {
1316
+ border-color: var(--color-accent);
1317
+ }
1318
+ .recommendations__pagination {
1319
+ display: flex;
1320
+ justify-content: center;
1321
+ gap: var(--padding-xs);
1322
+ }
1323
+ .recommendations__pagination__item {
1324
+ display: block;
1325
+ width: 10px;
1326
+ height: 10px;
1327
+ border-radius: 100%;
1328
+ background: var(--color-secondary);
1329
+ cursor: pointer;
1330
+ }
1331
+ .recommendations__pagination__item--selected {
1332
+ background: var(--color-secondary-dark);
1333
+ }
1334
+ .recommendations__pagination__item:hover {
1335
+ background: var(--color-accent);
1336
+ }
1337
+ .recommendations:last-child {
1338
+ margin-bottom: 0;
1339
+ }
1340
+
1341
+ .search-field {
1342
+ position: relative;
1343
+ }
1344
+
1345
+ hawksearch-search-results-list {
1346
+ display: block;
1347
+ margin: 0 0 var(--margin) 0;
1348
+ }
1349
+ hawksearch-search-results-list:last-child {
1350
+ margin: 0;
1351
+ }
1352
+
1353
+ hawksearch-search-results-item {
1354
+ display: block;
1355
+ height: 100%;
1356
+ }
1357
+
1358
+ .search-results-list {
1359
+ margin: 0 0 var(--margin) 0;
1360
+ }
1361
+ .search-results-list__item {
1362
+ position: relative;
1363
+ }
1364
+ .search-results-list__item__sale-indicator {
1365
+ position: absolute;
1366
+ top: 0;
1367
+ left: 0;
1368
+ padding: 5px;
1369
+ background: var(--container-background--alternate);
1370
+ }
1371
+ .search-results-list__item__pin {
1372
+ position: absolute;
1373
+ top: var(--padding-xs);
1374
+ right: var(--padding-xs);
1375
+ font-size: 1.2rem;
1376
+ }
1377
+ .search-results-list__item__image {
1378
+ display: flex;
1379
+ justify-content: center;
1380
+ align-items: center;
1381
+ padding: 0 var(--padding) var(--padding) var(--padding);
1382
+ height: 200px;
1383
+ }
1384
+ .search-results-list__item__image img {
1385
+ margin: 0;
1386
+ max-height: 100%;
1387
+ }
1388
+ .search-results-list__item__title {
1389
+ display: block;
1390
+ margin: 0 0 var(--padding-sm) 0;
1391
+ font-size: 1.125rem;
1392
+ font-weight: bold;
1393
+ }
1394
+ .search-results-list__item__title:last-child {
1395
+ margin-bottom: 0;
1396
+ }
1397
+ .search-results-list__item__price {
1398
+ display: block;
1399
+ margin: 0 0 var(--padding-sm) 0;
1400
+ }
1401
+ .search-results-list__item__price__original {
1402
+ text-decoration: line-through;
1403
+ }
1404
+ .search-results-list__item__price:last-child {
1405
+ margin-bottom: 0;
1406
+ }
1407
+ .search-results-list__item--content {
1408
+ border-bottom: var(--container-border);
1409
+ padding: 0 0 var(--padding) 0;
1410
+ }
1411
+ .search-results-list__item--product {
1412
+ position: relative;
1413
+ height: 100%;
1414
+ padding: var(--padding);
1415
+ border: var(--container-border);
1416
+ background: var(--container-background);
1417
+ text-align: center;
1418
+ }
1419
+ .search-results-list__item--product:hover {
1420
+ border-color: var(--color-accent);
1421
+ }
1422
+ .search-results-list:last-child {
1423
+ margin: 0;
1424
+ }
1425
+
1426
+ .selected-facets {
1427
+ margin: 0 0 var(--padding) 0;
1428
+ }
1429
+ .selected-facets__item {
1430
+ display: flex;
1431
+ align-items: center;
1432
+ gap: var(--padding-xs);
1433
+ padding: var(--padding-xs);
1434
+ background: var(--container-background--alternate);
1435
+ white-space: nowrap;
1436
+ }
1437
+ .selected-facets__item__field {
1438
+ font-weight: bold;
1439
+ }
1440
+ .selected-facets__item__field:after {
1441
+ content: ":";
1442
+ }
1443
+ .selected-facets__item__value--excluded {
1444
+ text-decoration: line-through;
1445
+ }
1446
+ .selected-facets__item__remove {
1447
+ margin-top: 2px;
1448
+ line-height: 1;
1449
+ }
1450
+
1451
+ .tabs {
1452
+ display: flex;
1453
+ flex-direction: column;
1454
+ flex-wrap: wrap;
1455
+ gap: var(--padding-xs);
1456
+ margin: 0 0 var(--padding) 0;
1457
+ }
1458
+ .tabs__item {
1459
+ display: block;
1460
+ margin: 0 0 -1px 0;
1461
+ border: var(--container-border);
1462
+ padding: var(--padding-sm) var(--padding);
1463
+ background: var(--container-background--alternate);
1464
+ white-space: nowrap;
1465
+ cursor: pointer;
1466
+ }
1467
+ .tabs__item--selected {
1468
+ background: var(--container-background);
1469
+ }
1470
+ .tabs__item:hover {
1471
+ color: var(--color-accent);
1472
+ }
1473
+ @media (min-width: 740px) {
1474
+ .tabs {
1475
+ flex-direction: row;
1476
+ }
1477
+ }
1478
+ @media (min-width: 990px) {
1479
+ .tabs:not(.tabs--list) {
1480
+ border-bottom: var(--container-border);
1481
+ border-bottom-color: var(--container-background--alternate);
1482
+ padding: 0 var(--padding);
1483
+ }
1484
+ .tabs:not(.tabs--list) .tabs__item--selected {
1485
+ border-bottom-color: var(--container-background);
1486
+ }
1487
+ }
1488
+
1489
+ .tooltip {
1490
+ display: inline-flex;
1491
+ cursor: pointer;
1492
+ }
1493
+ .tooltip__content {
1494
+ display: none;
1495
+ }
1496
+ .tooltip:hover .tooltip__content {
1497
+ display: block;
1498
+ position: fixed;
1499
+ margin: calc(-0.5 * var(--padding) - 1px) 0 0 2rem;
1500
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
1501
+ max-width: 350px;
1502
+ border: var(--container-border);
1503
+ padding: calc(var(--padding) / 2);
1504
+ background: var(--container-background);
1505
+ z-index: 1;
1506
+ }
1507
+
1508
+ .variant-selector-list {
1509
+ display: flex;
1510
+ gap: var(--padding-xs);
1511
+ flex-wrap: wrap;
1512
+ margin: 0 0 var(--padding-sm) 0;
1513
+ }
1514
+ .variant-selector-list:last-child {
1515
+ margin-bottom: 0;
1516
+ }
1517
+ .variant-selector-list__item {
1518
+ width: 25px;
1519
+ height: 25px;
1520
+ border: var(--container-border);
1521
+ cursor: pointer;
1522
+ }
1523
+ .variant-selector-list__item__box {
1524
+ height: 100%;
1525
+ }
1526
+ .variant-selector-list__item__image {
1527
+ display: block;
1528
+ width: 100%;
1529
+ height: 100%;
1530
+ }
1531
+ .variant-selector-list__item--selected {
1532
+ outline: solid 1px var(--color-accent);
1533
+ border-color: var(--color-accent);
1534
+ }
1535
+ .variant-selector-list__item:hover {
1536
+ outline: solid 1px var(--color-accent);
1537
+ border-color: var(--color-accent);
1538
+ }
1539
+
1540
+ .display-block {
1541
+ display: block !important;
1542
+ }
1543
+ .display-none {
1544
+ display: none !important;
1545
+ }
1546
+ @media (min-width: 740px) {
1547
+ .display-sm-block {
1548
+ display: block !important;
1549
+ }
1550
+ .display-sm-none {
1551
+ display: none !important;
1552
+ }
1553
+ }
1554
+ @media (min-width: 990px) {
1555
+ .display-md-block {
1556
+ display: block !important;
1557
+ }
1558
+ .display-md-none {
1559
+ display: none !important;
1560
+ }
1561
+ }
1562
+ @media (min-width: 1260px) {
1563
+ .display-lg-block {
1564
+ display: block !important;
1565
+ }
1566
+ .display-lg-none {
1567
+ display: none !important;
1568
+ }
1569
+ }
1570
+ @media (min-width: 1800px) {
1571
+ .display-xl-block {
1572
+ display: block !important;
1573
+ }
1574
+ .display-xl-none {
1575
+ display: none !important;
1576
+ }
1577
+ }
1578
+
1579
+ .flex-align-self-center {
1580
+ align-self: center;
1581
+ }
1582
+ @media (min-width: 740px) {
1583
+ .flex-align-self-sm-center {
1584
+ align-self: center;
1585
+ }
1586
+ }
1587
+ @media (min-width: 990px) {
1588
+ .flex-align-self-md-center {
1589
+ align-self: center;
1590
+ }
1591
+ }
1592
+ @media (min-width: 1260px) {
1593
+ .flex-align-self-lg-center {
1594
+ align-self: center;
1595
+ }
1596
+ }
1597
+ @media (min-width: 1800px) {
1598
+ .flex-align-self-xl-center {
1599
+ align-self: center;
1600
+ }
1601
+ }
1602
+
1603
+ .flex-vertical-center {
1604
+ display: flex;
1605
+ flex-direction: column;
1606
+ justify-content: center;
1607
+ }
1608
+ @media (min-width: 740px) {
1609
+ .flex-vertical-sm-center {
1610
+ display: flex;
1611
+ flex-direction: column;
1612
+ justify-content: center;
1613
+ }
1614
+ }
1615
+ @media (min-width: 990px) {
1616
+ .flex-vertical-md-center {
1617
+ display: flex;
1618
+ flex-direction: column;
1619
+ justify-content: center;
1620
+ }
1621
+ }
1622
+ @media (min-width: 1260px) {
1623
+ .flex-vertical-lg-center {
1624
+ display: flex;
1625
+ flex-direction: column;
1626
+ justify-content: center;
1627
+ }
1628
+ }
1629
+ @media (min-width: 1800px) {
1630
+ .flex-vertical-xl-center {
1631
+ display: flex;
1632
+ flex-direction: column;
1633
+ justify-content: center;
1634
+ }
1635
+ }
1636
+
1637
+ .flex-gap {
1638
+ display: flex;
1639
+ flex-wrap: wrap;
1640
+ gap: var(--padding);
1641
+ }
1642
+ .flex-gap--none {
1643
+ gap: 0;
1644
+ }
1645
+ .flex-gap--sm {
1646
+ gap: var(--padding-sm);
1647
+ }
1648
+ .flex-gap--xs {
1649
+ gap: var(--padding-xs);
1650
+ }
1651
+ @media (min-width: 740px) {
1652
+ .flex-gap-sm {
1653
+ display: flex;
1654
+ flex-wrap: wrap;
1655
+ gap: var(--padding);
1656
+ }
1657
+ .flex-gap-sm--none {
1658
+ gap: 0;
1659
+ }
1660
+ .flex-gap-sm--sm {
1661
+ gap: var(--padding-sm);
1662
+ }
1663
+ .flex-gap-sm--xs {
1664
+ gap: var(--padding-xs);
1665
+ }
1666
+ }
1667
+ @media (min-width: 990px) {
1668
+ .flex-gap-md {
1669
+ display: flex;
1670
+ flex-wrap: wrap;
1671
+ gap: var(--padding);
1672
+ }
1673
+ .flex-gap-md--none {
1674
+ gap: 0;
1675
+ }
1676
+ .flex-gap-md--sm {
1677
+ gap: var(--padding-sm);
1678
+ }
1679
+ .flex-gap-md--xs {
1680
+ gap: var(--padding-xs);
1681
+ }
1682
+ }
1683
+ @media (min-width: 1260px) {
1684
+ .flex-gap-lg {
1685
+ display: flex;
1686
+ flex-wrap: wrap;
1687
+ gap: var(--padding);
1688
+ }
1689
+ .flex-gap-lg--none {
1690
+ gap: 0;
1691
+ }
1692
+ .flex-gap-lg--sm {
1693
+ gap: var(--padding-sm);
1694
+ }
1695
+ .flex-gap-lg--xs {
1696
+ gap: var(--padding-xs);
1697
+ }
1698
+ }
1699
+ @media (min-width: 1800px) {
1700
+ .flex-gap-xl {
1701
+ display: flex;
1702
+ flex-wrap: wrap;
1703
+ gap: var(--padding);
1704
+ }
1705
+ .flex-gap-xl--none {
1706
+ gap: 0;
1707
+ }
1708
+ .flex-gap-xl--sm {
1709
+ gap: var(--padding-sm);
1710
+ }
1711
+ .flex-gap-xl--xs {
1712
+ gap: var(--padding-xs);
1713
+ }
1714
+ }
1715
+
1716
+ .margin {
1717
+ margin-bottom: var(--margin) !important;
1718
+ }
1719
+ .margin-small {
1720
+ margin-bottom: var(--margin-sm) !important;
1721
+ }
1722
+ .margin-none {
1723
+ margin-bottom: 0 !important;
1724
+ }
1725
+ @media (min-width: 740px) {
1726
+ .margin-sm {
1727
+ margin-bottom: var(--margin) !important;
1728
+ }
1729
+ .margin-sm-small {
1730
+ margin-bottom: var(--margin-sm) !important;
1731
+ }
1732
+ .margin-sm-none {
1733
+ margin-bottom: 0 !important;
1734
+ }
1735
+ }
1736
+ @media (min-width: 990px) {
1737
+ .margin-md {
1738
+ margin-bottom: var(--margin) !important;
1739
+ }
1740
+ .margin-md-small {
1741
+ margin-bottom: var(--margin-sm) !important;
1742
+ }
1743
+ .margin-md-none {
1744
+ margin-bottom: 0 !important;
1745
+ }
1746
+ }
1747
+ @media (min-width: 1260px) {
1748
+ .margin-lg {
1749
+ margin-bottom: var(--margin) !important;
1750
+ }
1751
+ .margin-lg-small {
1752
+ margin-bottom: var(--margin-sm) !important;
1753
+ }
1754
+ .margin-lg-none {
1755
+ margin-bottom: 0 !important;
1756
+ }
1757
+ }
1758
+ @media (min-width: 1800px) {
1759
+ .margin-xl {
1760
+ margin-bottom: var(--margin) !important;
1761
+ }
1762
+ .margin-xl-small {
1763
+ margin-bottom: var(--margin-sm) !important;
1764
+ }
1765
+ .margin-xl-none {
1766
+ margin-bottom: 0 !important;
1767
+ }
1768
+ }
1769
+
1770
+ .width-auto {
1771
+ width: auto;
1772
+ }
1773
+ .width-full {
1774
+ width: 100%;
1775
+ }
1776
+ @media (min-width: 740px) {
1777
+ .width-sm-auto {
1778
+ width: auto;
1779
+ }
1780
+ .width-sm-full {
1781
+ width: 100%;
1782
+ }
1783
+ }
1784
+ @media (min-width: 990px) {
1785
+ .width-md-auto {
1786
+ width: auto;
1787
+ }
1788
+ .width-md-full {
1789
+ width: 100%;
1790
+ }
1791
+ }
1792
+ @media (min-width: 1260px) {
1793
+ .width-lg-auto {
1794
+ width: auto;
1795
+ }
1796
+ .width-lg-full {
1797
+ width: 100%;
1798
+ }
1799
+ }
1800
+ @media (min-width: 1800px) {
1801
+ .width-xl-auto {
1802
+ width: auto;
1803
+ }
1804
+ .width-xl-full {
1805
+ width: 100%;
1806
+ }
1807
+ }
1808
+
1809
+ .text-align-left {
1810
+ text-align: left;
1811
+ }
1812
+ .text-align-center {
1813
+ text-align: center;
1814
+ }
1815
+ .text-align-right {
1816
+ text-align: right;
1817
+ }
1818
+ @media (min-width: 740px) {
1819
+ .text-align-sm-left {
1820
+ text-align: left;
1821
+ }
1822
+ .text-align-sm-center {
1823
+ text-align: center;
1824
+ }
1825
+ .text-align-sm-right {
1826
+ text-align: right;
1827
+ }
1828
+ }
1829
+ @media (min-width: 990px) {
1830
+ .text-align-md-left {
1831
+ text-align: left;
1832
+ }
1833
+ .text-align-md-center {
1834
+ text-align: center;
1835
+ }
1836
+ .text-align-md-right {
1837
+ text-align: right;
1838
+ }
1839
+ }
1840
+ @media (min-width: 1260px) {
1841
+ .text-align-lg-left {
1842
+ text-align: left;
1843
+ }
1844
+ .text-align-lg-center {
1845
+ text-align: center;
1846
+ }
1847
+ .text-align-lg-right {
1848
+ text-align: right;
1849
+ }
1850
+ }
1851
+ @media (min-width: 1800px) {
1852
+ .text-align-xl-left {
1853
+ text-align: left;
1854
+ }
1855
+ .text-align-xl-center {
1856
+ text-align: center;
1857
+ }
1858
+ .text-align-xl-right {
1859
+ text-align: right;
1860
+ }
1861
+ }
1862
+
1863
+ :host,
1864
+ :root {
1865
+ --color-accent: var(--hawksearch-color-accent, #119ff7);
1866
+ --color-secondary: var(--hawksearch-color-secondary, #ccc);
1867
+ --color-secondary-light: var(--hawksearch-color-secondary-light, #f1f1f1);
1868
+ --color-secondary-dark: var(--hawksearch-color-secondary-dark, #757575);
1869
+ --color-background: var(--hawksearch-color-background, #fff);
1870
+ --container-background: var(--hawksearch-container-background, var(--color-background));
1871
+ --container-background--alternate: var(--hawksearch-container-background--alternate, var(--color-secondary-light));
1872
+ --container-border: var(--hawksearch-container-border, solid 1px var(--color-secondary));
1873
+ --default-line-height: var(--hawksearch-default-line-height, 1.25);
1874
+ --default-font-color: var(--hawksearch-default-font-color, #2e2e2e);
1875
+ --default-font-color--inverse: var(--hawksearch-default-font-color--inverse, #fff);
1876
+ --default-font-family: var(--hawksearch-default-font-family, Arial, sans-serif);
1877
+ --default-font-size: var(--hawksearch-default-font-size, 16px);
1878
+ --button-background: var(--hawksearch-button-background, var(--color-accent));
1879
+ --button-border-radius: var(--hawksearch-button-border-radius, 5px);
1880
+ --button-font-color: var(--hawksearch-button-font-color, #fff);
1881
+ --form-element-background: var(--hawksearch-form-element-background, var(--color-background));
1882
+ --form-element-border: var(--hawksearch-form-element-border, solid 1px var(--color-secondary));
1883
+ --form-element-border--focus: var(--hawksearch-form-element-border--focus, solid 1px var(--color-accent));
1884
+ --form-element-border-radius: var(--hawksearch-form-element-border-radius, 0);
1885
+ --form-element-placeholder-color: var(--hawksearch-form-element-placeholder-color, var(--color-secondary-dark));
1886
+ --margin: var(--hawksearch-margin, 32px);
1887
+ --margin-sm: var(--hawksearch-margin-sm, calc(var(--margin) / 2));
1888
+ --padding: var(--hawksearch-padding, 24px);
1889
+ --padding-xs: var(--hawksearch-padding-xs, calc(var(--padding) / 4));
1890
+ --padding-sm: var(--hawksearch-padding-sm, calc(var(--padding) / 2));
1891
+ --secondary-font-color: var(--hawksearch-secondary-font-color, var(--color-secondary-dark));
1892
+ font-family: var(--default-font-family);
1893
+ font-size: var(--default-font-size);
1894
+ color: var(--default-font-color);
1895
+ line-height: var(--default-line-height);
1896
+ }