@layerfi/components 0.1.37 → 0.1.38

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.
@@ -8,7 +8,8 @@
8
8
  .Layer__select__menu-portal,
9
9
  .Layer__tooltip,
10
10
  .Layer__toasts-container,
11
- .Layer__drawer {
11
+ .Layer__drawer,
12
+ #Layer__datepicker__portal {
12
13
  --color-black: #1a1a1a;
13
14
  --color-white: white;
14
15
  --color-blue: hsl(217 100% 92%);
@@ -859,25 +860,50 @@
859
860
  .Layer__datetime__time {
860
861
  color: var(--color-base-600);
861
862
  }
862
- .Layer__datepicker__wrapper {
863
+ .Layer__datepicker__wrapper,
864
+ #Layer__datepicker__portal {
863
865
  display: inline-flex;
864
866
  align-items: center;
865
867
  max-height: 36px;
866
868
  border-radius: var(--input-border-radius);
867
869
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
868
870
  }
869
- .Layer__datepicker__wrapper:focus-within {
871
+ .Layer__datepicker__wrapper:focus-within,
872
+ #Layer__datepicker__portal:focus-within {
870
873
  box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
871
874
  outline: none;
872
875
  }
873
- .Layer__datepicker__wrapper .Layer__datepicker__current-button {
876
+ .Layer__datepicker__wrapper.Layer__datepicker__wrapper--arrows .react-datepicker__input-container input,
877
+ #Layer__datepicker__portal.Layer__datepicker__wrapper--arrows .react-datepicker__input-container input {
878
+ border-top-right-radius: 0;
879
+ border-bottom-right-radius: 0;
880
+ }
881
+ .Layer__datepicker__wrapper .Layer__datepicker__next-button,
882
+ #Layer__datepicker__portal .Layer__datepicker__next-button {
883
+ border-top-left-radius: 0;
884
+ border-bottom-left-radius: 0;
885
+ padding: 0 var(--spacing-xs);
886
+ box-shadow: none;
887
+ border-left: 1px solid var(--input-border-color);
888
+ }
889
+ .Layer__datepicker__wrapper .Layer__datepicker__prev-button,
890
+ #Layer__datepicker__portal .Layer__datepicker__prev-button {
891
+ border-radius: 0;
892
+ padding: 0 var(--spacing-xs);
893
+ box-shadow: none;
894
+ border-left: 1px solid var(--input-border-color);
895
+ }
896
+ .Layer__datepicker__wrapper .Layer__datepicker__current-button,
897
+ #Layer__datepicker__portal .Layer__datepicker__current-button {
874
898
  border-top-left-radius: 0;
875
899
  border-bottom-left-radius: 0;
876
900
  box-shadow: none;
877
901
  border-left: 1px solid var(--input-border-color);
878
902
  }
879
- .Layer__datepicker__wrapper .Layer__datepicker input,
880
- .Layer__datepicker__wrapper .Layer__datepicker button {
903
+ .Layer__datepicker__wrapper .react-datepicker__input-container input,
904
+ .Layer__datepicker__wrapper .react-datepicker__input-container button,
905
+ #Layer__datepicker__portal .react-datepicker__input-container input,
906
+ #Layer__datepicker__portal .react-datepicker__input-container button {
881
907
  border-radius: var(--input-border-radius);
882
908
  padding: 8px;
883
909
  box-sizing: border-box;
@@ -889,37 +915,54 @@
889
915
  font-size: var(--input-font-size);
890
916
  line-height: 140%;
891
917
  }
892
- .Layer__datepicker__wrapper .Layer__datepicker input:focus,
893
- .Layer__datepicker__wrapper .Layer__datepicker input:active,
894
- .Layer__datepicker__wrapper .Layer__datepicker input:focus-visible,
895
- .Layer__datepicker__wrapper .Layer__datepicker button:focus,
896
- .Layer__datepicker__wrapper .Layer__datepicker button:active,
897
- .Layer__datepicker__wrapper .Layer__datepicker button:focus-visible {
918
+ .Layer__datepicker__wrapper .react-datepicker__input-container input:focus,
919
+ .Layer__datepicker__wrapper .react-datepicker__input-container input:active,
920
+ .Layer__datepicker__wrapper .react-datepicker__input-container input:focus-visible,
921
+ .Layer__datepicker__wrapper .react-datepicker__input-container button:focus,
922
+ .Layer__datepicker__wrapper .react-datepicker__input-container button:active,
923
+ .Layer__datepicker__wrapper .react-datepicker__input-container button:focus-visible,
924
+ #Layer__datepicker__portal .react-datepicker__input-container input:focus,
925
+ #Layer__datepicker__portal .react-datepicker__input-container input:active,
926
+ #Layer__datepicker__portal .react-datepicker__input-container input:focus-visible,
927
+ #Layer__datepicker__portal .react-datepicker__input-container button:focus,
928
+ #Layer__datepicker__portal .react-datepicker__input-container button:active,
929
+ #Layer__datepicker__portal .react-datepicker__input-container button:focus-visible {
898
930
  box-shadow: none;
899
931
  outline: none;
900
932
  }
901
- .Layer__datepicker__wrapper .Layer__datepicker__popper {
933
+ .Layer__datepicker__wrapper .Layer__datepicker__popper,
934
+ #Layer__datepicker__portal .Layer__datepicker__popper {
902
935
  min-width: 275px;
903
936
  max-width: 275px;
904
937
  z-index: 99;
905
938
  border-radius: 8px;
906
939
  }
907
- .Layer__datepicker__wrapper .Layer__datepicker__popper * {
940
+ .Layer__datepicker__wrapper .Layer__datepicker__popper.Layer__datepicker__time__popper,
941
+ #Layer__datepicker__portal .Layer__datepicker__popper.Layer__datepicker__time__popper {
942
+ min-width: auto;
943
+ }
944
+ .Layer__datepicker__wrapper .Layer__datepicker__popper *,
945
+ #Layer__datepicker__portal .Layer__datepicker__popper * {
908
946
  outline-color: var(--color-base-800);
909
947
  }
910
- .Layer__datepicker__wrapper .Layer__datepicker__popper .react-datepicker__triangle {
948
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .react-datepicker__triangle,
949
+ #Layer__datepicker__portal .Layer__datepicker__popper .react-datepicker__triangle {
911
950
  display: none;
912
951
  }
913
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar {
952
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar,
953
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar {
914
954
  border: none;
915
955
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
916
956
  }
917
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
957
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous,
958
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
918
959
  left: auto;
919
960
  right: 42px;
920
961
  }
921
962
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
922
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
963
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before,
964
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
965
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
923
966
  border-color: var(--color-base-800);
924
967
  border-style: solid;
925
968
  border-width: 1px 1px 0 0;
@@ -930,16 +973,19 @@
930
973
  top: 11px;
931
974
  width: 6px;
932
975
  }
933
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
976
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container,
977
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
934
978
  min-width: 275px;
935
979
  max-width: 275px;
936
980
  }
937
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
981
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
982
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
938
983
  padding: var(--spacing-sm) 0 0;
939
984
  background: white;
940
985
  border: none;
941
986
  }
942
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header {
987
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
988
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header {
943
989
  padding: var(--spacing-sm);
944
990
  text-align: left;
945
991
  font-weight: 460;
@@ -952,7 +998,8 @@
952
998
  font-size: 14px;
953
999
  border-bottom: 1px solid var(--color-base-200);
954
1000
  }
955
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
1001
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
1002
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
956
1003
  padding: 0 var(--spacing-md) var(--spacing-sm);
957
1004
  text-align: left;
958
1005
  font-weight: 460;
@@ -965,17 +1012,22 @@
965
1012
  font-size: 14px;
966
1013
  border-bottom: 1px solid var(--color-base-200);
967
1014
  }
968
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
1015
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names,
1016
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
969
1017
  padding: var(--spacing-xs) var(--spacing-xs) 0;
970
1018
  }
971
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
1019
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name,
1020
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
972
1021
  width: 32px;
973
1022
  height: 32px;
974
1023
  color: var(--color-base-500);
975
1024
  font-size: 12px;
1025
+ line-height: 1.7rem;
976
1026
  }
977
1027
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
978
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper {
1028
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper,
1029
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
1030
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper {
979
1031
  display: flex;
980
1032
  align-items: center;
981
1033
  justify-content: center;
@@ -983,7 +1035,11 @@
983
1035
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
984
1036
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
985
1037
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day,
986
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1038
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text,
1039
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1040
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1041
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day,
1042
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
987
1043
  display: flex;
988
1044
  align-items: center;
989
1045
  justify-content: center;
@@ -992,14 +1048,22 @@
992
1048
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover,
993
1049
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text:hover,
994
1050
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day:hover,
995
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text:hover {
1051
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text:hover,
1052
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover,
1053
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text:hover,
1054
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day:hover,
1055
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text:hover {
996
1056
  background-color: var(--color-base-400);
997
1057
  color: var(--color-base-800);
998
1058
  }
999
1059
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month,
1000
1060
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--outside-month,
1001
1061
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--outside-month,
1002
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--outside-month {
1062
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--outside-month,
1063
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month,
1064
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--outside-month,
1065
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--outside-month,
1066
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--outside-month {
1003
1067
  color: var(--color-base-500);
1004
1068
  }
1005
1069
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled,
@@ -1009,7 +1073,15 @@
1009
1073
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--disabled,
1010
1074
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--disabled,
1011
1075
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--disabled,
1012
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--disabled {
1076
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--disabled,
1077
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled,
1078
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--disabled,
1079
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--disabled,
1080
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--disabled,
1081
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--disabled,
1082
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--disabled,
1083
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--disabled,
1084
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--disabled {
1013
1085
  color: var(--color-base-300);
1014
1086
  cursor: not-allowed;
1015
1087
  }
@@ -1020,7 +1092,15 @@
1020
1092
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--keyboard-selected,
1021
1093
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
1022
1094
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
1023
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected {
1095
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
1096
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
1097
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
1098
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
1099
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
1100
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--keyboard-selected,
1101
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
1102
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
1103
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected {
1024
1104
  background-color: var(--color-base-0);
1025
1105
  color: var(--color-base-800);
1026
1106
  border-color: var(--color-base-800);
@@ -1033,7 +1113,15 @@
1033
1113
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--selected,
1034
1114
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--selected,
1035
1115
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--selected,
1036
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--selected {
1116
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--selected,
1117
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected,
1118
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--selected,
1119
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--selected,
1120
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--selected,
1121
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--selected,
1122
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--selected,
1123
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--selected,
1124
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--selected {
1037
1125
  background-color: var(--color-base-800);
1038
1126
  color: var(--color-base-100);
1039
1127
  font-weight: 460;
@@ -1053,7 +1141,23 @@
1053
1141
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-range,
1054
1142
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-range,
1055
1143
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1056
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-selecting-range {
1144
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-selecting-range,
1145
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
1146
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-range,
1147
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
1148
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
1149
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-range,
1150
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-range,
1151
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1152
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-selecting-range,
1153
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-range,
1154
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-range,
1155
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
1156
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-selecting-range,
1157
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-range,
1158
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-range,
1159
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1160
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-selecting-range {
1057
1161
  background-color: var(--color-base-200);
1058
1162
  color: var(--color-base-800);
1059
1163
  }
@@ -1072,26 +1176,48 @@
1072
1176
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-start,
1073
1177
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-start,
1074
1178
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-end,
1075
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-end {
1179
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-end,
1180
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-start,
1181
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-start,
1182
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-end,
1183
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-end,
1184
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-start,
1185
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-start,
1186
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-end,
1187
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-end,
1188
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-start,
1189
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-start,
1190
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-end,
1191
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-end,
1192
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-start,
1193
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-start,
1194
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-end,
1195
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-end {
1076
1196
  background-color: var(--color-base-800);
1077
1197
  color: var(--color-base-100);
1078
1198
  }
1079
1199
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1080
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day {
1200
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day,
1201
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1202
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day {
1081
1203
  width: 32px;
1082
1204
  height: 32px;
1083
1205
  }
1084
1206
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1085
- .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1207
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text,
1208
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1209
+ #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1086
1210
  width: 100%;
1087
1211
  height: 32px;
1088
1212
  }
1089
- .Layer__datepicker__wrapper .react-datepicker__children-container {
1213
+ .Layer__datepicker__wrapper .react-datepicker__children-container,
1214
+ #Layer__datepicker__portal .react-datepicker__children-container {
1090
1215
  width: 100%;
1091
1216
  margin: 0;
1092
1217
  padding: 0;
1093
1218
  }
1094
- .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer {
1219
+ .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer,
1220
+ #Layer__datepicker__portal .Layer__datepicker__popper__custom-footer {
1095
1221
  display: flex;
1096
1222
  flex-direction: column;
1097
1223
  justify-content: flex-start;
@@ -1099,38 +1225,50 @@
1099
1225
  padding: var(--spacing-md) var(--spacing-xs);
1100
1226
  border-top: 1px solid var(--color-base-200);
1101
1227
  }
1102
- .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1228
+ .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn,
1229
+ #Layer__datepicker__portal .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1103
1230
  padding: var(--spacing-xs) var(--spacing-xs);
1104
1231
  color: var(--color-base-800);
1105
1232
  font-weight: 460;
1106
1233
  text-decoration: none;
1107
1234
  }
1108
- .Layer__datepicker__wrapper .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1235
+ .Layer__datepicker__wrapper .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
1236
+ #Layer__datepicker__portal .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1109
1237
  background-color: var(--color-base-800);
1110
1238
  color: var(--color-base-100);
1111
1239
  font-weight: 460;
1112
1240
  }
1113
- .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
1241
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item,
1242
+ #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
1114
1243
  display: flex;
1115
1244
  align-items: center;
1116
1245
  justify-content: center;
1117
1246
  transition: all 0.2s ease-in-out;
1118
1247
  }
1119
- .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
1248
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover,
1249
+ #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
1120
1250
  background-color: var(--color-base-400);
1121
1251
  color: var(--color-base-800);
1122
1252
  }
1123
- .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
1253
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected,
1254
+ #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
1124
1255
  background-color: var(--color-base-800);
1125
1256
  color: var(--color-base-100);
1126
1257
  font-weight: 460;
1127
1258
  }
1128
- .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
1259
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header,
1260
+ #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
1129
1261
  padding: var(--spacing-sm) 0 0;
1130
1262
  background: white;
1131
1263
  border: none;
1132
1264
  }
1133
- .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
1265
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only,
1266
+ #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only {
1267
+ padding: 0;
1268
+ }
1269
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header,
1270
+ #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
1271
+ display: none;
1134
1272
  padding: 0 var(--spacing-md) var(--spacing-sm);
1135
1273
  text-align: left;
1136
1274
  font-weight: 460;
@@ -1160,6 +1298,297 @@
1160
1298
  min-width: auto;
1161
1299
  max-width: auto;
1162
1300
  }
1301
+ @media screen and (max-width: 760px) {
1302
+ .Layer__datepicker__wrapper .Layer__datepicker__current-button {
1303
+ display: none;
1304
+ }
1305
+ .Layer__datepicker__wrapper.Layer__datepicker__wrapper--arrows {
1306
+ box-shadow: none;
1307
+ }
1308
+ .Layer__datepicker__wrapper.Layer__datepicker__wrapper--arrows .react-datepicker__input-container input {
1309
+ box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
1310
+ border-radius: 8px;
1311
+ margin-right: 8px;
1312
+ max-width: 90px;
1313
+ border-top-right-radius: 8px;
1314
+ border-bottom-right-radius: 8px;
1315
+ }
1316
+ .Layer__datepicker__wrapper .Layer__datepicker__next-button {
1317
+ border-radius: 8px;
1318
+ padding: 0 var(--spacing-xs);
1319
+ border: none;
1320
+ margin-left: 8px;
1321
+ box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
1322
+ }
1323
+ .Layer__datepicker__wrapper .Layer__datepicker__prev-button {
1324
+ border-radius: 8px;
1325
+ padding: 0 var(--spacing-xs);
1326
+ border: none;
1327
+ box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
1328
+ }
1329
+ #Layer__datepicker__portal.Layer__datepicker__portal--opened .react-datepicker__portal {
1330
+ background-color: rgba(36, 36, 36, 0.4);
1331
+ }
1332
+ #Layer__datepicker__portal.Layer__datepicker__portal--opened .react-datepicker__portal .Layer__datepicker__calendar {
1333
+ bottom: 0;
1334
+ }
1335
+ #Layer__datepicker__portal.Layer__datepicker__portal--closed .react-datepicker__portal .Layer__datepicker__calendar {
1336
+ bottom: -100%;
1337
+ }
1338
+ #Layer__datepicker__portal .react-datepicker__portal {
1339
+ align-items: flex-end;
1340
+ z-index: 99;
1341
+ background-color: rgba(36, 36, 36, 0);
1342
+ transition: all 180ms ease-in-out;
1343
+ }
1344
+ #Layer__datepicker__portal .react-datepicker__portal * {
1345
+ outline-color: var(--color-base-800);
1346
+ }
1347
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
1348
+ border-radius: var(--spacing-md);
1349
+ overflow: clip;
1350
+ }
1351
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container {
1352
+ width: 100%;
1353
+ }
1354
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-box {
1355
+ display: flex;
1356
+ align-items: center;
1357
+ justify-content: center;
1358
+ width: 100%;
1359
+ }
1360
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list {
1361
+ display: flex;
1362
+ flex-wrap: wrap;
1363
+ justify-content: space-between;
1364
+ gap: var(--spacing-2xs);
1365
+ padding: var(--spacing-md) var(--spacing-xs);
1366
+ width: 100%;
1367
+ border-radius: var(--spacing-md);
1368
+ }
1369
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list .react-datepicker__time-list-item {
1370
+ width: 100%;
1371
+ border-radius: 0.3rem;
1372
+ font-size: 15px;
1373
+ word-spacing: 8px;
1374
+ }
1375
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__header {
1376
+ border-radius: var(--spacing-md) var(--spacing-md) 0 0;
1377
+ }
1378
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__triangle {
1379
+ display: none;
1380
+ }
1381
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
1382
+ transition: bottom 0.2s ease-in-out;
1383
+ position: relative;
1384
+ bottom: -100px;
1385
+ margin: 0 var(--spacing-md) 32px var(--spacing-md);
1386
+ width: 100%;
1387
+ max-width: 414px;
1388
+ border: none;
1389
+ border-radius: var(--spacing-md);
1390
+ box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
1391
+ }
1392
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous {
1393
+ left: auto;
1394
+ right: 42px;
1395
+ }
1396
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
1397
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
1398
+ border-color: var(--color-base-800);
1399
+ border-style: solid;
1400
+ border-width: 1px 1px 0 0;
1401
+ content: "";
1402
+ display: block;
1403
+ height: 6px;
1404
+ position: absolute;
1405
+ top: 11px;
1406
+ width: 6px;
1407
+ }
1408
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container {
1409
+ min-width: 275px;
1410
+ width: 100%;
1411
+ max-width: 100%;
1412
+ }
1413
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
1414
+ padding: var(--spacing-sm) 0 0;
1415
+ background: white;
1416
+ border: none;
1417
+ }
1418
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header {
1419
+ padding: var(--spacing-sm);
1420
+ text-align: left;
1421
+ font-weight: 460;
1422
+ font-family: var(--font-family);
1423
+ border-radius: var(--spacing-md) var(--spacing-md) 0 0;
1424
+ font-feature-settings:
1425
+ "cv10" on,
1426
+ "cv05" on,
1427
+ "cv08" on,
1428
+ "ss03" on;
1429
+ font-size: 14px;
1430
+ border-bottom: 1px solid var(--color-base-200);
1431
+ }
1432
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
1433
+ padding: 0 var(--spacing-md) var(--spacing-sm);
1434
+ text-align: left;
1435
+ font-weight: 460;
1436
+ font-family: var(--font-family);
1437
+ font-feature-settings:
1438
+ "cv10" on,
1439
+ "cv05" on,
1440
+ "cv08" on,
1441
+ "ss03" on;
1442
+ font-size: 14px;
1443
+ border-bottom: 1px solid var(--color-base-200);
1444
+ }
1445
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names {
1446
+ display: flex;
1447
+ justify-content: space-between;
1448
+ align-items: center;
1449
+ padding: var(--spacing-xs) var(--spacing-xs) 0;
1450
+ }
1451
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
1452
+ width: 100%;
1453
+ height: 32px;
1454
+ color: var(--color-base-500);
1455
+ font-size: 12px;
1456
+ line-height: 1.7rem;
1457
+ }
1458
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month {
1459
+ padding: var(--spacing-xs) 0;
1460
+ }
1461
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
1462
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper {
1463
+ display: flex;
1464
+ align-items: center;
1465
+ justify-content: space-between;
1466
+ }
1467
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1468
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1469
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day,
1470
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1471
+ display: flex;
1472
+ align-items: center;
1473
+ justify-content: center;
1474
+ transition: all 0.2s ease-in-out;
1475
+ }
1476
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover,
1477
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text:hover,
1478
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day:hover,
1479
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text:hover {
1480
+ background-color: var(--color-base-400);
1481
+ color: var(--color-base-800);
1482
+ }
1483
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month,
1484
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--outside-month,
1485
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--outside-month,
1486
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--outside-month {
1487
+ color: var(--color-base-500);
1488
+ }
1489
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled,
1490
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--disabled,
1491
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--disabled,
1492
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--disabled,
1493
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--disabled,
1494
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--disabled,
1495
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--disabled,
1496
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--disabled {
1497
+ color: var(--color-base-300);
1498
+ cursor: not-allowed;
1499
+ }
1500
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
1501
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
1502
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
1503
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
1504
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--keyboard-selected,
1505
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
1506
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
1507
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected {
1508
+ background-color: var(--color-base-400);
1509
+ color: var(--color-base-800);
1510
+ border-color: var(--color-base-800);
1511
+ outline-color: var(--color-base-800);
1512
+ }
1513
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected,
1514
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--selected,
1515
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--selected,
1516
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--selected,
1517
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--selected,
1518
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--selected,
1519
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--selected,
1520
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--selected {
1521
+ background-color: var(--color-base-800);
1522
+ color: var(--color-base-100);
1523
+ font-weight: 460;
1524
+ }
1525
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
1526
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-range,
1527
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
1528
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
1529
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-range,
1530
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-range,
1531
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1532
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-selecting-range,
1533
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-range,
1534
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-range,
1535
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
1536
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-selecting-range,
1537
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-range,
1538
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-range,
1539
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1540
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-selecting-range {
1541
+ background-color: var(--color-base-200);
1542
+ color: var(--color-base-800);
1543
+ }
1544
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-start,
1545
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-start,
1546
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-end,
1547
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-end,
1548
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-start,
1549
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-start,
1550
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-end,
1551
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-end,
1552
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-start,
1553
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-start,
1554
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-end,
1555
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-end,
1556
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-start,
1557
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-start,
1558
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-end,
1559
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-end {
1560
+ background-color: var(--color-base-800);
1561
+ color: var(--color-base-100);
1562
+ }
1563
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1564
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day {
1565
+ width: 100%;
1566
+ height: 32px;
1567
+ }
1568
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1569
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1570
+ width: 100%;
1571
+ height: 32px;
1572
+ }
1573
+ }
1574
+ @media screen and (max-width: 500px) {
1575
+ #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
1576
+ margin: 0;
1577
+ border-radius: var(--spacing-md) var(--spacing-md) 0 0;
1578
+ }
1579
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
1580
+ border-top-left-radius: var(--spacing-md);
1581
+ border-top-right-radius: var(--spacing-md);
1582
+ border-bottom-left-radius: 0;
1583
+ border-bottom-right-radius: 0;
1584
+ }
1585
+ #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list {
1586
+ border-top-left-radius: var(--spacing-md);
1587
+ border-top-right-radius: var(--spacing-md);
1588
+ border-bottom-left-radius: 0;
1589
+ border-bottom-right-radius: 0;
1590
+ }
1591
+ }
1163
1592
  .Layer__details-list {
1164
1593
  display: flex;
1165
1594
  flex-direction: column;
@@ -2461,6 +2890,7 @@ tbody .Layer__table__empty-row:first-child {
2461
2890
  align-items: center;
2462
2891
  justify-content: space-between;
2463
2892
  width: 100%;
2893
+ max-width: 1406px;
2464
2894
  }
2465
2895
  .Layer__view .Layer__view-header__controls {
2466
2896
  display: flex;
@@ -2736,7 +3166,8 @@ tbody .Layer__table__empty-row:first-child {
2736
3166
  .Layer__bank-transactions {
2737
3167
  max-width: var(--max-component-width);
2738
3168
  }
2739
- .Layer__bank-transactions.Layer__component {
3169
+ .Layer__bank-transactions .Layer__bank-transactions__table-wrapper {
3170
+ max-width: var(--max-component-width);
2740
3171
  overflow: auto;
2741
3172
  }
2742
3173
  .Layer__bank-transactions__loader-container {