apirocket 0.2.1 → 0.3.0

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.
@@ -392,6 +392,232 @@
392
392
 
393
393
  .apirocket-cart-header-continue { display: none; }
394
394
  .apirocket-cart-header-login { display: none; }
395
+ }
396
+ .apirocket-button,
397
+ button.apirocket-button {
398
+ box-sizing: border-box !important;
399
+ display: block;
400
+ width: 100%;
401
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
402
+ margin: 0px;
403
+ border-radius: var(--cart-button-border-radius, 4px);
404
+ background-color: var(--cart-button-background-color, transparent);
405
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
406
+ color: var(--cart-button-font-color, #737373);
407
+ line-height: 1;
408
+ font-size: var(--cart-button-font-size, 16px);
409
+ font-weight: var(--cart-button-font-weight, normal);
410
+ text-align: center;
411
+ transition-property: color, border-color, background-color, box-shadow;
412
+ transition-timing-function: ease;
413
+ transition-duration: 350ms;
414
+ cursor: pointer;
415
+ }
416
+
417
+ .apirocket-button:hover {
418
+ background-color: var(--cart-button-background-color-hover, transparent);
419
+ border-color: var(--cart-button-border-color-hover, #404040);
420
+ color: var(--cart-button-font-color-hover, #404040);
421
+ }
422
+
423
+ .apirocket-button:focus {
424
+ outline: none;
425
+ text-decoration: underline;
426
+ }
427
+ /*
428
+ .apirocket-button-loading {
429
+ position: relative;
430
+ } */
431
+
432
+ .apirocket-button-wraper {
433
+ position: relative;
434
+ display: inline-block;
435
+ width: 32px;
436
+ }
437
+
438
+ .apirocket-button-spinner {
439
+ position: absolute;
440
+ width: 22px;
441
+ height: 22px;
442
+ top: -11px;
443
+ left: 0;
444
+ right: 0;
445
+ bottom: 0;
446
+ margin: auto;
447
+ border: 4px solid currentColor;
448
+ border-top-color: transparent !important;
449
+ border-radius: 50%;
450
+ animation: button-loading-spinner 1s ease infinite;
451
+ }
452
+
453
+ @keyframes button-loading-spinner {
454
+ from { transform: rotate(0turn) }
455
+ to { transform: rotate(1turn) }
456
+ }
457
+
458
+ .apirocket-button-link,
459
+ button.apirocket-button-link {
460
+ display: flex;
461
+ align-items: center;
462
+ text-align: left;
463
+ justify-content: flex-start;
464
+ align-items: center;
465
+ border: none;
466
+ padding-left: 0;
467
+ padding-right: 0;
468
+ width: auto;
469
+ overflow: hidden;
470
+ white-space: nowrap;
471
+ text-overflow: ellipsis;
472
+ }
473
+
474
+ .apirocket-button-link span {
475
+ margin-left: 16px;
476
+ margin-right: 16px;
477
+ }
478
+
479
+ .apirocket-button-primary,
480
+ button.apirocket-button-primary {
481
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
482
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
483
+ color: var(--cart-button-primary-text-color, #fff);
484
+ }
485
+
486
+ button.apirocket-button-primary:disabled {
487
+ background-color: #eee;
488
+ border-color: #eee;
489
+ color: #ccc;
490
+ }
491
+
492
+ .apirocket-button-primary:hover {
493
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
494
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
495
+ color: var(--cart-button-primary-text-color-hover, #fff);
496
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
497
+ }
498
+
499
+
500
+ @media (max-width: 720px) {
501
+
502
+ .apirocket-button-link {
503
+ width: 100%;
504
+ justify-content: center;
505
+ }
506
+
507
+ }
508
+
509
+ .apirocket-summary {}
510
+
511
+ .apirocket-summary-top {
512
+ margin-top: 56px;
513
+ margin-bottom: 32px;
514
+ }
515
+
516
+ .apirocket-summary-header {
517
+ display: flex;
518
+ justify-content: flex-start;
519
+ align-items: center;
520
+ margin-bottom: 32px;
521
+ }
522
+
523
+ .apirocket-summary-header-icon {
524
+ flex: 0 1;
525
+ margin-right: 16px;
526
+ }
527
+
528
+ .apirocket-summary-header-content {}
529
+
530
+ .apirocket-summary-header-title {
531
+ font-size: 24px;
532
+ font-weight: bold;
533
+ line-height: 1.2;
534
+ color: #404040;
535
+ margin-bottom: 4px;
536
+ }
537
+
538
+ .apirocket-summary-header-subtitle {
539
+ font-size: 18px;
540
+ font-weight: normal;
541
+ line-height: 1.2;
542
+ color: #737373;
543
+ }
544
+
545
+ .apirocket-summary-section {
546
+ margin-top: 16px;
547
+ border: 1px solid #d9d9d9;
548
+ border-radius: 4px;
549
+ padding: 24px;
550
+ }
551
+
552
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
553
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
554
+
555
+ .apirocket-summary-section-title {
556
+ font-size: 18px;
557
+ font-weight: bold;
558
+ line-height: 1.2;
559
+ color: #404040;
560
+ margin-bottom: 24px;
561
+ }
562
+
563
+ .apirocket-summary-section-subtitle {
564
+ font-size: 16px;
565
+ font-weight: bold;
566
+ line-height: 1;
567
+ color: #404040;
568
+ margin-bottom: 16px;
569
+ }
570
+
571
+ .apirocket-summary-section-text {
572
+ font-size: 14px;
573
+ font-weight: normal;
574
+ line-height: 18px;
575
+ color: #404040;
576
+ }
577
+
578
+ .apirocket-summary-help {
579
+ display: flex;
580
+ justify-content: flex-start;
581
+ align-items: center;
582
+ }
583
+
584
+ .apirocket-summary-help-icon {
585
+ flex: 0 1;
586
+ padding-right: 12px;
587
+ }
588
+
589
+ .apirocket-summary-help-content {
590
+ font-size: 14px;
591
+ font-weight: normal;
592
+ line-height: 1.2;
593
+ color: #404040;
594
+ }
595
+
596
+ .apirocket-summary-help-content a {
597
+ display: block;
598
+ color: #737373;
599
+ }
600
+
601
+ @media (max-width: 1000px) {
602
+ .apirocket-summary-top { display: none; }
603
+ .apirocket-summary-header { margin-top: 32px; }
604
+ }
605
+
606
+ @media (max-width: 720px) {
607
+ .apirocket-summary-section-subtitle { margin-top: 24px; }
608
+ .apirocket-summary-header {
609
+ flex-direction: column;
610
+ align-items: center;
611
+ text-align: center;
612
+ }
613
+ .apirocket-summary-header-icon {
614
+ margin-right: 0px;
615
+ margin-bottom: 16px;
616
+ }
617
+ .apirocket-summary-header-title {
618
+ font-size: 28px;
619
+ margin-bottom: 8px;
620
+ }
395
621
  }.apirocket-modal *,
396
622
  .apirocket-modal *::before,
397
623
  .apirocket-modal *::after { box-sizing: border-box; }
@@ -581,905 +807,516 @@
581
807
  text-align: center;
582
808
  line-height: 16px;
583
809
  margin-bottom: 32px;
584
- }.apirocket-form-input {
810
+ }.apirocket-error-block {
811
+ display: flex;
812
+ justify-content: start;
813
+ align-items: center;
814
+ background-color: #fef2f2;
815
+ padding: 16px;
816
+ color: #dc2626;
817
+ font-size: 14px;
818
+ line-height: 18px;
819
+ border-radius: 8px;
820
+ margin-top: 16px;
821
+ margin-bottom: 0px;
822
+ }
823
+
824
+ .apirocket-error-block-icon {
825
+ margin-right: 12px;
826
+ }.apirocket-checkout * { box-sizing: content-box; }
827
+
828
+ .apirocket-checkout {
585
829
  display: block;
586
- position: relative;
587
- margin-bottom: 16px;
830
+ position: fixed;
831
+ z-index: 10000;
832
+ right: 0;
833
+ top: 0;
834
+ overflow: hidden;
835
+ overflow-y: auto;
836
+ width: 100%;
837
+ height: 100vh;
838
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
839
+ background-color: #fff;
588
840
  }
589
841
 
590
- .apirocket-form-input input {
591
- all: unset;
592
- appearance: none;
593
- -moz-appearance: none;
594
- -webkit-appearance: none;
595
- outline: none;
596
- width: 100%;
597
- height: 46px;
598
- background: #fff;
599
- border-radius: 4px;
600
- border: 1px solid #D9D9D9;
601
- font-size: 14px;
602
- line-height: 1;
603
- padding-left: 14px;
604
- padding-right: 14px;
605
- padding-top: 14px;
606
- padding-bottom: 14px;
607
- transition: all 0.3s ease;
608
- box-sizing: border-box;
609
- }
842
+ .apirocket-checkout-wrap {
843
+ display: flex;
844
+ margin: 0 auto;
845
+ width: 90%;
846
+ min-height: 100%;
847
+ max-width: 1100px;
848
+ padding: 0 5%;
610
849
 
611
- .apirocket-form-input input:focus {
612
- border-color: #404040;
613
- box-shadow: 0 0 0 1px #404040;
614
850
  }
615
851
 
616
- .apirocket-form-input input:not(:placeholder-shown) {
617
- padding-top: 22px;
618
- padding-bottom: 6px;
852
+ .apirocket-checkout-main {
853
+ order: 1;
854
+ width: 52%;
855
+ padding-right: 48px;
619
856
  }
620
857
 
621
- .apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
858
+ .apirocket-checkout-summary {
859
+ order: 2;
860
+ position: relative;
861
+ width: 40%;
862
+ padding-left: 48px;
863
+ }
622
864
 
623
- .apirocket-form-input-placeholder {
865
+ .apirocket-checkout-summary::after {
624
866
  position: absolute;
625
- font-size: 12px;
626
- line-height: 1;
627
- color: #737373;
628
- transform: translateY(50%);
629
- opacity: 0;
630
- top: 8px;
631
- left: 15px;
632
- transition: all 0.3s ease;
633
- overflow: hidden;
634
- white-space: nowrap;
635
- text-overflow: ellipsis;
867
+ display: block;
868
+ top: 0;
869
+ left: 0;
870
+ content: "";
871
+ width: 300%;
872
+ height: 100%;
873
+ background: #f5f5f5;
874
+ z-index: -1;
636
875
  }
637
876
 
638
- .apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
639
- opacity: 1;
640
- transform: translateY(0%);
877
+ .apirocket-checkout-continue {
878
+ display: flex;
879
+ align-items: center;
880
+ text-align: left;
881
+ margin-top: 40px;
882
+ margin-bottom: 40px;
883
+ color: #737373;
884
+ font-size: 16px;
885
+ font-weight: normal;
886
+ cursor: pointer;
641
887
  }
642
888
 
643
- .apirocket-form-input .apirocket-form-input-error-message {
889
+ .apirocket-checkout-close {
644
890
  display: none;
645
- font-size: 14px;
646
- line-height: 1.2;
647
- margin-top: 4px;
648
- margin-left: 8px;
649
- color: #dc2626;
891
+ cursor: pointer;
892
+ position: absolute;
893
+ top: 16px;
894
+ right: 32px;
650
895
  }
651
896
 
652
- .apirocket-form-input.invalid.touched input {
653
- border-color: #dc2626;
654
- box-shadow: 0 0 0 1px #dc2626;
897
+ .apirocket-checkout-summary-container {
898
+ display: flex;
899
+ flex-flow: column;
900
+ max-height: calc(100vh - 5%);
901
+ overflow: hidden;
655
902
  }
656
903
 
657
- .apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
658
- .apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
904
+ .apirocket-checkout-summary-top {
905
+ flex: 0 0 auto;
906
+ }
659
907
 
660
- .apirocket-form-input-button {
661
- position: absolute;
662
- display: flex;
663
- justify-content: center;
664
- align-items: center;
665
- width: 46px;
666
- height: 46px;
667
- right: 0;
668
- top: 0;
669
- cursor: pointer;
670
- color: #a1a1aa;
908
+ .apirocket-checkout-summary-content {
909
+ flex: 1 1 auto;
910
+ overflow-y: scroll;
671
911
  }
672
912
 
673
- .apirocket-form-input-button:hover { color: #52525b; }
913
+ .apirocket-checkout-summary-footer {
914
+ flex: 0 0 auto;
915
+ }
674
916
 
675
- .apirocket-form-input-button + input {
676
- padding-right: 64px;
917
+ .apirocket-checkout-summary-login {
918
+ display: flex;
919
+ align-items: center;
920
+ justify-content: end;
921
+ text-align: right;
922
+ margin-top: 40px;
923
+ margin-bottom: 40px;
924
+ color: #737373;
925
+ font-size: 16px;
926
+ font-weight: normal;
927
+ cursor: pointer;
677
928
  }
678
929
 
930
+ .apirocket-checkout-summary-login svg,
931
+ .apirocket-checkout-continue svg { margin-right: 16px; }
679
932
 
680
- .apirocket-form-checkbox {
933
+ .apirocket-checkout-summary-header {
681
934
  display: flex;
682
- align-items: flex-start;
683
- justify-content: start;
684
- position: relative;
685
- margin-bottom: 16px;
935
+ justify-content: space-between;
936
+ align-items: center;
937
+ margin-top: 56px;
938
+ margin-bottom: 48px;
686
939
  }
687
940
 
688
- .apirocket-form-checkbox-label {
689
- flex: 0 1 auto;
690
- display: block;
941
+ .apirocket-checkout-summary-header :last-child a {
691
942
  font-size: 14px;
692
- line-height: 20px;
693
943
  font-weight: normal;
694
- color: #404040;
695
- cursor: pointer;
944
+ color: #737373;
696
945
  }
697
946
 
698
- .apirocket-form-checkbox-label small {
699
- display: block;
700
- color: #a3a3a3;
701
- font-size: 12px;
947
+ .apirocket-checkout-summary-item {
948
+ display: flex;
949
+ justify-content: stretch;
950
+ align-items: flex-start;
951
+ padding-bottom: 16px;
952
+ border-bottom: 1px solid #d9d9d9;
953
+ margin-bottom: 16px;
702
954
  }
703
955
 
704
- .apirocket-form-checkbox input {
705
- all: unset;
956
+ .apirocket-checkout-summary-item-col-image {
706
957
  flex: 0 0 auto;
707
- appearance: none;
708
- -moz-appearance: none;
709
- -webkit-appearance: none;
710
- position: relative;
711
- box-sizing: border-box;
712
- display: inline-block;
713
- padding: 0;
714
- margin: 0;
715
- margin-right: 12px;
716
- width: 20px;
717
- height: 20px;
718
- vertical-align: middle;
719
- outline: none;
720
- border: 1px solid #d9d9d9;
958
+ max-width: 100px;
959
+ border: 1px solid #e5e5e5;
721
960
  border-radius: 4px;
722
- cursor: pointer;
723
- transition: all 0.3s ease;
724
961
  overflow: hidden;
725
- background-color: #fff;
726
962
  }
727
963
 
728
- .apirocket-form-checkbox input:focus {
729
- border-color: #404040;
730
- box-shadow: 0 0 0 1px #404040;
964
+ .apirocket-checkout-summary-item-col-image img {
965
+ display: block;
966
+ max-width: 100%;
967
+ max-height: 100px;
731
968
  }
732
969
 
733
- .apirocket-form-checkbox input:checked {
734
- background-color: #404040;
735
- border-color: #404040;
970
+ .apirocket-checkout-summary-item-col-description {
971
+ flex: 1 1 auto;
972
+ padding-left: 16px;
973
+ padding-right: 8px;
974
+ font-size: 14px;
975
+ font-weight: bold;
976
+ line-height: 18px;
736
977
  }
737
978
 
738
- .apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
739
- .apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
740
-
741
- .apirocket-form-checkbox input::after {
979
+ .apirocket-checkout-summary-item-col-description small {
742
980
  display: block;
743
- position: absolute;
744
- width: 20px;
745
- height: 20px;
746
- content: "";
747
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
748
- background-repeat: no-repeat;
749
- background-position: -1px -1px;
750
- transition: all 0.3s ease;
751
- transform: scale(0);
981
+ font-size: 14px;
982
+ font-weight: normal;
983
+ color: #a3a3a3;
752
984
  }
753
985
 
754
- .apirocket-form-checkbox input:checked::after {
755
- transform: scale(1);
986
+ .apirocket-checkout-summary-item-col-quantity {
987
+ flex: 0 0 50px;
988
+ font-size: 16px;
989
+ font-weight: normal;
990
+ color: #a3a3a3;
991
+ text-align: right;
756
992
  }
757
993
 
758
- .apirocket-form-checkbox-error-message {
759
- display: none;
760
- position: absolute;
761
- left: 32px;
762
- bottom: -16px;
763
- font-size: 14px;
764
- line-height: 1.2;
765
- color: #dc2626;
994
+ .apirocket-checkout-summary-item-col-price {
995
+ flex: 0 0 100px;
996
+ font-size: 16px;
997
+ font-weight: bold;
998
+ color: #404040;
999
+ text-align: right;
766
1000
  }
767
1001
 
768
- .apirocket-form-checkbox.invalid.touched input {
769
- border-color: #dc2626;
770
- box-shadow: 0 0 0 1px #dc2626;
1002
+ .apirocket-checkout-summary-row {
1003
+ display: flex;
1004
+ justify-content: space-between;
1005
+ align-items: center;
1006
+ padding-top: 16px;
771
1007
  }
772
1008
 
773
- .apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
774
-
775
- .apirocket-form-radio {
776
- display: flex;
777
- align-items: flex-start;
778
- justify-content: start;
779
- position: relative;
780
- margin-bottom: 16px;
781
- }
782
-
783
- .apirocket-form-radio-label {
784
- position: relative;
785
- flex: 0 1 auto;
786
- display: inline-block;
787
- font-size: 14px;
788
- line-height: 20px;
1009
+ .apirocket-checkout-summary-label {
1010
+ font-size: 16px;
789
1011
  font-weight: normal;
1012
+ line-height: 18px;
790
1013
  color: #404040;
791
- cursor: pointer;
792
1014
  }
793
1015
 
794
- .apirocket-form-radio-label small {
795
- display: block;
796
- color: #a3a3a3;
797
- font-size: 12px;
1016
+ .apirocket-checkout-summary-value {
1017
+ font-size: 18px;
1018
+ font-weight: bold;
1019
+ line-height: 18px;
1020
+ color: #404040;
798
1021
  }
799
1022
 
800
- .apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
801
- .apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
1023
+ .apirocket-checkout-summary-row-total {
1024
+ display: flex;
1025
+ justify-content: space-between;
1026
+ align-items: flex-start;
1027
+ border-top: 1px solid #d9d9d9;
1028
+ margin-top: 24px;
1029
+ padding-top: 24px;
1030
+ }
802
1031
 
803
- .apirocket-form-radio input:disabled { background-color: #f5f5f5; }
804
- .apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
1032
+ .apirocket-checkout-summary-label-total {
1033
+ font-size: 18px;
1034
+ font-weight: bold;
1035
+ line-height: 21px;
1036
+ color: #404040;
1037
+ }
1038
+ .apirocket-checkout-summary-label-total small {
1039
+ display: block;
1040
+ font-size: 14px;
1041
+ line-height: 16px;
1042
+ font-weight: normal;
1043
+ color: #a3a3a3;
1044
+ }
805
1045
 
806
- .apirocket-form-radio-label img,
807
- .apirocket-form-radio-label svg {
808
- position: absolute;
809
- display: inline-block;
810
- height: 24px;
811
- min-height: 24px;
812
- top: -2px;
1046
+ .apirocket-checkout-summary-value-total {
1047
+ font-size: 24px;
1048
+ font-weight: bold;
1049
+ line-height: 24px;
1050
+ color: #404040;
813
1051
  }
814
1052
 
815
- .apirocket-form-radio input {
816
- flex: 0 0 auto;
817
- appearance: none;
818
- -moz-appearance: none;
819
- -webkit-appearance: none;
820
- position: relative;
821
- box-sizing: border-box;
822
- display: inline-block;
1053
+ .apirocket-checkout-breadcrumbs ol {
1054
+ display: flex;
1055
+ align-items: center;
1056
+ list-style: none;
823
1057
  padding: 0;
824
1058
  margin: 0;
825
- margin-right: 12px;
826
- width: 20px;
827
- height: 20px;
828
- vertical-align: middle;
829
- outline: none;
830
- border: 1px solid #d9d9d9;
831
- border-radius: 20px;
832
- cursor: pointer;
833
- transition: all 0.3s ease;
834
- overflow: hidden;
835
- background-color: #fff;
836
- }
837
-
838
- .apirocket-form-radio input:focus {
839
- border-color: #404040;
840
- box-shadow: 0 0 0 1px #404040;
1059
+ margin-top: 24px;
841
1060
  }
842
1061
 
843
- .apirocket-form-radio input:checked {
844
- background-color: #404040;
845
- border-color: #404040;
1062
+ .apirocket-checkout-breadcrumbs ol li {
1063
+ cursor: pointer;
1064
+ color: #a3a3a3;
1065
+ font-size: 14px;
1066
+ line-height: 1;
846
1067
  }
847
1068
 
848
- .apirocket-form-radio input::after {
849
- display: block;
850
- position: absolute;
851
- width: 20px;
852
- height: 20px;
1069
+ .apirocket-checkout-breadcrumbs ol li::after {
1070
+ width: 5px;
1071
+ height: 9px;
1072
+ display: inline-block;
853
1073
  content: "";
854
- background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
1074
+ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
855
1075
  background-repeat: no-repeat;
856
- background-position: 6px 6px;
857
- transition: all 0.4s ease;
858
- transform: scale(0);
1076
+ background-position: center;
1077
+ padding: 0 8px;
859
1078
  }
860
1079
 
861
- .apirocket-form-radio input:checked::after {
862
- transform: scale(1);
863
- }
1080
+ .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
864
1081
 
865
- .apirocket-form-radio-error-message {
866
- display: none;
867
- position: absolute;
868
- left: 32px;
869
- bottom: -16px;
870
- font-size: 14px;
871
- line-height: 1.2;
872
- color: #dc2626;
1082
+ .apirocket-checkout-breadcrumbs ol li a {
1083
+ color: #a3a3a3;
1084
+ text-decoration: underline;
873
1085
  }
874
1086
 
875
- .apirocket-form-radio.invalid.touched input {
876
- border-color: #dc2626;
877
- box-shadow: 0 0 0 1px #dc2626;
1087
+ .apirocket-checkout-breadcrumbs-active {
1088
+ font-weight: bold;
1089
+ color: #404040 !important;
878
1090
  }
879
1091
 
880
- .apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
1092
+ .apirocket-checkout-steps-summary {
1093
+ border: 1px solid #d9d9d9;
1094
+ border-radius: 4px;
1095
+ overflow: hidden;
1096
+ margin-top: 48px;
1097
+ }
881
1098
 
882
- .apirocket-form-select {
883
- display: block;
1099
+ .apirocket-checkout-steps-summary-row {
1100
+ display: flex;
884
1101
  position: relative;
885
- margin-bottom: 16px;
1102
+ border-bottom: 1px solid #d9d9d9;
1103
+ padding: 16px;
886
1104
  }
887
1105
 
888
- .apirocket-form-select select {
889
- all: unset;
890
- appearance: none;
891
- -moz-appearance: none;
892
- -webkit-appearance: none;
893
- outline: none;
894
- width: 100%;
895
- height: 46px;
896
- border-radius: 4px;
897
- border: 1px solid #D9D9D9;
1106
+ .apirocket-checkout-steps-summary-label {
1107
+ flex: 0 0 90px;
898
1108
  font-size: 14px;
899
- line-height: 16px;
900
- padding-left: 14px;
901
- padding-right: 50px;
902
- padding-top: 14px;
903
- padding-bottom: 14px;
904
- transition: all 0.3s ease;
905
- box-sizing: border-box;
906
- cursor: pointer;
1109
+ font-weight: normal;
1110
+ line-height: 14px;
1111
+ color: #a3a3a3;
907
1112
  }
908
1113
 
909
- .apirocket-form-select select:focus {
910
- border-color: #404040;
911
- box-shadow: 0 0 0 1px #404040;
1114
+ .apirocket-checkout-steps-summary-text {
1115
+ flex: 1 1 auto;
1116
+ font-size: 14px;
1117
+ font-weight: normal;
1118
+ line-height: 18px;
1119
+ color: #404040;
912
1120
  }
913
1121
 
914
- .apirocket-form-select select:not(:placeholder-shown) {
915
- padding-top: 22px;
916
- padding-bottom: 6px;
1122
+ .apirocket-checkout-steps-summary-link {
1123
+ flex: 0 0 60px;
1124
+ text-align: right;
1125
+ font-size: 12px;
1126
+ font-weight: normal;
1127
+ line-height: 1;
1128
+ text-decoration: underline;
1129
+ color: #737373;
1130
+ cursor: pointer;
917
1131
  }
918
1132
 
919
- .apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
1133
+ .apirocket-checkout-section {
1134
+ margin-top: 48px;
1135
+ }
920
1136
 
921
- .apirocket-form-select::before {
922
- display: block;
923
- position: absolute;
924
- top: 8px;
925
- right: 0px;
926
- width: 40px;
927
- height: 30px;
928
- content: "";
929
- background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
930
- background-repeat: no-repeat;
931
- background-position: center;
932
- border-left: 1px solid #d9d9d9;
933
- pointer-events: none;
1137
+ .apirocket-checkout-section-header {
1138
+ margin-bottom: 24px;
934
1139
  }
935
1140
 
936
- .apirocket-form-select-placeholder {
937
- position: absolute;
1141
+ .apirocket-checkout-section-title {
1142
+ font-size: 18px;
1143
+ font-weight: bold;
1144
+ line-height: 1;
1145
+ color: #404040;
1146
+ }
1147
+
1148
+ .apirocket-checkout-section-subtitle {
938
1149
  font-size: 12px;
1150
+ font-weight: normal;
1151
+ padding-top: 4px;
939
1152
  line-height: 1;
940
- color: #737373;
941
- transform: translateY(50%);
942
- opacity: 0;
943
- top: 8px;
944
- left: 15px;
945
- transition: all 0.3s ease;
946
- overflow: hidden;
947
- white-space: nowrap;
948
- text-overflow: ellipsis;
1153
+ color: #a3a3a3;
1154
+ text-align: right;
949
1155
  }
950
1156
 
951
- .apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
952
- opacity: 1;
953
- transform: translateY(0%);
1157
+ .apirocket-checkout-button-edit {
1158
+ cursor: pointer;
954
1159
  }
955
1160
 
956
- .apirocket-form-select .apirocket-form-select-error-message {
957
- display: none;
958
- font-size: 14px;
959
- line-height: 1.2;
960
- margin-top: 4px;
961
- margin-left: 8px;
962
- color: #dc2626;
1161
+ .apirocket-checkout-button-edit:hover {
1162
+ text-decoration: underline;
963
1163
  }
964
1164
 
965
- .apirocket-form-select.invalid.touched select {
966
- border-color: #dc2626;
967
- box-shadow: 0 0 0 1px #dc2626;
1165
+ .apirocket-checkout-section a {
1166
+ color: #404040;
1167
+ outline: none;
1168
+ text-decoration: underline;
968
1169
  }
969
1170
 
970
- .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
971
- .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1171
+ .apirocket-checkout-section-text {
1172
+ font-size: 14px;
1173
+ line-height: 1;
1174
+ margin-top: 4px;
1175
+ color: #737373;
1176
+ }
972
1177
 
973
- .apirocket-error-block {
1178
+ .apirocket-checkout-actions {
974
1179
  display: flex;
975
- justify-content: start;
1180
+ margin-top: 64px;
976
1181
  align-items: center;
977
- background-color: #fef2f2;
978
- padding: 16px;
979
- color: #dc2626;
980
- font-size: 14px;
981
- line-height: 18px;
982
- border-radius: 8px;
983
- margin-top: 16px;
984
- margin-bottom: 0px;
985
- }
1182
+ max-width: 100%;
1183
+ }
986
1184
 
987
- .apirocket-error-block-icon {
988
- margin-right: 12px;
989
- }.apirocket-checkout * { box-sizing: content-box; }
1185
+ .apirocket-checkout-actions > * { flex: 1 1; }
990
1186
 
991
- .apirocket-checkout {
992
- display: block;
993
- position: fixed;
994
- z-index: 10000;
995
- right: 0;
996
- top: 0;
997
- overflow: hidden;
998
- overflow-y: auto;
999
- width: 100%;
1000
- height: 100vh;
1001
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1002
- background-color: #fff;
1187
+ .apirocket-checkout-footer {
1188
+ margin-top: 72px;
1189
+ border-top: 1px solid #d9d9d9;
1190
+ margin-bottom: 64px;
1191
+ padding-top: 16px;
1003
1192
  }
1004
1193
 
1005
- .apirocket-checkout-wrap {
1194
+ .apirocket-checkout-footer ul {
1006
1195
  display: flex;
1007
- margin: 0 auto;
1008
- width: 90%;
1009
- min-height: 100%;
1010
- max-width: 1100px;
1011
- padding: 0 5%;
1012
-
1196
+ align-items: center;
1197
+ list-style: none;
1198
+ padding: 0;
1199
+ margin: 0;
1013
1200
  }
1014
1201
 
1015
- .apirocket-checkout-main {
1016
- order: 1;
1017
- width: 52%;
1018
- padding-right: 48px;
1019
- }
1202
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
1020
1203
 
1021
- .apirocket-checkout-summary {
1022
- order: 2;
1023
- position: relative;
1024
- width: 40%;
1025
- padding-left: 48px;
1204
+ .apirocket-checkout-footer ul li a {
1205
+ color: #404040;
1206
+ font-size: 14px;
1207
+ line-height: 1;
1208
+ text-decoration: none;
1026
1209
  }
1027
1210
 
1028
- .apirocket-checkout-summary::after {
1029
- position: absolute;
1030
- display: block;
1031
- top: 0;
1032
- left: 0;
1033
- content: "";
1034
- width: 300%;
1035
- height: 100%;
1036
- background: #f5f5f5;
1037
- z-index: -1;
1211
+ .apirocket-checkout-footer ul li a:focus {
1212
+ outline: none;
1213
+ text-decoration: underline;
1038
1214
  }
1039
1215
 
1040
- .apirocket-checkout-continue {
1041
- display: flex;
1042
- align-items: center;
1043
- text-align: left;
1044
- margin-top: 40px;
1045
- margin-bottom: 40px;
1216
+ .apircoket-checkout-legal {
1217
+ margin-top: 16px;
1218
+ font-size: 14px;
1046
1219
  color: #737373;
1047
- font-size: 16px;
1048
1220
  font-weight: normal;
1049
- cursor: pointer;
1221
+ line-height: 1.4;
1050
1222
  }
1051
1223
 
1052
- .apirocket-checkout-close {
1053
- display: none;
1054
- cursor: pointer;
1055
- position: absolute;
1056
- top: 16px;
1057
- right: 32px;
1224
+ .apircoket-checkout-legal a {
1225
+ text-decoration: underline;
1226
+ color: #404040;
1058
1227
  }
1059
1228
 
1060
- .apirocket-checkout-summary-container {
1061
- display: flex;
1062
- flex-flow: column;
1063
- max-height: calc(100vh - 5%);
1064
- overflow: hidden;
1229
+ .apirocket-checkout-logo img {
1230
+ display: block;
1231
+ max-height: 80px;
1065
1232
  }
1066
1233
 
1067
- .apirocket-checkout-summary-top {
1068
- flex: 0 0 auto;
1069
- }
1234
+ .apirocket-checkout-mobile { display: none; }
1070
1235
 
1071
- .apirocket-checkout-summary-content {
1072
- flex: 1 1 auto;
1073
- overflow-y: scroll;
1236
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
1237
+ display: block;
1238
+ margin-top: 16px;
1239
+ margin-bottom: 16px;
1074
1240
  }
1075
-
1076
- .apirocket-checkout-summary-footer {
1077
- flex: 0 0 auto;
1241
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
1242
+ display: block;
1243
+ margin: auto;
1244
+ max-height: 80px;
1078
1245
  }
1079
1246
 
1080
- .apirocket-checkout-summary-login {
1081
- display: flex;
1082
- align-items: center;
1083
- justify-content: end;
1084
- text-align: right;
1085
- margin-top: 40px;
1086
- margin-bottom: 40px;
1087
- color: #737373;
1088
- font-size: 16px;
1089
- font-weight: normal;
1090
- cursor: pointer;
1247
+ .apirocket-checkout-mobile-menu {
1248
+ background-color: #f5f5f5;
1249
+ border-top: 1px solid #d9d9d9;
1091
1250
  }
1092
1251
 
1093
- .apirocket-checkout-summary-login svg,
1094
- .apirocket-checkout-continue svg { margin-right: 16px; }
1095
-
1096
- .apirocket-checkout-summary-header {
1252
+ .apirocket-checkout-mobile-wrapper {
1097
1253
  display: flex;
1098
1254
  justify-content: space-between;
1099
1255
  align-items: center;
1100
- margin-top: 56px;
1101
- margin-bottom: 48px;
1256
+ width: 90%;
1257
+ max-width: 560px;
1258
+ margin: 0 auto;
1259
+ padding: 16px 0px;
1260
+ color: #404040;
1102
1261
  }
1103
1262
 
1104
- .apirocket-checkout-summary-header :last-child a {
1105
- font-size: 14px;
1106
- font-weight: normal;
1107
- color: #737373;
1263
+ .apirocket-checkout-mobile-wrapper-cart {
1264
+ display: inline-flex;
1265
+ align-items: center;
1266
+ color: #404040;
1267
+ cursor: pointer;
1108
1268
  }
1109
1269
 
1110
- .apirocket-checkout-summary-item {
1111
- display: flex;
1112
- justify-content: stretch;
1113
- align-items: flex-start;
1114
- padding-bottom: 16px;
1115
- border-bottom: 1px solid #d9d9d9;
1116
- margin-bottom: 16px;
1270
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
1271
+
1272
+ .apirocket-checkout-mobile-wrapper-total {
1273
+ line-height: 20px;
1274
+ font-size: 20px;
1275
+ font-weight: bold;
1117
1276
  }
1118
1277
 
1119
- .apirocket-checkout-summary-item-col-image {
1120
- flex: 0 0 auto;
1121
- max-width: 100px;
1122
- border: 1px solid #e5e5e5;
1123
- border-radius: 4px;
1278
+ .apirocket-checkout-mobile-summary {
1279
+ background-color: #f5f5f5;
1280
+ transition-property: max-height;
1281
+ transition-timing-function: ease-in;
1282
+ transition-duration: 350ms;
1283
+ max-height: 0px;
1124
1284
  overflow: hidden;
1285
+ border-bottom: 1px solid #d9d9d9;
1125
1286
  }
1126
1287
 
1127
- .apirocket-checkout-summary-item-col-image img {
1128
- display: block;
1129
- max-width: 100%;
1130
- max-height: 100px;
1288
+ .apirocket-checkout-mobile-summary--show {
1289
+ max-height: 1000px;
1290
+ overflow: auto;
1131
1291
  }
1132
1292
 
1133
- .apirocket-checkout-summary-item-col-description {
1134
- flex: 1 1 auto;
1135
- padding-left: 16px;
1136
- padding-right: 8px;
1137
- font-size: 14px;
1138
- font-weight: bold;
1139
- line-height: 18px;
1293
+ .apirocket-checkout-mobile-summary-wrapper {
1294
+ width: 90%;
1295
+ max-width: 560px;
1296
+ padding: 16px 0px;
1297
+ margin: 0 auto;
1140
1298
  }
1141
1299
 
1142
- .apirocket-checkout-summary-item-col-description small {
1143
- display: block;
1144
- font-size: 14px;
1145
- font-weight: normal;
1146
- color: #a3a3a3;
1147
- }
1148
1300
 
1149
- .apirocket-checkout-summary-item-col-quantity {
1150
- flex: 0 0 50px;
1151
- font-size: 16px;
1152
- font-weight: normal;
1153
- color: #a3a3a3;
1154
- text-align: right;
1155
- }
1156
1301
 
1157
- .apirocket-checkout-summary-item-col-price {
1158
- flex: 0 0 100px;
1159
- font-size: 16px;
1160
- font-weight: bold;
1161
- color: #404040;
1162
- text-align: right;
1163
- }
1302
+ /* Utils */
1164
1303
 
1165
- .apirocket-checkout-summary-row {
1304
+ .apirocket-checkout-row {
1166
1305
  display: flex;
1167
1306
  justify-content: space-between;
1168
- align-items: center;
1169
- padding-top: 16px;
1307
+ align-items: flex-start;
1170
1308
  }
1171
-
1172
- .apirocket-checkout-summary-label {
1173
- font-size: 16px;
1174
- font-weight: normal;
1175
- line-height: 18px;
1176
- color: #404040;
1309
+ .apirocket-checkout-row > * {
1310
+ flex: 1 1;
1311
+ margin-right: 16px;
1177
1312
  }
1178
1313
 
1179
- .apirocket-checkout-summary-value {
1180
- font-size: 18px;
1181
- font-weight: bold;
1182
- line-height: 18px;
1183
- color: #404040;
1184
- }
1185
-
1186
- .apirocket-checkout-summary-row-total {
1187
- display: flex;
1188
- justify-content: space-between;
1189
- align-items: flex-start;
1190
- border-top: 1px solid #d9d9d9;
1191
- margin-top: 24px;
1192
- padding-top: 24px;
1193
- }
1194
-
1195
- .apirocket-checkout-summary-label-total {
1196
- font-size: 18px;
1197
- font-weight: bold;
1198
- line-height: 21px;
1199
- color: #404040;
1200
- }
1201
- .apirocket-checkout-summary-label-total small {
1202
- display: block;
1203
- font-size: 14px;
1204
- line-height: 16px;
1205
- font-weight: normal;
1206
- color: #a3a3a3;
1207
- }
1208
-
1209
- .apirocket-checkout-summary-value-total {
1210
- font-size: 24px;
1211
- font-weight: bold;
1212
- line-height: 24px;
1213
- color: #404040;
1214
- }
1215
-
1216
- .apirocket-checkout-breadcrumbs ol {
1217
- display: flex;
1218
- align-items: center;
1219
- list-style: none;
1220
- padding: 0;
1221
- margin: 0;
1222
- margin-top: 24px;
1223
- }
1224
-
1225
- .apirocket-checkout-breadcrumbs ol li {
1226
- cursor: pointer;
1227
- color: #a3a3a3;
1228
- font-size: 14px;
1229
- line-height: 1;
1230
- }
1231
-
1232
- .apirocket-checkout-breadcrumbs ol li::after {
1233
- width: 5px;
1234
- height: 9px;
1235
- display: inline-block;
1236
- content: "";
1237
- background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
1238
- background-repeat: no-repeat;
1239
- background-position: center;
1240
- padding: 0 8px;
1241
- }
1242
-
1243
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
1244
-
1245
- .apirocket-checkout-breadcrumbs ol li a {
1246
- color: #a3a3a3;
1247
- text-decoration: underline;
1248
- }
1249
-
1250
- .apirocket-checkout-breadcrumbs-active {
1251
- font-weight: bold;
1252
- color: #404040 !important;
1253
- }
1254
-
1255
- .apirocket-checkout-steps-summary {
1256
- border: 1px solid #d9d9d9;
1257
- border-radius: 4px;
1258
- overflow: hidden;
1259
- margin-top: 48px;
1260
- }
1261
-
1262
- .apirocket-checkout-steps-summary-row {
1263
- display: flex;
1264
- position: relative;
1265
- border-bottom: 1px solid #d9d9d9;
1266
- padding: 16px;
1267
- }
1268
-
1269
- .apirocket-checkout-steps-summary-label {
1270
- flex: 0 0 90px;
1271
- font-size: 14px;
1272
- font-weight: normal;
1273
- line-height: 14px;
1274
- color: #a3a3a3;
1275
- }
1276
-
1277
- .apirocket-checkout-steps-summary-text {
1278
- flex: 1 1 auto;
1279
- font-size: 14px;
1280
- font-weight: normal;
1281
- line-height: 18px;
1282
- color: #404040;
1283
- }
1284
-
1285
- .apirocket-checkout-steps-summary-link {
1286
- flex: 0 0 60px;
1287
- text-align: right;
1288
- font-size: 12px;
1289
- font-weight: normal;
1290
- line-height: 1;
1291
- text-decoration: underline;
1292
- color: #737373;
1293
- cursor: pointer;
1294
- }
1295
-
1296
- .apirocket-checkout-section {
1297
- margin-top: 48px;
1298
- }
1299
-
1300
- .apirocket-checkout-section-header {
1301
- margin-bottom: 24px;
1302
- }
1303
-
1304
- .apirocket-checkout-section-title {
1305
- font-size: 18px;
1306
- font-weight: bold;
1307
- line-height: 1;
1308
- color: #404040;
1309
- }
1310
-
1311
- .apirocket-checkout-section-subtitle {
1312
- font-size: 12px;
1313
- font-weight: normal;
1314
- padding-top: 4px;
1315
- line-height: 1;
1316
- color: #a3a3a3;
1317
- text-align: right;
1318
- }
1319
-
1320
- .apirocket-checkout-button-edit {
1321
- cursor: pointer;
1322
- }
1323
-
1324
- .apirocket-checkout-button-edit:hover {
1325
- text-decoration: underline;
1326
- }
1327
-
1328
- .apirocket-checkout-section a {
1329
- color: #404040;
1330
- outline: none;
1331
- text-decoration: underline;
1332
- }
1333
-
1334
- .apirocket-checkout-section-text {
1335
- font-size: 14px;
1336
- line-height: 1;
1337
- margin-top: 4px;
1338
- color: #737373;
1339
- }
1340
-
1341
- .apirocket-checkout-actions {
1342
- display: flex;
1343
- margin-top: 64px;
1344
- align-items: center;
1345
- max-width: 100%;
1346
- }
1347
-
1348
- .apirocket-checkout-actions > * { flex: 1 1; }
1349
-
1350
- .apirocket-checkout-footer {
1351
- margin-top: 72px;
1352
- border-top: 1px solid #d9d9d9;
1353
- margin-bottom: 64px;
1354
- padding-top: 16px;
1355
- }
1356
-
1357
- .apirocket-checkout-footer ul {
1358
- display: flex;
1359
- align-items: center;
1360
- list-style: none;
1361
- padding: 0;
1362
- margin: 0;
1363
- }
1364
-
1365
- .apirocket-checkout-footer ul li { margin-right: 16px; }
1366
-
1367
- .apirocket-checkout-footer ul li a {
1368
- color: #404040;
1369
- font-size: 14px;
1370
- line-height: 1;
1371
- text-decoration: none;
1372
- }
1373
-
1374
- .apirocket-checkout-footer ul li a:focus {
1375
- outline: none;
1376
- text-decoration: underline;
1377
- }
1378
-
1379
- .apircoket-checkout-legal {
1380
- margin-top: 16px;
1381
- font-size: 14px;
1382
- color: #737373;
1383
- font-weight: normal;
1384
- line-height: 1.4;
1385
- }
1386
-
1387
- .apircoket-checkout-legal a {
1388
- text-decoration: underline;
1389
- color: #404040;
1390
- }
1391
-
1392
- .apirocket-checkout-logo img {
1393
- display: block;
1394
- max-height: 80px;
1395
- }
1396
-
1397
- .apirocket-checkout-mobile { display: none; }
1398
-
1399
- .apirocket-checkout-mobile .apirocket-checkout-logo {
1400
- display: block;
1401
- margin-top: 16px;
1402
- margin-bottom: 16px;
1403
- }
1404
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1405
- display: block;
1406
- margin: auto;
1407
- max-height: 80px;
1408
- }
1409
-
1410
- .apirocket-checkout-mobile-menu {
1411
- background-color: #f5f5f5;
1412
- border-top: 1px solid #d9d9d9;
1413
- }
1414
-
1415
- .apirocket-checkout-mobile-wrapper {
1416
- display: flex;
1417
- justify-content: space-between;
1418
- align-items: center;
1419
- width: 90%;
1420
- max-width: 560px;
1421
- margin: 0 auto;
1422
- padding: 16px 0px;
1423
- color: #404040;
1424
- }
1425
-
1426
- .apirocket-checkout-mobile-wrapper-cart {
1427
- display: inline-flex;
1428
- align-items: center;
1429
- color: #404040;
1430
- cursor: pointer;
1431
- }
1432
-
1433
- .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
1434
-
1435
- .apirocket-checkout-mobile-wrapper-total {
1436
- line-height: 20px;
1437
- font-size: 20px;
1438
- font-weight: bold;
1439
- }
1440
-
1441
- .apirocket-checkout-mobile-summary {
1442
- background-color: #f5f5f5;
1443
- transition-property: max-height;
1444
- transition-timing-function: ease-in;
1445
- transition-duration: 350ms;
1446
- max-height: 0px;
1447
- overflow: hidden;
1448
- border-bottom: 1px solid #d9d9d9;
1449
- }
1450
-
1451
- .apirocket-checkout-mobile-summary--show {
1452
- max-height: 1000px;
1453
- overflow: auto;
1454
- }
1455
-
1456
- .apirocket-checkout-mobile-summary-wrapper {
1457
- width: 90%;
1458
- max-width: 560px;
1459
- padding: 16px 0px;
1460
- margin: 0 auto;
1461
- }
1462
-
1463
-
1464
-
1465
- /* Utils */
1466
-
1467
- .apirocket-checkout-row {
1468
- display: flex;
1469
- justify-content: space-between;
1470
- align-items: flex-start;
1471
- }
1472
- .apirocket-checkout-row > * {
1473
- flex: 1 1;
1474
- margin-right: 16px;
1475
- }
1476
-
1477
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
1478
-
1479
- .apirocket-checkout-fieldset {
1480
- border: 1px solid #d9d9d9;
1481
- border-radius: 4px;
1482
- overflow: hidden;
1314
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
1315
+
1316
+ .apirocket-checkout-fieldset {
1317
+ border: 1px solid #d9d9d9;
1318
+ border-radius: 4px;
1319
+ overflow: hidden;
1483
1320
  }
1484
1321
 
1485
1322
  .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
@@ -1668,230 +1505,393 @@
1668
1505
  }
1669
1506
 
1670
1507
 
1671
-
1672
- .apirocket-button,
1673
- button.apirocket-button {
1674
- box-sizing: border-box !important;
1508
+ .apirocket-form-input {
1675
1509
  display: block;
1510
+ position: relative;
1511
+ margin-bottom: 16px;
1512
+ }
1513
+
1514
+ .apirocket-form-input input {
1515
+ all: unset;
1516
+ appearance: none;
1517
+ -moz-appearance: none;
1518
+ -webkit-appearance: none;
1519
+ outline: none;
1676
1520
  width: 100%;
1677
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1678
- margin: 0px;
1679
- border-radius: var(--cart-button-border-radius, 4px);
1680
- background-color: var(--cart-button-background-color, transparent);
1681
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
1682
- color: var(--cart-button-font-color, #737373);
1521
+ height: 46px;
1522
+ background: #fff;
1523
+ border-radius: 4px;
1524
+ border: 1px solid #D9D9D9;
1525
+ font-size: 14px;
1683
1526
  line-height: 1;
1684
- font-size: var(--cart-button-font-size, 16px);
1685
- font-weight: var(--cart-button-font-weight, normal);
1686
- text-align: center;
1687
- transition-property: color, border-color, background-color, box-shadow;
1688
- transition-timing-function: ease;
1689
- transition-duration: 350ms;
1690
- cursor: pointer;
1527
+ padding-left: 14px;
1528
+ padding-right: 14px;
1529
+ padding-top: 14px;
1530
+ padding-bottom: 14px;
1531
+ transition: all 0.3s ease;
1532
+ box-sizing: border-box;
1691
1533
  }
1692
1534
 
1693
- .apirocket-button:hover {
1694
- background-color: var(--cart-button-background-color-hover, transparent);
1695
- border-color: var(--cart-button-border-color-hover, #404040);
1696
- color: var(--cart-button-font-color-hover, #404040);
1535
+ .apirocket-form-input input:focus {
1536
+ border-color: #404040;
1537
+ box-shadow: 0 0 0 1px #404040;
1697
1538
  }
1698
1539
 
1699
- .apirocket-button:focus {
1700
- outline: none;
1701
- text-decoration: underline;
1540
+ .apirocket-form-input input:not(:placeholder-shown) {
1541
+ padding-top: 22px;
1542
+ padding-bottom: 6px;
1702
1543
  }
1703
- /*
1704
- .apirocket-button-loading {
1705
- position: relative;
1706
- } */
1707
1544
 
1708
- .apirocket-button-wraper {
1709
- position: relative;
1710
- display: inline-block;
1711
- width: 32px;
1545
+ .apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
1546
+
1547
+ .apirocket-form-input-placeholder {
1548
+ position: absolute;
1549
+ font-size: 12px;
1550
+ line-height: 1;
1551
+ color: #737373;
1552
+ transform: translateY(50%);
1553
+ opacity: 0;
1554
+ top: 8px;
1555
+ left: 15px;
1556
+ transition: all 0.3s ease;
1557
+ overflow: hidden;
1558
+ white-space: nowrap;
1559
+ text-overflow: ellipsis;
1712
1560
  }
1713
1561
 
1714
- .apirocket-button-spinner {
1562
+ .apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
1563
+ opacity: 1;
1564
+ transform: translateY(0%);
1565
+ }
1566
+
1567
+ .apirocket-form-input .apirocket-form-input-error-message {
1568
+ display: none;
1569
+ font-size: 14px;
1570
+ line-height: 1.2;
1571
+ margin-top: 4px;
1572
+ margin-left: 8px;
1573
+ color: #dc2626;
1574
+ }
1575
+
1576
+ .apirocket-form-input.invalid.touched input {
1577
+ border-color: #dc2626;
1578
+ box-shadow: 0 0 0 1px #dc2626;
1579
+ }
1580
+
1581
+ .apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
1582
+ .apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
1583
+
1584
+ .apirocket-form-input-button {
1715
1585
  position: absolute;
1716
- width: 22px;
1717
- height: 22px;
1718
- top: -11px;
1719
- left: 0;
1586
+ display: flex;
1587
+ justify-content: center;
1588
+ align-items: center;
1589
+ width: 46px;
1590
+ height: 46px;
1720
1591
  right: 0;
1721
- bottom: 0;
1722
- margin: auto;
1723
- border: 4px solid currentColor;
1724
- border-top-color: transparent !important;
1725
- border-radius: 50%;
1726
- animation: button-loading-spinner 1s ease infinite;
1592
+ top: 0;
1593
+ cursor: pointer;
1594
+ color: #a1a1aa;
1727
1595
  }
1728
1596
 
1729
- @keyframes button-loading-spinner {
1730
- from { transform: rotate(0turn) }
1731
- to { transform: rotate(1turn) }
1597
+ .apirocket-form-input-button:hover { color: #52525b; }
1598
+
1599
+ .apirocket-form-input-button + input {
1600
+ padding-right: 64px;
1732
1601
  }
1733
1602
 
1734
- .apirocket-button-link,
1735
- button.apirocket-button-link {
1603
+
1604
+ .apirocket-form-checkbox {
1736
1605
  display: flex;
1737
- align-items: center;
1738
- text-align: left;
1739
- justify-content: flex-start;
1740
- align-items: center;
1741
- border: none;
1742
- padding-left: 0;
1743
- padding-right: 0;
1744
- width: auto;
1606
+ align-items: flex-start;
1607
+ justify-content: start;
1608
+ position: relative;
1609
+ margin-bottom: 16px;
1610
+ }
1611
+
1612
+ .apirocket-form-checkbox-label {
1613
+ flex: 0 1 auto;
1614
+ display: block;
1615
+ font-size: 14px;
1616
+ line-height: 20px;
1617
+ font-weight: normal;
1618
+ color: #404040;
1619
+ cursor: pointer;
1620
+ }
1621
+
1622
+ .apirocket-form-checkbox-label small {
1623
+ display: block;
1624
+ color: #a3a3a3;
1625
+ font-size: 12px;
1626
+ }
1627
+
1628
+ .apirocket-form-checkbox input {
1629
+ all: unset;
1630
+ flex: 0 0 auto;
1631
+ appearance: none;
1632
+ -moz-appearance: none;
1633
+ -webkit-appearance: none;
1634
+ position: relative;
1635
+ box-sizing: border-box;
1636
+ display: inline-block;
1637
+ padding: 0;
1638
+ margin: 0;
1639
+ margin-right: 12px;
1640
+ width: 20px;
1641
+ height: 20px;
1642
+ vertical-align: middle;
1643
+ outline: none;
1644
+ border: 1px solid #d9d9d9;
1645
+ border-radius: 4px;
1646
+ cursor: pointer;
1647
+ transition: all 0.3s ease;
1745
1648
  overflow: hidden;
1746
- white-space: nowrap;
1747
- text-overflow: ellipsis;
1649
+ background-color: #fff;
1748
1650
  }
1749
1651
 
1750
- .apirocket-button-link span {
1751
- margin-left: 16px;
1752
- margin-right: 16px;
1652
+ .apirocket-form-checkbox input:focus {
1653
+ border-color: #404040;
1654
+ box-shadow: 0 0 0 1px #404040;
1655
+ }
1656
+
1657
+ .apirocket-form-checkbox input:checked {
1658
+ background-color: #404040;
1659
+ border-color: #404040;
1660
+ }
1661
+
1662
+ .apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
1663
+ .apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
1664
+
1665
+ .apirocket-form-checkbox input::after {
1666
+ display: block;
1667
+ position: absolute;
1668
+ width: 20px;
1669
+ height: 20px;
1670
+ content: "";
1671
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
1672
+ background-repeat: no-repeat;
1673
+ background-position: -1px -1px;
1674
+ transition: all 0.3s ease;
1675
+ transform: scale(0);
1676
+ }
1677
+
1678
+ .apirocket-form-checkbox input:checked::after {
1679
+ transform: scale(1);
1680
+ }
1681
+
1682
+ .apirocket-form-checkbox-error-message {
1683
+ display: none;
1684
+ position: absolute;
1685
+ left: 32px;
1686
+ bottom: -16px;
1687
+ font-size: 14px;
1688
+ line-height: 1.2;
1689
+ color: #dc2626;
1690
+ }
1691
+
1692
+ .apirocket-form-checkbox.invalid.touched input {
1693
+ border-color: #dc2626;
1694
+ box-shadow: 0 0 0 1px #dc2626;
1753
1695
  }
1754
1696
 
1755
- .apirocket-button-primary,
1756
- button.apirocket-button-primary {
1757
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
1758
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
1759
- color: var(--cart-button-primary-text-color, #fff);
1760
- }
1697
+ .apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
1761
1698
 
1762
- button.apirocket-button-primary:disabled {
1763
- background-color: #eee;
1764
- border-color: #eee;
1765
- color: #ccc;
1699
+ .apirocket-form-radio {
1700
+ display: flex;
1701
+ align-items: flex-start;
1702
+ justify-content: start;
1703
+ position: relative;
1704
+ margin-bottom: 16px;
1766
1705
  }
1767
1706
 
1768
- .apirocket-button-primary:hover {
1769
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1770
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1771
- color: var(--cart-button-primary-text-color-hover, #fff);
1772
- box-shadow: var(--cart-shadow-button-primary-hover, none);
1707
+ .apirocket-form-radio-label {
1708
+ position: relative;
1709
+ flex: 0 1 auto;
1710
+ display: inline-block;
1711
+ font-size: 14px;
1712
+ line-height: 20px;
1713
+ font-weight: normal;
1714
+ color: #404040;
1715
+ cursor: pointer;
1773
1716
  }
1774
1717
 
1718
+ .apirocket-form-radio-label small {
1719
+ display: block;
1720
+ color: #a3a3a3;
1721
+ font-size: 12px;
1722
+ }
1775
1723
 
1776
- @media (max-width: 720px) {
1724
+ .apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
1725
+ .apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
1777
1726
 
1778
- .apirocket-button-link {
1779
- width: 100%;
1780
- justify-content: center;
1781
- }
1727
+ .apirocket-form-radio input:disabled { background-color: #f5f5f5; }
1728
+ .apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
1782
1729
 
1730
+ .apirocket-form-radio-label img,
1731
+ .apirocket-form-radio-label svg {
1732
+ position: absolute;
1733
+ display: inline-block;
1734
+ height: 24px;
1735
+ min-height: 24px;
1736
+ top: -2px;
1783
1737
  }
1784
1738
 
1785
- .apirocket-summary {}
1739
+ .apirocket-form-radio input {
1740
+ flex: 0 0 auto;
1741
+ appearance: none;
1742
+ -moz-appearance: none;
1743
+ -webkit-appearance: none;
1744
+ position: relative;
1745
+ box-sizing: border-box;
1746
+ display: inline-block;
1747
+ padding: 0;
1748
+ margin: 0;
1749
+ margin-right: 12px;
1750
+ width: 20px;
1751
+ height: 20px;
1752
+ vertical-align: middle;
1753
+ outline: none;
1754
+ border: 1px solid #d9d9d9;
1755
+ border-radius: 20px;
1756
+ cursor: pointer;
1757
+ transition: all 0.3s ease;
1758
+ overflow: hidden;
1759
+ background-color: #fff;
1760
+ }
1786
1761
 
1787
- .apirocket-summary-top {
1788
- margin-top: 56px;
1789
- margin-bottom: 32px;
1762
+ .apirocket-form-radio input:focus {
1763
+ border-color: #404040;
1764
+ box-shadow: 0 0 0 1px #404040;
1790
1765
  }
1791
1766
 
1792
- .apirocket-summary-header {
1793
- display: flex;
1794
- justify-content: flex-start;
1795
- align-items: center;
1796
- margin-bottom: 32px;
1767
+ .apirocket-form-radio input:checked {
1768
+ background-color: #404040;
1769
+ border-color: #404040;
1797
1770
  }
1798
1771
 
1799
- .apirocket-summary-header-icon {
1800
- flex: 0 1;
1801
- margin-right: 16px;
1772
+ .apirocket-form-radio input::after {
1773
+ display: block;
1774
+ position: absolute;
1775
+ width: 20px;
1776
+ height: 20px;
1777
+ content: "";
1778
+ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
1779
+ background-repeat: no-repeat;
1780
+ background-position: 6px 6px;
1781
+ transition: all 0.4s ease;
1782
+ transform: scale(0);
1802
1783
  }
1803
1784
 
1804
- .apirocket-summary-header-content {}
1785
+ .apirocket-form-radio input:checked::after {
1786
+ transform: scale(1);
1787
+ }
1805
1788
 
1806
- .apirocket-summary-header-title {
1807
- font-size: 24px;
1808
- font-weight: bold;
1789
+ .apirocket-form-radio-error-message {
1790
+ display: none;
1791
+ position: absolute;
1792
+ left: 32px;
1793
+ bottom: -16px;
1794
+ font-size: 14px;
1809
1795
  line-height: 1.2;
1810
- color: #404040;
1811
- margin-bottom: 4px;
1796
+ color: #dc2626;
1812
1797
  }
1813
1798
 
1814
- .apirocket-summary-header-subtitle {
1815
- font-size: 18px;
1816
- font-weight: normal;
1817
- line-height: 1.2;
1818
- color: #737373;
1799
+ .apirocket-form-radio.invalid.touched input {
1800
+ border-color: #dc2626;
1801
+ box-shadow: 0 0 0 1px #dc2626;
1819
1802
  }
1820
1803
 
1821
- .apirocket-summary-section {
1822
- margin-top: 16px;
1823
- border: 1px solid #d9d9d9;
1824
- border-radius: 4px;
1825
- padding: 24px;
1804
+ .apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
1805
+
1806
+ .apirocket-form-select {
1807
+ display: block;
1808
+ position: relative;
1809
+ margin-bottom: 16px;
1826
1810
  }
1827
1811
 
1828
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1829
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1812
+ .apirocket-form-select select {
1813
+ all: unset;
1814
+ appearance: none;
1815
+ -moz-appearance: none;
1816
+ -webkit-appearance: none;
1817
+ outline: none;
1818
+ width: 100%;
1819
+ height: 46px;
1820
+ border-radius: 4px;
1821
+ border: 1px solid #D9D9D9;
1822
+ font-size: 14px;
1823
+ line-height: 16px;
1824
+ padding-left: 14px;
1825
+ padding-right: 50px;
1826
+ padding-top: 14px;
1827
+ padding-bottom: 14px;
1828
+ transition: all 0.3s ease;
1829
+ box-sizing: border-box;
1830
+ cursor: pointer;
1831
+ }
1830
1832
 
1831
- .apirocket-summary-section-title {
1832
- font-size: 18px;
1833
- font-weight: bold;
1834
- line-height: 1.2;
1835
- color: #404040;
1836
- margin-bottom: 24px;
1833
+ .apirocket-form-select select:focus {
1834
+ border-color: #404040;
1835
+ box-shadow: 0 0 0 1px #404040;
1837
1836
  }
1838
1837
 
1839
- .apirocket-summary-section-subtitle {
1840
- font-size: 16px;
1841
- font-weight: bold;
1842
- line-height: 1;
1843
- color: #404040;
1844
- margin-bottom: 16px;
1838
+ .apirocket-form-select select:not(:placeholder-shown) {
1839
+ padding-top: 22px;
1840
+ padding-bottom: 6px;
1845
1841
  }
1846
1842
 
1847
- .apirocket-summary-section-text {
1848
- font-size: 14px;
1849
- font-weight: normal;
1850
- line-height: 18px;
1851
- color: #404040;
1843
+ .apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
1844
+
1845
+ .apirocket-form-select::before {
1846
+ display: block;
1847
+ position: absolute;
1848
+ top: 8px;
1849
+ right: 0px;
1850
+ width: 40px;
1851
+ height: 30px;
1852
+ content: "";
1853
+ background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
1854
+ background-repeat: no-repeat;
1855
+ background-position: center;
1856
+ border-left: 1px solid #d9d9d9;
1857
+ pointer-events: none;
1852
1858
  }
1853
1859
 
1854
- .apirocket-summary-help {
1855
- display: flex;
1856
- justify-content: flex-start;
1857
- align-items: center;
1860
+ .apirocket-form-select-placeholder {
1861
+ position: absolute;
1862
+ font-size: 12px;
1863
+ line-height: 1;
1864
+ color: #737373;
1865
+ transform: translateY(50%);
1866
+ opacity: 0;
1867
+ top: 8px;
1868
+ left: 15px;
1869
+ transition: all 0.3s ease;
1870
+ overflow: hidden;
1871
+ white-space: nowrap;
1872
+ text-overflow: ellipsis;
1858
1873
  }
1859
1874
 
1860
- .apirocket-summary-help-icon {
1861
- flex: 0 1;
1862
- padding-right: 12px;
1875
+ .apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
1876
+ opacity: 1;
1877
+ transform: translateY(0%);
1863
1878
  }
1864
1879
 
1865
- .apirocket-summary-help-content {
1880
+ .apirocket-form-select .apirocket-form-select-error-message {
1881
+ display: none;
1866
1882
  font-size: 14px;
1867
- font-weight: normal;
1868
1883
  line-height: 1.2;
1869
- color: #404040;
1884
+ margin-top: 4px;
1885
+ margin-left: 8px;
1886
+ color: #dc2626;
1870
1887
  }
1871
1888
 
1872
- .apirocket-summary-help-content a {
1873
- display: block;
1874
- color: #737373;
1889
+ .apirocket-form-select.invalid.touched select {
1890
+ border-color: #dc2626;
1891
+ box-shadow: 0 0 0 1px #dc2626;
1875
1892
  }
1876
1893
 
1877
- @media (max-width: 1000px) {
1878
- .apirocket-summary-top { display: none; }
1879
- .apirocket-summary-header { margin-top: 32px; }
1880
- }
1894
+ .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
1895
+ .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1881
1896
 
1882
- @media (max-width: 720px) {
1883
- .apirocket-summary-section-subtitle { margin-top: 24px; }
1884
- .apirocket-summary-header {
1885
- flex-direction: column;
1886
- align-items: center;
1887
- text-align: center;
1888
- }
1889
- .apirocket-summary-header-icon {
1890
- margin-right: 0px;
1891
- margin-bottom: 16px;
1892
- }
1893
- .apirocket-summary-header-title {
1894
- font-size: 28px;
1895
- margin-bottom: 8px;
1896
- }
1897
- }.spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}
1897
+ .spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}