@layerfi/components 0.1.36 → 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,9 +8,11 @@
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;
15
+ --color-blue: hsl(217 100% 92%);
14
16
  --color-info-success: hsl(145, 45%, 42%);
15
17
  --color-info-success-bg: hsl(145, 59%, 86%);
16
18
  --color-info-success-fg: hsl(145, 63%, 29%);
@@ -858,25 +860,50 @@
858
860
  .Layer__datetime__time {
859
861
  color: var(--color-base-600);
860
862
  }
861
- .Layer__datepicker__wrapper {
863
+ .Layer__datepicker__wrapper,
864
+ #Layer__datepicker__portal {
862
865
  display: inline-flex;
863
866
  align-items: center;
864
867
  max-height: 36px;
865
868
  border-radius: var(--input-border-radius);
866
869
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
867
870
  }
868
- .Layer__datepicker__wrapper:focus-within {
871
+ .Layer__datepicker__wrapper:focus-within,
872
+ #Layer__datepicker__portal:focus-within {
869
873
  box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
870
874
  outline: none;
871
875
  }
872
- .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 {
873
883
  border-top-left-radius: 0;
874
884
  border-bottom-left-radius: 0;
885
+ padding: 0 var(--spacing-xs);
875
886
  box-shadow: none;
876
887
  border-left: 1px solid var(--input-border-color);
877
888
  }
878
- .Layer__datepicker__wrapper .Layer__datepicker input,
879
- .Layer__datepicker__wrapper .Layer__datepicker button {
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 {
898
+ border-top-left-radius: 0;
899
+ border-bottom-left-radius: 0;
900
+ box-shadow: none;
901
+ border-left: 1px solid var(--input-border-color);
902
+ }
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 {
880
907
  border-radius: var(--input-border-radius);
881
908
  padding: 8px;
882
909
  box-sizing: border-box;
@@ -888,37 +915,54 @@
888
915
  font-size: var(--input-font-size);
889
916
  line-height: 140%;
890
917
  }
891
- .Layer__datepicker__wrapper .Layer__datepicker input:focus,
892
- .Layer__datepicker__wrapper .Layer__datepicker input:active,
893
- .Layer__datepicker__wrapper .Layer__datepicker input:focus-visible,
894
- .Layer__datepicker__wrapper .Layer__datepicker button:focus,
895
- .Layer__datepicker__wrapper .Layer__datepicker button:active,
896
- .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 {
897
930
  box-shadow: none;
898
931
  outline: none;
899
932
  }
900
- .Layer__datepicker__wrapper .Layer__datepicker__popper {
933
+ .Layer__datepicker__wrapper .Layer__datepicker__popper,
934
+ #Layer__datepicker__portal .Layer__datepicker__popper {
901
935
  min-width: 275px;
902
936
  max-width: 275px;
903
937
  z-index: 99;
904
938
  border-radius: 8px;
905
939
  }
906
- .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 * {
907
946
  outline-color: var(--color-base-800);
908
947
  }
909
- .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 {
910
950
  display: none;
911
951
  }
912
- .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 {
913
954
  border: none;
914
955
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
915
956
  }
916
- .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 {
917
959
  left: auto;
918
960
  right: 42px;
919
961
  }
920
962
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
921
- .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 {
922
966
  border-color: var(--color-base-800);
923
967
  border-style: solid;
924
968
  border-width: 1px 1px 0 0;
@@ -929,16 +973,19 @@
929
973
  top: 11px;
930
974
  width: 6px;
931
975
  }
932
- .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 {
933
978
  min-width: 275px;
934
979
  max-width: 275px;
935
980
  }
936
- .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 {
937
983
  padding: var(--spacing-sm) 0 0;
938
984
  background: white;
939
985
  border: none;
940
986
  }
941
- .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 {
942
989
  padding: var(--spacing-sm);
943
990
  text-align: left;
944
991
  font-weight: 460;
@@ -951,7 +998,8 @@
951
998
  font-size: 14px;
952
999
  border-bottom: 1px solid var(--color-base-200);
953
1000
  }
954
- .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 {
955
1003
  padding: 0 var(--spacing-md) var(--spacing-sm);
956
1004
  text-align: left;
957
1005
  font-weight: 460;
@@ -964,17 +1012,22 @@
964
1012
  font-size: 14px;
965
1013
  border-bottom: 1px solid var(--color-base-200);
966
1014
  }
967
- .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 {
968
1017
  padding: var(--spacing-xs) var(--spacing-xs) 0;
969
1018
  }
970
- .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 {
971
1021
  width: 32px;
972
1022
  height: 32px;
973
1023
  color: var(--color-base-500);
974
1024
  font-size: 12px;
1025
+ line-height: 1.7rem;
975
1026
  }
976
1027
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
977
- .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 {
978
1031
  display: flex;
979
1032
  align-items: center;
980
1033
  justify-content: center;
@@ -982,7 +1035,11 @@
982
1035
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
983
1036
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
984
1037
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day,
985
- .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 {
986
1043
  display: flex;
987
1044
  align-items: center;
988
1045
  justify-content: center;
@@ -991,14 +1048,22 @@
991
1048
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover,
992
1049
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text:hover,
993
1050
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day:hover,
994
- .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 {
995
1056
  background-color: var(--color-base-400);
996
1057
  color: var(--color-base-800);
997
1058
  }
998
1059
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month,
999
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,
1000
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,
1001
- .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 {
1002
1067
  color: var(--color-base-500);
1003
1068
  }
1004
1069
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled,
@@ -1008,7 +1073,15 @@
1008
1073
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--disabled,
1009
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,
1010
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,
1011
- .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 {
1012
1085
  color: var(--color-base-300);
1013
1086
  cursor: not-allowed;
1014
1087
  }
@@ -1019,8 +1092,16 @@
1019
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,
1020
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,
1021
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,
1022
- .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 {
1023
- background-color: var(--color-base-400);
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 {
1104
+ background-color: var(--color-base-0);
1024
1105
  color: var(--color-base-800);
1025
1106
  border-color: var(--color-base-800);
1026
1107
  outline-color: var(--color-base-800);
@@ -1032,7 +1113,15 @@
1032
1113
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--selected,
1033
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,
1034
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,
1035
- .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 {
1036
1125
  background-color: var(--color-base-800);
1037
1126
  color: var(--color-base-100);
1038
1127
  font-weight: 460;
@@ -1052,7 +1141,23 @@
1052
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,
1053
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,
1054
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,
1055
- .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 {
1056
1161
  background-color: var(--color-base-200);
1057
1162
  color: var(--color-base-800);
1058
1163
  }
@@ -1071,26 +1176,48 @@
1071
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,
1072
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,
1073
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,
1074
- .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 {
1075
1196
  background-color: var(--color-base-800);
1076
1197
  color: var(--color-base-100);
1077
1198
  }
1078
1199
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1079
- .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 {
1080
1203
  width: 32px;
1081
1204
  height: 32px;
1082
1205
  }
1083
1206
  .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1084
- .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 {
1085
1210
  width: 100%;
1086
1211
  height: 32px;
1087
1212
  }
1088
- .Layer__datepicker__wrapper .react-datepicker__children-container {
1213
+ .Layer__datepicker__wrapper .react-datepicker__children-container,
1214
+ #Layer__datepicker__portal .react-datepicker__children-container {
1089
1215
  width: 100%;
1090
1216
  margin: 0;
1091
1217
  padding: 0;
1092
1218
  }
1093
- .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 {
1094
1221
  display: flex;
1095
1222
  flex-direction: column;
1096
1223
  justify-content: flex-start;
@@ -1098,38 +1225,50 @@
1098
1225
  padding: var(--spacing-md) var(--spacing-xs);
1099
1226
  border-top: 1px solid var(--color-base-200);
1100
1227
  }
1101
- .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 {
1102
1230
  padding: var(--spacing-xs) var(--spacing-xs);
1103
1231
  color: var(--color-base-800);
1104
1232
  font-weight: 460;
1105
1233
  text-decoration: none;
1106
1234
  }
1107
- .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 {
1108
1237
  background-color: var(--color-base-800);
1109
1238
  color: var(--color-base-100);
1110
1239
  font-weight: 460;
1111
1240
  }
1112
- .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 {
1113
1243
  display: flex;
1114
1244
  align-items: center;
1115
1245
  justify-content: center;
1116
1246
  transition: all 0.2s ease-in-out;
1117
1247
  }
1118
- .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 {
1119
1250
  background-color: var(--color-base-400);
1120
1251
  color: var(--color-base-800);
1121
1252
  }
1122
- .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 {
1123
1255
  background-color: var(--color-base-800);
1124
1256
  color: var(--color-base-100);
1125
1257
  font-weight: 460;
1126
1258
  }
1127
- .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 {
1128
1261
  padding: var(--spacing-sm) 0 0;
1129
1262
  background: white;
1130
1263
  border: none;
1131
1264
  }
1132
- .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;
1133
1272
  padding: 0 var(--spacing-md) var(--spacing-sm);
1134
1273
  text-align: left;
1135
1274
  font-weight: 460;
@@ -1159,6 +1298,297 @@
1159
1298
  min-width: auto;
1160
1299
  max-width: auto;
1161
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
+ }
1162
1592
  .Layer__details-list {
1163
1593
  display: flex;
1164
1594
  flex-direction: column;
@@ -2460,6 +2890,7 @@ tbody .Layer__table__empty-row:first-child {
2460
2890
  align-items: center;
2461
2891
  justify-content: space-between;
2462
2892
  width: 100%;
2893
+ max-width: 1406px;
2463
2894
  }
2464
2895
  .Layer__view .Layer__view-header__controls {
2465
2896
  display: flex;
@@ -2735,7 +3166,8 @@ tbody .Layer__table__empty-row:first-child {
2735
3166
  .Layer__bank-transactions {
2736
3167
  max-width: var(--max-component-width);
2737
3168
  }
2738
- .Layer__bank-transactions.Layer__component {
3169
+ .Layer__bank-transactions .Layer__bank-transactions__table-wrapper {
3170
+ max-width: var(--max-component-width);
2739
3171
  overflow: auto;
2740
3172
  }
2741
3173
  .Layer__bank-transactions__loader-container {
@@ -2769,7 +3201,6 @@ tbody .Layer__table__empty-row:first-child {
2769
3201
  padding-left: var(--spacing-3xs);
2770
3202
  }
2771
3203
  .Layer__bank-transaction-row {
2772
- top: 1px;
2773
3204
  transition: all var(--transition-speed) ease-in-out;
2774
3205
  opacity: 0.3;
2775
3206
  }
@@ -2781,9 +3212,6 @@ tbody .Layer__table__empty-row:first-child {
2781
3212
  transform: scale(1);
2782
3213
  opacity: 1;
2783
3214
  }
2784
- .Layer__bank-transaction-row.Layer__bank-transaction-row--removing {
2785
- top: 0;
2786
- }
2787
3215
  .Layer__bank-transaction-row.Layer__bank-transaction-row--removing .Layer__table-cell-content {
2788
3216
  padding: 0 var(--spacing-md);
2789
3217
  overflow: hidden;
@@ -3076,9 +3504,6 @@ tbody .Layer__table__empty-row:first-child {
3076
3504
  opacity: 1;
3077
3505
  transform: scale(1);
3078
3506
  }
3079
- .Layer__bank-transaction-list-item.Layer__bank-transaction-row--removing {
3080
- display: none;
3081
- }
3082
3507
  .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row {
3083
3508
  max-height: 60px;
3084
3509
  opacity: 1;
@@ -3856,7 +4281,6 @@ tbody .Layer__table__empty-row:first-child {
3856
4281
  margin: 0;
3857
4282
  display: flex;
3858
4283
  flex-direction: column;
3859
- gap: var(--spacing-sm);
3860
4284
  list-style: none;
3861
4285
  overflow: hidden;
3862
4286
  max-width: 414px;
@@ -3864,7 +4288,7 @@ tbody .Layer__table__empty-row:first-child {
3864
4288
  }
3865
4289
  .Layer__bank-transaction-mobile-list-item {
3866
4290
  padding: 0;
3867
- margin: 0 var(--spacing-sm);
4291
+ margin: var(--spacing-2xs);
3868
4292
  background: var(--color-base-0);
3869
4293
  box-shadow: 0px 2px 2px 0px var(--color-base-200), 0px 4px 4px 0px var(--color-base-100);
3870
4294
  border-radius: var(--border-radius-sm);
@@ -3886,12 +4310,24 @@ tbody .Layer__table__empty-row:first-child {
3886
4310
  transform: scale(1);
3887
4311
  }
3888
4312
  .Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing {
3889
- opacity: 0.99;
4313
+ opacity: 0;
4314
+ transition: all 500ms ease-in-out, opacity 80ms ease-out;
4315
+ overflow: hidden;
4316
+ margin-top: 0;
4317
+ margin-bottom: 0;
4318
+ }
4319
+ .Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing .Layer__bank-transaction-mobile-list-item__expanded-row {
4320
+ transition: all 380ms ease-out;
4321
+ height: 0 !important;
4322
+ }
4323
+ .Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing .Layer__bank-transaction-mobile-list-item__heading {
4324
+ transition: height 180ms ease-out;
4325
+ height: 0 !important;
3890
4326
  }
3891
4327
  .Layer__bank-transaction-mobile-list-item .Layer__bank-transaction-mobile-list-item__expanded-row {
3892
4328
  height: 0;
3893
4329
  overflow: hidden;
3894
- transition: all 180ms ease-in-out;
4330
+ transition: all 180ms ease-out;
3895
4331
  }
3896
4332
  .Layer__bank-transaction-mobile-list-item .Layer__text--error {
3897
4333
  padding: var(--spacing-sm) 0;
@@ -4872,6 +5308,30 @@ tbody .Layer__table__empty-row:first-child {
4872
5308
  .Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label span {
4873
5309
  line-height: normal;
4874
5310
  }
5311
+ @keyframes skeletonSweep {
5312
+ 100% {
5313
+ transform: translateX(100%);
5314
+ }
5315
+ }
5316
+ .skeleton-loader {
5317
+ position: relative;
5318
+ padding: 1rem;
5319
+ background: white;
5320
+ border-radius: var(--border-radius-base);
5321
+ overflow: hidden;
5322
+ }
5323
+ .skeleton-loader::after {
5324
+ display: block;
5325
+ content: "";
5326
+ position: absolute;
5327
+ top: 0;
5328
+ left: 0;
5329
+ width: 100%;
5330
+ height: 100%;
5331
+ transform: translateX(-100%);
5332
+ background: linear-gradient(90deg, transparent, rgb(255, 255, 255), transparent);
5333
+ animation: skeletonSweep 1.5s infinite;
5334
+ }
4875
5335
  .Layer__linked-account-thumb {
4876
5336
  display: flex;
4877
5337
  flex-direction: column;
@@ -4881,6 +5341,8 @@ tbody .Layer__table__empty-row:first-child {
4881
5341
  background: var(--color-base-0);
4882
5342
  border: 1px solid var(--color-base-100);
4883
5343
  box-sizing: border-box;
5344
+ min-width: 286px;
5345
+ justify-content: space-between;
4884
5346
  }
4885
5347
  .Layer__linked-account-thumb .topbar {
4886
5348
  min-width: 272px;
@@ -4896,6 +5358,11 @@ tbody .Layer__table__empty-row:first-child {
4896
5358
  padding: var(--spacing-xs);
4897
5359
  box-sizing: border-box;
4898
5360
  }
5361
+ .Layer__linked-account-thumb .topbar.--is-syncing {
5362
+ color: var(--color-base-500);
5363
+ background: none;
5364
+ z-index: 50;
5365
+ }
4899
5366
  .Layer__linked-account-thumb .topbar .account-institution {
4900
5367
  color: var(--color-base-500);
4901
5368
  }
@@ -4938,6 +5405,31 @@ tbody .Layer__table__empty-row:first-child {
4938
5405
  .Layer__linked-account-thumb .middlebar .account-balance-text {
4939
5406
  color: var(--color-base-500);
4940
5407
  }
5408
+ .Layer__linked-account-thumb .loadingbar {
5409
+ display: flex;
5410
+ padding: var(--spacing-xs);
5411
+ border-bottom-left-radius: var(--border-radius-xs);
5412
+ border-bottom-right-radius: var(--border-radius-xs);
5413
+ gap: var(--spacing-xs);
5414
+ align-items: center;
5415
+ z-index: 100;
5416
+ }
5417
+ .Layer__linked-account-thumb .loadingbar .loading-text {
5418
+ flex: 1;
5419
+ line-height: 140%;
5420
+ }
5421
+ .Layer__linked-account-thumb .loadingbar .loading-wrapper {
5422
+ width: 28px;
5423
+ height: 28px;
5424
+ background: var(--color-blue);
5425
+ border-radius: 50%;
5426
+ display: flex;
5427
+ align-items: center;
5428
+ justify-content: center;
5429
+ }
5430
+ .Layer__linked-account-thumb .loadingbar .syncing-data-description {
5431
+ color: var(--color-base-500);
5432
+ }
4941
5433
  .Layer__linked-account-thumb .bottombar {
4942
5434
  box-sizing: border-box;
4943
5435
  display: flex;
@@ -4949,6 +5441,9 @@ tbody .Layer__table__empty-row:first-child {
4949
5441
  .Layer__linked-account-thumb .bottombar .account-balance-text {
4950
5442
  color: var(--color-base-500);
4951
5443
  }
5444
+ .Layer__linked-account-thumb.--is-syncing {
5445
+ background: hsl(200, 11%, 96%);
5446
+ }
4952
5447
  .Layer__linked-account-thumb.--as-widget {
4953
5448
  gap: var(--spacing-2xs);
4954
5449
  }
@@ -5324,7 +5819,7 @@ tbody .Layer__table__empty-row:first-child {
5324
5819
  .Layer__panel {
5325
5820
  flex: 1;
5326
5821
  display: flex;
5327
- align-items: start;
5822
+ align-items: flex-start;
5328
5823
  height: 100%;
5329
5824
  }
5330
5825
  .Layer__panel__content {