@layerfi/components 0.1.33 → 0.1.35

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.
@@ -311,6 +311,36 @@
311
311
  background-color: var(--badge-color-error);
312
312
  color: var(--badge-bg-color-error);
313
313
  }
314
+ .Layer__bar-banner {
315
+ display: flex;
316
+ align-items: center;
317
+ justify-content: space-between;
318
+ background-color: var(--color-base-800);
319
+ color: var(--color-base-50);
320
+ border-radius: var(--border-radius-xs);
321
+ padding: var(--spacing-3xs) var(--spacing-sm);
322
+ min-height: 52px;
323
+ box-shadow: 0px 0px 0px 3px var(--color-base-300);
324
+ }
325
+ .Layer__bar-banner__left-col {
326
+ display: flex;
327
+ align-items: center;
328
+ gap: var(--spacing-md);
329
+ }
330
+ .Layer__bar-banner__text-container__desc {
331
+ color: var(--color-base-300);
332
+ }
333
+ @container (max-width: 560px) {
334
+ .Layer__bar-banner--bookkeeping {
335
+ flex-direction: column;
336
+ align-items: flex-start;
337
+ gap: var(--spacing-sm);
338
+ padding: var(--spacing-sm);
339
+ }
340
+ .Layer__bar-banner--bookkeeping .Layer__icon-box {
341
+ display: none;
342
+ }
343
+ }
314
344
  .Layer__btn {
315
345
  position: relative;
316
346
  border-radius: var(--btn-border-radius);
@@ -334,6 +364,11 @@
334
364
  0px 4px 5px 0px rgba(0, 0, 0, 0.01);
335
365
  transition: all 100ms ease-out;
336
366
  padding: 0 var(--spacing-md);
367
+ text-decoration: none;
368
+ }
369
+ .Layer__btn.Layer__btn--as-link {
370
+ display: inline-flex;
371
+ align-items: center;
337
372
  }
338
373
  .Layer__btn.Layer__back-btn {
339
374
  color: var(--btn-secondary-color);
@@ -348,6 +383,26 @@
348
383
  width: 36px;
349
384
  height: 36px;
350
385
  }
386
+ .Layer__btn.Layer__expand-btn {
387
+ color: var(--btn-secondary-color);
388
+ background: var(--btn-secondary-bg-color);
389
+ display: flex;
390
+ justify-content: center;
391
+ align-items: center;
392
+ border-radius: 4px;
393
+ box-sizing: border-box;
394
+ transition: all 150ms ease-out;
395
+ padding: 0;
396
+ width: 36px;
397
+ height: 36px;
398
+ }
399
+ .Layer__btn.Layer__expand-btn svg {
400
+ transform: rotate(90deg);
401
+ transition: transform 120ms ease-in-out;
402
+ }
403
+ .Layer__btn.Layer__expand-btn.Layer__expand-btn--collapsed svg {
404
+ transform: rotate(-90deg);
405
+ }
351
406
  .Layer__btn.Layer__btn--full-width {
352
407
  width: 100%;
353
408
  }
@@ -629,117 +684,6 @@
629
684
  .Layer__chart_y-axis-tick tspan {
630
685
  font-size: var(--text-sm);
631
686
  }
632
- .Layer__date-month-picker__wrapper {
633
- display: flex;
634
- align-items: center;
635
- position: relative;
636
- }
637
- .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
638
- border-top-left-radius: 0;
639
- border-bottom-left-radius: 0;
640
- }
641
- .Layer__date-month-picker__wrapper.Layer__date-month-picker__wrapper--current-date-option .Layer__date-month-picker {
642
- border-top-right-radius: 0;
643
- border-bottom-right-radius: 0;
644
- }
645
- .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
646
- border: 1px solid var(--input-border-color);
647
- border-left: none;
648
- box-shadow: none;
649
- }
650
- .Layer__date-month-picker {
651
- width: 210px;
652
- font-size: 14px;
653
- padding: 0.25rem;
654
- border: 1px solid var(--input-border-color);
655
- border-radius: var(--input-border-radius);
656
- overflow: hidden;
657
- position: relative;
658
- display: flex;
659
- align-items: center;
660
- justify-content: flex-end;
661
- z-index: 1;
662
- }
663
- .Layer__date-month-picker__button {
664
- padding: 0.25rem;
665
- display: flex;
666
- justify-content: center;
667
- align-items: center;
668
- text-align: center;
669
- background-color: var(--color-base-0);
670
- border: 0;
671
- border-radius: var(--input-border-radius);
672
- z-index: 3;
673
- position: relative;
674
- }
675
- .Layer__date-month-picker__button:active {
676
- background-color: var(--color-base-0);
677
- }
678
- .Layer__date-month-picker__button-icon path {
679
- stroke: var(--text-color);
680
- }
681
- .Layer__date-month-picker__button--disabled .Layer__date-month-picker__button-icon path {
682
- stroke: var(--color-base-500);
683
- }
684
- .Layer__date-month-picker__label {
685
- flex: 1;
686
- font-size: 14px;
687
- display: flex;
688
- justify-content: flex-start;
689
- align-items: center;
690
- text-align: center;
691
- padding: 0 var(--spacing-xs);
692
- transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
693
- width: 33%;
694
- position: relative;
695
- padding-left: 20px;
696
- }
697
- .Layer__date-month-picker__labels-container {
698
- display: flex;
699
- width: 660px;
700
- position: absolute;
701
- }
702
- .Layer__date-month-picker__effect-blur {
703
- width: 120px;
704
- height: 100%;
705
- position: absolute;
706
- right: -10px;
707
- bottom: 1px;
708
- background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
709
- z-index: 2;
710
- }
711
- @container (max-width: 759px) {
712
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker {
713
- border: none;
714
- background: none;
715
- width: 175px;
716
- }
717
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__button {
718
- margin: 0 0.125rem;
719
- box-shadow: 0px 1px 2px 0px var(--base-transparent-6, rgba(16, 24, 40, 0.06)), 0px 0px 0px 1px var(--color-base-300);
720
- border-radius: 4px;
721
- }
722
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__effect-blur {
723
- right: 0;
724
- max-width: 70px;
725
- background: linear-gradient(-90deg, #f7f8fa 75%, rgba(255, 255, 255, 0) 100%);
726
- }
727
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__button--disabled {
728
- background-color: var(--color-base-200);
729
- }
730
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__labels-container {
731
- width: 550px;
732
- }
733
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__label {
734
- padding-left: 0;
735
- padding-right: 75px;
736
- justify-content: flex-end;
737
- font-size: 12px;
738
- }
739
- .Layer__date-month-picker--responsive .Layer__date-month-picker__current-button {
740
- display: none;
741
- }
742
- }
743
687
  .Layer__hover-menu {
744
688
  position: relative;
745
689
  display: flex;
@@ -896,6 +840,12 @@
896
840
  padding-top: var(--spacing-xl);
897
841
  }
898
842
  }
843
+ .Layer__error-boundary {
844
+ padding: var(--spacing-xl);
845
+ }
846
+ .Layer__error-boundary .Layer__data-state__description {
847
+ margin-bottom: 0;
848
+ }
899
849
  .Layer__datetime {
900
850
  display: inline-flex;
901
851
  align-items: center;
@@ -908,64 +858,67 @@
908
858
  .Layer__datetime__time {
909
859
  color: var(--color-base-600);
910
860
  }
911
- .Layer__datepicker input {
861
+ .Layer__datepicker__wrapper {
862
+ display: inline-flex;
863
+ align-items: center;
864
+ max-height: 36px;
865
+ border-radius: var(--input-border-radius);
866
+ box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
867
+ }
868
+ .Layer__datepicker__wrapper:focus-within {
869
+ box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
870
+ outline: none;
871
+ }
872
+ .Layer__datepicker__wrapper .Layer__datepicker__current-button {
873
+ border-top-left-radius: 0;
874
+ border-bottom-left-radius: 0;
875
+ box-shadow: none;
876
+ border-left: 1px solid var(--input-border-color);
877
+ }
878
+ .Layer__datepicker__wrapper .Layer__datepicker input,
879
+ .Layer__datepicker__wrapper .Layer__datepicker button {
880
+ border-radius: var(--input-border-radius);
912
881
  padding: 8px;
913
882
  box-sizing: border-box;
914
883
  position: relative;
915
- border: 1px solid var(--border-color);
916
- border-radius: var(--input-border-radius);
917
- border-width: 0px;
918
- box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
884
+ border: none;
919
885
  margin: 1px;
920
886
  max-width: 150px;
921
887
  font-family: var(--font-family);
922
888
  font-size: var(--input-font-size);
923
889
  line-height: 140%;
924
890
  }
925
- .Layer__datepicker input:focus,
926
- .Layer__datepicker input:active,
927
- .Layer__datepicker input:focus-visible {
928
- box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
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 {
897
+ box-shadow: none;
929
898
  outline: none;
930
899
  }
931
- .react-datepicker__tab-loop {
932
- z-index: 99;
933
- }
934
- .Layer__datepicker input {
935
- text-align: center;
936
- }
937
- .Layer__datepicker__time input {
938
- max-width: 100px;
939
- }
940
- .Layer__datepicker__popper * {
941
- outline-color: var(--color-base-800);
942
- }
943
- .Layer__datepicker__popper {
900
+ .Layer__datepicker__wrapper .Layer__datepicker__popper {
901
+ min-width: 275px;
902
+ max-width: 275px;
944
903
  z-index: 99;
945
904
  border-radius: 8px;
946
905
  }
947
- .Layer__datepicker__popper .react-datepicker__day--in-range,
948
- .Layer__datepicker__popper .react-datepicker__day--in-selecting-range {
949
- background-color: var(--color-base-200);
950
- color: var(--color-base-800);
951
- }
952
- .Layer__datepicker__popper .react-datepicker__day--range-end {
953
- background-color: var(--color-base-800);
954
- color: var(--color-base-100);
906
+ .Layer__datepicker__wrapper .Layer__datepicker__popper * {
907
+ outline-color: var(--color-base-800);
955
908
  }
956
- .Layer__datepicker__popper .react-datepicker__triangle {
909
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .react-datepicker__triangle {
957
910
  display: none;
958
911
  }
959
- .Layer__datepicker__popper .Layer__datepicker__calendar {
912
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar {
960
913
  border: none;
961
914
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
962
915
  }
963
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
916
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
964
917
  left: auto;
965
918
  right: 42px;
966
919
  }
967
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
968
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
920
+ .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 {
969
922
  border-color: var(--color-base-800);
970
923
  border-style: solid;
971
924
  border-width: 1px 1px 0 0;
@@ -973,15 +926,32 @@
973
926
  display: block;
974
927
  height: 6px;
975
928
  position: absolute;
976
- top: 10px;
929
+ top: 11px;
977
930
  width: 6px;
978
931
  }
979
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
932
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
933
+ min-width: 275px;
934
+ max-width: 275px;
935
+ }
936
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
980
937
  padding: var(--spacing-sm) 0 0;
981
938
  background: white;
982
939
  border: none;
983
940
  }
984
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
941
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header {
942
+ padding: var(--spacing-sm);
943
+ text-align: left;
944
+ font-weight: 460;
945
+ font-family: var(--font-family);
946
+ font-feature-settings:
947
+ "cv10" on,
948
+ "cv05" on,
949
+ "cv08" on,
950
+ "ss03" on;
951
+ font-size: 14px;
952
+ border-bottom: 1px solid var(--color-base-200);
953
+ }
954
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
985
955
  padding: 0 var(--spacing-md) var(--spacing-sm);
986
956
  text-align: left;
987
957
  font-weight: 460;
@@ -994,76 +964,172 @@
994
964
  font-size: 14px;
995
965
  border-bottom: 1px solid var(--color-base-200);
996
966
  }
997
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
967
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
998
968
  padding: var(--spacing-xs) var(--spacing-xs) 0;
999
969
  }
1000
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
970
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
1001
971
  width: 32px;
1002
972
  height: 32px;
1003
973
  color: var(--color-base-500);
1004
974
  font-size: 12px;
1005
975
  }
1006
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week {
976
+ .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 {
1007
978
  display: flex;
1008
979
  align-items: center;
1009
980
  justify-content: center;
1010
981
  }
1011
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day {
1012
- width: 32px;
1013
- height: 32px;
982
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
983
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
984
+ .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 {
1014
986
  display: flex;
1015
987
  align-items: center;
1016
988
  justify-content: center;
1017
989
  transition: all 0.2s ease-in-out;
1018
990
  }
1019
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover {
991
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover,
992
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text:hover,
993
+ .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 {
1020
995
  background-color: var(--color-base-400);
1021
996
  color: var(--color-base-800);
1022
997
  }
1023
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected {
1024
- background-color: var(--color-base-800);
1025
- color: var(--color-base-100);
1026
- font-weight: 460;
1027
- }
1028
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month {
998
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month,
999
+ .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
+ .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 {
1029
1002
  color: var(--color-base-500);
1030
1003
  }
1031
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled {
1004
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled,
1005
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--disabled,
1006
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--disabled,
1007
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--disabled,
1008
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--disabled,
1009
+ .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
+ .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 {
1032
1012
  color: var(--color-base-300);
1033
1013
  cursor: not-allowed;
1034
1014
  }
1035
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected {
1015
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
1016
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
1017
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
1018
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
1019
+ .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
+ .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
+ .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 {
1036
1023
  background-color: var(--color-base-400);
1037
1024
  color: var(--color-base-800);
1038
1025
  border-color: var(--color-base-800);
1039
1026
  outline-color: var(--color-base-800);
1040
1027
  }
1041
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1028
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected,
1029
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--selected,
1030
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--selected,
1031
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--selected,
1032
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--selected,
1033
+ .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
+ .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 {
1036
+ background-color: var(--color-base-800);
1037
+ color: var(--color-base-100);
1038
+ font-weight: 460;
1039
+ }
1040
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
1041
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-range,
1042
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
1043
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
1044
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-range,
1045
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-range,
1046
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1047
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-selecting-range,
1048
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-range,
1049
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-range,
1050
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
1051
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-selecting-range,
1052
+ .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
+ .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
+ .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 {
1056
+ background-color: var(--color-base-200);
1057
+ color: var(--color-base-800);
1058
+ }
1059
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-start,
1060
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-start,
1061
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-end,
1062
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-end,
1063
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-start,
1064
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-start,
1065
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-end,
1066
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-end,
1067
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-start,
1068
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-start,
1069
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-end,
1070
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-end,
1071
+ .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
+ .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
+ .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 {
1075
+ background-color: var(--color-base-800);
1076
+ color: var(--color-base-100);
1077
+ }
1078
+ .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 {
1080
+ width: 32px;
1081
+ height: 32px;
1082
+ }
1083
+ .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 {
1085
+ width: 100%;
1086
+ height: 32px;
1087
+ }
1088
+ .Layer__datepicker__wrapper .react-datepicker__children-container {
1089
+ width: 100%;
1090
+ margin: 0;
1091
+ padding: 0;
1092
+ }
1093
+ .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer {
1094
+ display: flex;
1095
+ flex-direction: column;
1096
+ justify-content: flex-start;
1097
+ align-items: flex-start;
1098
+ padding: var(--spacing-md) var(--spacing-xs);
1099
+ border-top: 1px solid var(--color-base-200);
1100
+ }
1101
+ .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1102
+ padding: var(--spacing-xs) var(--spacing-xs);
1103
+ color: var(--color-base-800);
1104
+ font-weight: 460;
1105
+ text-decoration: none;
1106
+ }
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 {
1042
1108
  background-color: var(--color-base-800);
1043
1109
  color: var(--color-base-100);
1044
1110
  font-weight: 460;
1045
1111
  }
1046
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
1112
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
1047
1113
  display: flex;
1048
1114
  align-items: center;
1049
1115
  justify-content: center;
1050
1116
  transition: all 0.2s ease-in-out;
1051
1117
  }
1052
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
1118
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
1053
1119
  background-color: var(--color-base-400);
1054
1120
  color: var(--color-base-800);
1055
1121
  }
1056
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
1122
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
1057
1123
  background-color: var(--color-base-800);
1058
1124
  color: var(--color-base-100);
1059
1125
  font-weight: 460;
1060
1126
  }
1061
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
1127
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
1062
1128
  padding: var(--spacing-sm) 0 0;
1063
1129
  background: white;
1064
1130
  border: none;
1065
1131
  }
1066
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
1132
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
1067
1133
  padding: 0 var(--spacing-md) var(--spacing-sm);
1068
1134
  text-align: left;
1069
1135
  font-weight: 460;
@@ -1076,24 +1142,22 @@
1076
1142
  font-size: 14px;
1077
1143
  border-bottom: 1px solid var(--color-base-200);
1078
1144
  }
1079
- .react-datepicker__children-container {
1080
- width: 100%;
1081
- margin: 0;
1082
- padding: 0;
1145
+ .Layer__datepicker__time__wrapper .react-datepicker__header {
1146
+ padding: 0 !important;
1083
1147
  }
1084
- .Layer__datepicker__popper__custom-footer {
1085
- display: flex;
1086
- flex-direction: column;
1087
- justify-content: flex-start;
1088
- align-items: flex-start;
1089
- padding: var(--spacing-md) var(--spacing-xs);
1090
- border-top: 1px solid var(--color-base-200);
1148
+ .Layer__datepicker__time__wrapper .react-datepicker-time__header {
1149
+ display: none;
1091
1150
  }
1092
- .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1093
- padding: var(--spacing-xs) var(--spacing-xs);
1094
- color: var(--color-base-800);
1095
- font-weight: 460;
1096
- text-decoration: none;
1151
+ .Layer__datepicker__time__wrapper .Layer__datepicker__time input {
1152
+ max-width: 84px;
1153
+ }
1154
+ .Layer__datepicker__time__wrapper .Layer__datepicker__popper {
1155
+ min-width: auto;
1156
+ max-width: auto;
1157
+ }
1158
+ .Layer__datepicker__time__wrapper .Layer__datepicker__popper .react-datepicker__month-container {
1159
+ min-width: auto;
1160
+ max-width: auto;
1097
1161
  }
1098
1162
  .Layer__details-list {
1099
1163
  display: flex;
@@ -1720,9 +1784,14 @@
1720
1784
  }
1721
1785
  .Layer__table {
1722
1786
  width: 100%;
1723
- border-collapse: separate;
1724
1787
  border-spacing: 0;
1725
1788
  }
1789
+ .Layer__table.Layer__table__seperate-rows {
1790
+ border-collapse: separate;
1791
+ }
1792
+ .Layer__table.Layer__table__collapse-rows {
1793
+ border-collapse: collapse;
1794
+ }
1726
1795
  .Layer__table::-webkit-scrollbar {
1727
1796
  width: 6px;
1728
1797
  height: 6px;
@@ -1738,7 +1807,7 @@
1738
1807
  .Layer__table::-webkit-scrollbar-thumb:hover {
1739
1808
  background: #999;
1740
1809
  }
1741
- .Layer__table-header {
1810
+ .Layer__table .Layer__table-header {
1742
1811
  color: var(--text-color-secondary);
1743
1812
  font-size: var(--text-sm);
1744
1813
  font-variation-settings: "wght" var(--font-weight-normal);
@@ -1755,33 +1824,253 @@
1755
1824
  text-align: left;
1756
1825
  position: relative;
1757
1826
  }
1758
- .Layer__table-header.Layer__table-header--primary {
1827
+ .Layer__table .Layer__table-header .Layer__table-cell {
1828
+ border-top: none;
1829
+ }
1830
+ .Layer__table .Layer__table-header.Layer__table-header--primary .Layer__table-cell.Layer__table-cell--primary {
1759
1831
  color: var(--text-color-primary);
1760
1832
  font-variation-settings: "wght" var(--font-weight-bold);
1761
1833
  }
1762
- .Layer__table-cell--primary,
1763
- .Layer__table-cell--primary .Layer__table-cell-content {
1764
- color: var(--color-base-800);
1765
- font-variation-settings: "wght" var(--font-weight-bold);
1834
+ .Layer__table .Layer__table-body .Layer__table-empty-row:first-child {
1835
+ display: none;
1766
1836
  }
1767
- .Layer__table-cell {
1768
- font-size: var(--text-md);
1769
- text-align: left;
1770
- color: var(--text-color-secondary);
1771
- border-top: 1px solid var(--border-color);
1837
+ .Layer__table .Layer__table-empty-row {
1838
+ background: var(--color-base-100);
1839
+ height: var(--spacing-2xs);
1840
+ border-top: 1px solid var(--color-base-200);
1841
+ border-bottom: 1px solid var(--color-base-200);
1842
+ }
1843
+ .Layer__table .Layer__table-row {
1844
+ position: relative;
1772
1845
  height: var(--spacing-5xl);
1773
- padding: 0;
1846
+ transition: all 100ms ease-in-out;
1774
1847
  }
1775
- .Layer__table-row:last-child .Layer__table-cell {
1776
- border-bottom: 1px solid var(--border-color);
1848
+ .Layer__table .Layer__table-row.Layer__table-row--expanded .Layer__table-row--expand-icon {
1849
+ transform: rotate(0deg);
1777
1850
  }
1778
- .Layer__table-cell-content {
1779
- display: flex;
1780
- align-items: center;
1781
- height: 100%;
1782
- top: 0px;
1783
- padding: var(--spacing-sm) var(--spacing-md);
1784
- box-sizing: border-box;
1851
+ .Layer__table .Layer__table-row.Layer__table-row--collapsed .Layer__table-row--expand-icon {
1852
+ transform: rotate(-90deg);
1853
+ }
1854
+ .Layer__table .Layer__table-row.Layer__table-row--variant-expandable {
1855
+ cursor: pointer;
1856
+ }
1857
+ .Layer__table .Layer__table-row.Layer__table-row--variant-default {
1858
+ background: var(--color-base-50);
1859
+ }
1860
+ .Layer__table .Layer__table-row.Layer__table-row--variant-summation {
1861
+ background: var(--color-base-100);
1862
+ }
1863
+ .Layer__table .Layer__table-row--depth-0 td:nth-child(1) .Layer__table-cell-content {
1864
+ padding-left: calc(var(--spacing-lg) * 1);
1865
+ }
1866
+ .Layer__table .Layer__table-row--depth-1 td:nth-child(1) .Layer__table-cell-content {
1867
+ padding-left: calc(var(--spacing-lg) * 2);
1868
+ }
1869
+ .Layer__table .Layer__table-row--depth-2 td:nth-child(1) .Layer__table-cell-content {
1870
+ padding-left: calc(var(--spacing-lg) * 3);
1871
+ }
1872
+ .Layer__table .Layer__table-row--depth-3 td:nth-child(1) .Layer__table-cell-content {
1873
+ padding-left: calc(var(--spacing-lg) * 4);
1874
+ }
1875
+ .Layer__table .Layer__table-row--depth-4 td:nth-child(1) .Layer__table-cell-content {
1876
+ padding-left: calc(var(--spacing-lg) * 5);
1877
+ }
1878
+ .Layer__table .Layer__table-row--depth-5 td:nth-child(1) .Layer__table-cell-content {
1879
+ padding-left: calc(var(--spacing-lg) * 6);
1880
+ }
1881
+ .Layer__table .Layer__table-row--depth-6 td:nth-child(1) .Layer__table-cell-content {
1882
+ padding-left: calc(var(--spacing-lg) * 7);
1883
+ }
1884
+ .Layer__table .Layer__table-row--depth-7 td:nth-child(1) .Layer__table-cell-content {
1885
+ padding-left: calc(var(--spacing-lg) * 8);
1886
+ }
1887
+ .Layer__table .Layer__table-row--depth-8 td:nth-child(1) .Layer__table-cell-content {
1888
+ padding-left: calc(var(--spacing-lg) * 9);
1889
+ }
1890
+ .Layer__table .Layer__table-row--depth-9 td:nth-child(1) .Layer__table-cell-content {
1891
+ padding-left: calc(var(--spacing-lg) * 10);
1892
+ }
1893
+ .Layer__table .Layer__table-row--depth-10 td:nth-child(1) .Layer__table-cell-content {
1894
+ padding-left: calc(var(--spacing-lg) * 11);
1895
+ }
1896
+ .Layer__table .Layer__table-cell {
1897
+ font-size: var(--text-md);
1898
+ text-align: left;
1899
+ color: var(--text-color-secondary);
1900
+ border-top: 1px solid var(--border-color);
1901
+ padding: 0;
1902
+ }
1903
+ .Layer__table .Layer__table-cell.Layer__table-cell--primary {
1904
+ color: var(--color-base-800);
1905
+ font-variation-settings: "wght" var(--font-weight-bold);
1906
+ }
1907
+ .Layer__table .Layer__table-cell.Layer__table-cell-amount--positive .Layer__table-cell-content::before {
1908
+ content: "$";
1909
+ }
1910
+ .Layer__table .Layer__table-cell.Layer__table-cell-amount--negative .Layer__table-cell-content::before {
1911
+ content: "-$";
1912
+ }
1913
+ .Layer__table .Layer__table-cell .Layer__table-cell-content {
1914
+ display: flex;
1915
+ align-items: center;
1916
+ height: 100%;
1917
+ top: 0px;
1918
+ padding: var(--spacing-sm) var(--spacing-md);
1919
+ box-sizing: border-box;
1920
+ transition: all var(--transition-speed) ease-out;
1921
+ position: relative;
1922
+ }
1923
+ .Layer__table .Layer__table-cell .Layer__table-cell-content .Layer__table-row--expand-icon {
1924
+ transition: transform 0.1s ease-in-out;
1925
+ width: 16px;
1926
+ height: 16px;
1927
+ margin-right: 8px;
1928
+ }
1929
+ .Layer__table tr th:nth-child(1) .Layer__table-cell-content,
1930
+ .Layer__table tr td:nth-child(1) .Layer__table-cell-content {
1931
+ padding-left: var(--spacing-lg);
1932
+ }
1933
+ .Layer__table tr td:last-child .Layer__table-cell-content,
1934
+ .Layer__table tr th:last-child .Layer__table-cell-content {
1935
+ justify-content: flex-end;
1936
+ padding-right: var(--spacing-lg);
1937
+ }
1938
+ .Layer__table-cell-content-indentation {
1939
+ height: 100%;
1940
+ display: flex;
1941
+ align-items: center;
1942
+ box-sizing: border-box;
1943
+ }
1944
+ .Layer__table-row--active .Layer__table-cell:first-child .Layer__table-cell-content:before {
1945
+ content: "";
1946
+ background-color: var(--color-base-400);
1947
+ height: 100%;
1948
+ width: 4px;
1949
+ position: absolute;
1950
+ left: 0;
1951
+ top: 0;
1952
+ bottom: 0;
1953
+ }
1954
+ .Layer__table-row--hidden .Layer__table-cell {
1955
+ border-top-width: 0;
1956
+ }
1957
+ .Layer__table-cell {
1958
+ height: auto;
1959
+ }
1960
+ .Layer__table-cell > .Layer__table-cell-content {
1961
+ overflow: hidden;
1962
+ transition: all 50ms ease-out;
1963
+ }
1964
+ .Layer__table-row {
1965
+ transition: all 100ms ease-in-out;
1966
+ }
1967
+ .Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
1968
+ transition:
1969
+ height 60ms ease-out,
1970
+ opacity 50ms ease-in-out,
1971
+ padding 50ms ease-in-out;
1972
+ }
1973
+ .Layer__table-row.Layer__table-row--with-show:not(.initial-load) {
1974
+ opacity: 0.5;
1975
+ }
1976
+ .Layer__table-row.Layer__table-row--with-show:not(.initial-load).show {
1977
+ transition: opacity 50ms ease-out;
1978
+ opacity: 1;
1979
+ }
1980
+ .Layer__table.with-cell-separators > tbody > tr > td:first-child .Layer__table-cell-content::after,
1981
+ .Layer__table.with-cell-separators > tbody > tr > td:last-child .Layer__table-cell-content::after,
1982
+ .Layer__table.with-cell-separators > thead > tr > th:first-child.Layer__table-header::after,
1983
+ .Layer__table.with-cell-separators > thead > tr > th:last-child.Layer__table-header::after {
1984
+ display: none;
1985
+ }
1986
+ .Layer__table-state-container {
1987
+ padding: var(--spacing-2xl) var(--spacing-sm);
1988
+ box-sizing: border-box;
1989
+ display: flex;
1990
+ flex-direction: column;
1991
+ align-items: center;
1992
+ justify-content: center;
1993
+ width: 100%;
1994
+ height: calc(100vh - 200px);
1995
+ }
1996
+ .Layer__component--as-widget .Layer__table-state-container {
1997
+ height: calc(100% - 160px);
1998
+ }
1999
+ .Layer__table-row--active .Layer__table-cell:first-child .Layer__table-cell-content:before {
2000
+ content: "";
2001
+ background-color: var(--color-base-400);
2002
+ height: 100%;
2003
+ width: 4px;
2004
+ position: absolute;
2005
+ left: 0;
2006
+ top: 0;
2007
+ bottom: 0;
2008
+ }
2009
+ .Layer__table--hover-effect .Layer__table-row:hover {
2010
+ background-color: var(--color-base-50);
2011
+ cursor: pointer;
2012
+ }
2013
+ .Layer__table {
2014
+ width: 100%;
2015
+ border-collapse: separate;
2016
+ border-spacing: 0;
2017
+ }
2018
+ .Layer__table::-webkit-scrollbar {
2019
+ width: 6px;
2020
+ height: 6px;
2021
+ }
2022
+ .Layer__table::-webkit-scrollbar-track {
2023
+ background: #f1f1f1;
2024
+ border-radius: 4px;
2025
+ }
2026
+ .Layer__table::-webkit-scrollbar-thumb {
2027
+ background: #e2e2e2;
2028
+ border-radius: 4px;
2029
+ }
2030
+ .Layer__table::-webkit-scrollbar-thumb:hover {
2031
+ background: #999;
2032
+ }
2033
+ .Layer__table-header {
2034
+ color: var(--text-color-secondary);
2035
+ font-size: var(--text-sm);
2036
+ font-variation-settings: "wght" var(--font-weight-normal);
2037
+ font-variant-numeric: lining-nums proportional-nums;
2038
+ font-feature-settings:
2039
+ "cv10" on,
2040
+ "cv05" on,
2041
+ "cv08" on,
2042
+ "ss03" on;
2043
+ text-overflow: ellipsis;
2044
+ line-height: 140%;
2045
+ letter-spacing: -0.06px;
2046
+ padding: var(--spacing-sm) var(--spacing-md);
2047
+ text-align: left;
2048
+ position: relative;
2049
+ }
2050
+ .Layer__table-header.Layer__table-header--primary {
2051
+ color: var(--text-color-primary);
2052
+ font-variation-settings: "wght" var(--font-weight-bold);
2053
+ }
2054
+ .Layer__table-cell--primary,
2055
+ .Layer__table-cell--primary .Layer__table-cell-content {
2056
+ color: var(--color-base-800);
2057
+ font-variation-settings: "wght" var(--font-weight-bold);
2058
+ }
2059
+ .Layer__table-cell {
2060
+ font-size: var(--text-md);
2061
+ text-align: left;
2062
+ color: var(--text-color-secondary);
2063
+ border-top: 1px solid var(--border-color);
2064
+ height: var(--spacing-5xl);
2065
+ padding: 0;
2066
+ }
2067
+ .Layer__table-cell-content {
2068
+ display: flex;
2069
+ align-items: center;
2070
+ height: 100%;
2071
+ top: 0px;
2072
+ padding: var(--spacing-sm) var(--spacing-md);
2073
+ box-sizing: border-box;
1785
2074
  transition: all var(--transition-speed) ease-out;
1786
2075
  position: relative;
1787
2076
  }
@@ -1852,13 +2141,16 @@
1852
2141
  }
1853
2142
  .Layer__table-cell > .Layer__table-cell-content {
1854
2143
  overflow: hidden;
1855
- transition: all 100ms ease-out;
2144
+ transition: all 50ms ease-out;
1856
2145
  }
1857
2146
  .Layer__table-row {
1858
- transition: all 180ms ease-in-out;
2147
+ transition: all 100ms ease-in-out;
1859
2148
  }
1860
2149
  .Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
1861
- transition: height 60ms ease-out, opacity 50ms ease-in-out;
2150
+ transition:
2151
+ height 60ms ease-out,
2152
+ opacity 50ms ease-in-out,
2153
+ padding 50ms ease-in-out;
1862
2154
  }
1863
2155
  .Layer__table-row.Layer__table-row--with-show:not(.initial-load) {
1864
2156
  opacity: 0.5;
@@ -1868,8 +2160,14 @@
1868
2160
  opacity: 1;
1869
2161
  }
1870
2162
  .Layer__table-row.Layer__table-row--anim-starting-state {
1871
- transform: scaleX(0.98);
1872
2163
  opacity: 0;
2164
+ height: 0px;
2165
+ }
2166
+ .Layer__table-row.Layer__table-row--anim-starting-state td .Layer__table-cell-content {
2167
+ opacity: 0;
2168
+ padding-top: 0;
2169
+ padding-bottom: 0;
2170
+ height: 0%;
1873
2171
  }
1874
2172
  .Layer__table__empty-row {
1875
2173
  background: var(--color-base-100);
@@ -1877,6 +2175,23 @@
1877
2175
  border-top: 1px solid var(--color-base-200);
1878
2176
  border-bottom: 1px solid var(--color-base-200);
1879
2177
  }
2178
+ tbody .Layer__table__empty-row:first-child {
2179
+ display: none;
2180
+ }
2181
+ .Layer__table-row.Layer__table-row--anim-complete-state {
2182
+ height: var(--spacing-5xl);
2183
+ }
2184
+ .Layer__table-row.Layer__table-row--anim-complete-state td .Layer__table-cell-content {
2185
+ opacity: 1;
2186
+ padding-top: var(--spacing-sm);
2187
+ padding-bottom: var(--spacing-sm);
2188
+ }
2189
+ .Layer__table-wrapper--bottom-spacing {
2190
+ padding-bottom: var(--spacing-lg);
2191
+ }
2192
+ .Layer__table-wrapper--bottom-spacing .Layer__table {
2193
+ border-bottom: 1px solid var(--border-color);
2194
+ }
1880
2195
  .Layer__tabs {
1881
2196
  display: flex;
1882
2197
  width: max-content;
@@ -2115,86 +2430,63 @@
2115
2430
  display: none;
2116
2431
  }
2117
2432
  }
2118
- .Layer__view-main {
2433
+ .Layer__view .Layer__view-main {
2119
2434
  padding: var(--spacing-md) var(--spacing-lg);
2120
2435
  display: flex;
2121
2436
  flex-direction: column;
2122
2437
  gap: var(--spacing-md);
2123
2438
  container-type: inline-size;
2124
2439
  }
2125
- .Layer__view-main .Layer__toggle {
2440
+ .Layer__view .Layer__view-main .Layer__toggle {
2126
2441
  border-radius: 6px;
2127
2442
  }
2128
- .Layer__view-main .Layer__toggle .Layer__toggle-option input + span {
2443
+ .Layer__view .Layer__view-main .Layer__toggle .Layer__toggle-option input + span {
2129
2444
  border-radius: 6px;
2130
2445
  }
2131
- .Layer__view-main .Layer__toggle__thumb {
2446
+ .Layer__view .Layer__view-main .Layer__toggle__thumb {
2132
2447
  border-radius: 6px;
2133
2448
  }
2134
- .Layer__view-header {
2449
+ .Layer__view .Layer__view-header {
2135
2450
  display: flex;
2136
2451
  width: 100%;
2137
2452
  border-bottom: 1px solid var(--color-base-200);
2138
2453
  container-type: inline-size;
2454
+ position: relative;
2455
+ z-index: 1;
2139
2456
  }
2140
- .Layer__view-header__content {
2457
+ .Layer__view .Layer__view-header__content {
2141
2458
  padding: var(--spacing-lg);
2142
2459
  display: flex;
2143
2460
  align-items: center;
2144
2461
  justify-content: space-between;
2145
2462
  width: 100%;
2146
- max-width: 1406px;
2147
2463
  }
2148
- .Layer__view-header__controls {
2464
+ .Layer__view .Layer__view-header__controls {
2149
2465
  display: flex;
2150
2466
  align-items: center;
2151
2467
  }
2152
2468
  @container (max-width: 760px) {
2153
- .Layer__view-header__content {
2469
+ .Layer__view .Layer__view-header__content {
2154
2470
  flex-direction: column;
2155
2471
  align-items: flex-start;
2156
2472
  gap: var(--spacing-sm);
2157
2473
  }
2158
- .Layer__view-header__content .Layer__heading {
2474
+ .Layer__view .Layer__view-header__content .Layer__heading {
2159
2475
  align-self: flex-start;
2160
2476
  }
2161
2477
  }
2162
- .Layer__panel_view-main {
2163
- display: flex;
2164
- flex-direction: column;
2165
- gap: var(--spacing-md);
2166
- container-type: inline-size;
2478
+ .Layer__view.Layer__view--panel .Layer__view-main {
2479
+ padding: 0;
2167
2480
  }
2168
- .Layer__panel_view-header {
2169
- display: flex;
2170
- width: 100%;
2171
- border-bottom: 1px solid var(--color-base-200);
2172
- container-type: inline-size;
2481
+ .Layer__view.Layer__view--panel .Layer__view-header {
2173
2482
  position: relative;
2174
2483
  z-index: 1;
2175
2484
  }
2176
- .Layer__panel_view-header__content {
2177
- padding: var(--spacing-lg);
2178
- display: flex;
2179
- align-items: center;
2180
- justify-content: space-between;
2181
- width: 100%;
2182
- max-width: 1406px;
2183
- }
2184
- .Layer__panel_view-header__controls {
2485
+ .Layer__view.Layer__view--panel .Layer__view-header__controls {
2185
2486
  display: flex;
2186
2487
  align-items: center;
2187
2488
  gap: var(--spacing-sm);
2188
- }
2189
- @container (max-width: 760px) {
2190
- .Layer__panel_view-header__content {
2191
- flex-direction: column;
2192
- align-items: flex-start;
2193
- gap: var(--spacing-sm);
2194
- }
2195
- .Layer__panel_view-header__content .Layer__heading {
2196
- align-self: flex-start;
2197
- }
2489
+ flex-wrap: wrap;
2198
2490
  }
2199
2491
  .Layer__ledger-account__index {
2200
2492
  background-color: var(--color-base-0);
@@ -2251,25 +2543,6 @@
2251
2543
  .Layer__ledger-account__entry-details__line-items {
2252
2544
  padding: var(--spacing-md);
2253
2545
  }
2254
- .Layer__ledger-account__entry-details__table td {
2255
- padding: var(--spacing-xs) var(--spacing-md);
2256
- font-size: 12px;
2257
- color: var(--color-base-600);
2258
- }
2259
- .Layer__ledger-account__entry-details__table__total-row td {
2260
- font-variation-settings: "wght" var(--font-weight-bold);
2261
- color: var(--text-color-primary);
2262
- }
2263
- .Layer__table.Layer__ledger-account__entry-details__table th,
2264
- .Layer__ledger-account__entry-details__table__total-row td,
2265
- .Layer__table.Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header,
2266
- .Layer__table.Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header {
2267
- padding: var(--spacing-md);
2268
- }
2269
- .Layer__ledger-account__entry-details__table .Layer__table-cell--amount {
2270
- width: 128px;
2271
- box-sizing: border-box;
2272
- }
2273
2546
  .Layer__ledger-account__pagination {
2274
2547
  display: flex;
2275
2548
  justify-content: flex-end;
@@ -2360,210 +2633,28 @@
2360
2633
  padding-right: var(--spacing-md);
2361
2634
  }
2362
2635
  }
2363
- .Layer__balance-sheet {
2364
- border: 1px solid var(--border-color);
2365
- border-radius: var(--corner-radius);
2366
- background-color: var(--background-color);
2367
- }
2368
- .Layer__balance-sheet * {
2369
- font-family: var(--font-family);
2370
- font-feature-settings:
2371
- "cv10" on,
2372
- "cv01" on,
2373
- "cv05" on,
2374
- "cv08" on,
2375
- "ss03" on;
2376
- }
2377
- .Layer__balance-sheet tbody .Layer__table__empty-row:first-child {
2378
- display: none;
2379
- }
2380
- .Layer__balance-sheet .Layer__balance-sheet__title {
2381
- display: inline;
2382
- flex: 1;
2383
- font-size: var(--text-heading);
2384
- margin: 0;
2636
+ .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-default,
2637
+ .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-summation {
2638
+ background-color: var(--color-base-0);
2385
2639
  }
2386
- @container (max-width: 800px) {
2387
- .Layer__balance-sheet .Layer__balance-sheet__header {
2388
- flex-direction: column;
2389
- gap: var(--spacing-sm);
2390
- }
2640
+ .Layer__ledger-account__entry-details__table tr td:first-child {
2641
+ width: 75%;
2391
2642
  }
2392
- @container (max-width: 540px) {
2393
- .Layer__balance-sheet .Layer__balance-sheet__header {
2394
- flex-direction: row;
2395
- gap: var(--spacing-sm);
2396
- flex-wrap: wrap;
2397
- }
2398
- .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions {
2399
- flex-wrap: wrap;
2400
- }
2401
- .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions__date-picker {
2402
- flex-wrap: wrap;
2403
- gap: var(--spacing-xs);
2643
+ @container (min-width: 1400px) {
2644
+ .Layer__ledger-account__entry-details__table tr td:first-child .Layer__table-cell-content,
2645
+ .Layer__ledger-account__entry-details__table tr td:last-child .Layer__table-cell-content,
2646
+ .Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header,
2647
+ .Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header {
2648
+ padding-left: var(--spacing-lg);
2649
+ padding-right: var(--spacing-lg);
2404
2650
  }
2405
2651
  }
2406
- .Layer__balance-sheet__header {
2407
- display: flex;
2408
- flex: 1;
2409
- flex-direction: row;
2410
- padding: var(--spacing-sm) var(--spacing-md);
2411
- }
2412
- .Layer__balance-sheet__header.Layer__balance-sheet__header--no-title .Layer__balance-sheet__actions {
2413
- flex: 1;
2414
- }
2415
- .Layer__balance-sheet__header .Layer__balance-sheet__actions {
2416
- display: flex;
2417
- flex-direction: row;
2418
- justify-content: space-between;
2419
- gap: var(--spacing-xs);
2420
- }
2421
- .Layer__balance-sheet__header .Layer__balance-sheet__actions .Layer__balance-sheet__actions__date-picker {
2422
- display: flex;
2423
- flex-direction: row;
2424
- gap: var(--spacing-xs);
2425
- }
2426
- .Layer__balance-sheet__table {
2427
- width: 100%;
2428
- border-collapse: collapse;
2429
- }
2430
- .Layer__balance-sheet__table .Layer__balance-sheet-row {
2431
- font-size: 1em;
2432
- height: 52px;
2433
- }
2434
- .Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__balance-sheet-cell__value .Layer__table-cell-content {
2435
- justify-content: flex-end;
2436
- }
2437
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-0:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2438
- padding-left: 16px;
2439
- }
2440
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-0 .Layer__balance-sheet-cell__label .Layer__table-cell-content {
2441
- font-size: var(--text-lg);
2442
- font-weight: 540;
2443
- color: var(--text-color-primary);
2444
- }
2445
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1:not(.Layer__balance-sheet-row--display-children-true) {
2446
- background-color: var(--color-base-50);
2447
- }
2448
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2449
- padding-left: calc(50px - var(--spacing-sm));
2450
- }
2451
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__balance-sheet-cell__label {
2452
- padding-left: calc(34px - var(--spacing-sm));
2453
- }
2454
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__table-cell-content {
2455
- font-size: var(--text-md);
2456
- font-variation-settings: "wght" var(--font-weight-bold);
2457
- color: var(--color-base-700);
2458
- }
2459
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2:not(.Layer__balance-sheet-row--display-children-true) {
2460
- background-color: var(--color-base-50);
2461
- }
2462
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2463
- padding-left: calc(80px - var(--spacing-sm));
2464
- }
2465
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__balance-sheet-cell__label {
2466
- padding-left: calc(64px - var(--spacing-sm));
2467
- }
2468
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__table-cell-content {
2469
- font-size: var(--text-md);
2470
- font-weight: 460;
2471
- color: var(--text-color-secondary);
2472
- }
2473
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3:not(.Layer__balance-sheet-row--display-children-true) {
2474
- background-color: var(--color-base-50);
2475
- }
2476
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2477
- padding-left: calc(104px - var(--spacing-sm));
2478
- }
2479
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3 .Layer__balance-sheet-cell__label {
2480
- padding-left: calc(88px - var(--spacing-sm));
2481
- }
2482
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3 .Layer__table-cell-content {
2483
- font-size: var(--text-md);
2484
- font-weight: 460;
2485
- color: var(--text-color-secondary);
2486
- }
2487
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4:not(.Layer__balance-sheet-row--display-children-true) {
2488
- background-color: var(--color-base-50);
2489
- }
2490
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2491
- padding-left: calc(130px - var(--spacing-sm));
2492
- }
2493
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4 .Layer__balance-sheet-cell__label {
2494
- padding-left: calc(114px - var(--spacing-sm));
2495
- }
2496
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4 .Layer__table-cell-content {
2497
- font-size: var(--text-md);
2498
- font-weight: 460;
2499
- color: var(--text-color-secondary);
2500
- }
2501
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-true {
2502
- font-weight: bold;
2503
- cursor: pointer;
2504
- }
2505
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-false {
2506
- font-weight: normal;
2507
- }
2508
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation {
2509
- background: var(--color-base-100) !important;
2510
- }
2511
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation .Layer__table-cell-content {
2512
- font-size: var(--text-md);
2513
- font-variation-settings: "wght" var(--font-weight-bold);
2514
- color: var(--text-color-primary);
2515
- }
2516
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--expanded svg {
2517
- transform: rotate(0deg);
2518
- }
2519
- .Layer__balance-sheet__table .Layer__table-cell--last {
2520
- text-align: right;
2521
- }
2522
- .Layer__balance-sheet__table .Layer__table-cell__content-wrapper {
2523
- display: flex;
2524
- align-items: center;
2525
- }
2526
- .Layer__balance-sheet__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
2527
- margin: 0;
2528
- transition: transform var(--transition-speed);
2529
- transform: rotate(-90deg);
2530
- }
2531
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__label {
2532
- position: relative;
2533
- }
2534
- .Layer__balance-sheet__table .Layer__table-cell__active {
2535
- display: none;
2536
- width: 4px;
2537
- height: 100%;
2538
- position: absolute;
2539
- background: var(--color-base-400);
2540
- left: 0;
2541
- top: 0;
2542
- }
2543
- .Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__table-cell__active {
2544
- display: none;
2545
- }
2546
- .Layer__balance-sheet__table .Layer__balance-sheet-row:not(.Layer__balance-sheet-row--display-children-true) .Layer__table-cell__active {
2547
- display: block;
2548
- }
2549
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__label .Layer__table-cell-content {
2550
- padding-left: 0;
2551
- }
2552
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__value--positive .Layer__table-cell-content::before {
2553
- content: "$";
2554
- }
2555
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__value--negative .Layer__table-cell-content::before {
2556
- content: "-$";
2557
- }
2558
- .Layer__statement-of-cash-flow {
2652
+ .Layer__balance-sheet {
2559
2653
  border: 1px solid var(--border-color);
2560
2654
  border-radius: var(--corner-radius);
2561
2655
  background-color: var(--background-color);
2562
2656
  }
2563
- .Layer__statement-of-cash-flow .Layer__panel_view-header__controls {
2564
- gap: 0;
2565
- }
2566
- .Layer__statement-of-cash-flow * {
2657
+ .Layer__balance-sheet * {
2567
2658
  font-family: var(--font-family);
2568
2659
  font-feature-settings:
2569
2660
  "cv10" on,
@@ -2572,182 +2663,74 @@
2572
2663
  "cv08" on,
2573
2664
  "ss03" on;
2574
2665
  }
2575
- .Layer__statement-of-cash-flow tbody .Layer__table__empty-row:first-child {
2576
- display: none;
2577
- }
2578
- .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__title {
2666
+ .Layer__balance-sheet .Layer__balance-sheet__title {
2579
2667
  display: inline;
2580
- flex: 1;
2581
- font-size: var(--text-heading);
2582
- margin: 0;
2583
- }
2584
- @container (max-width: 800px) {
2585
- .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header {
2586
- flex-direction: column;
2587
- gap: var(--spacing-sm);
2588
- }
2589
- }
2590
- @container (max-width: 540px) {
2591
- .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header {
2592
- flex-direction: row;
2593
- gap: var(--spacing-sm);
2594
- flex-wrap: wrap;
2595
- }
2596
- .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions {
2597
- flex-wrap: wrap;
2598
- }
2599
- .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions__date-picker {
2600
- flex-wrap: wrap;
2601
- gap: var(--spacing-xs);
2602
- }
2603
- }
2604
- @container (min-width: 1400px) {
2605
- .Layer__statement-of-cash-flow .Layer__table tr td:first-child .Layer__table-cell-content,
2606
- .Layer__statement-of-cash-flow .Layer__table tr td:last-child .Layer__table-cell-content,
2607
- .Layer__statement-of-cash-flow .Layer__table tr th:first-child.Layer__table-header,
2608
- .Layer__statement-of-cash-flow .Layer__table tr th:last-child.Layer__table-header {
2609
- padding-left: 0;
2610
- }
2611
- }
2612
- .Layer__statement-of-cash-flow__header {
2613
- display: flex;
2614
- flex: 1;
2615
- flex-direction: row;
2616
- padding: var(--spacing-sm) var(--spacing-md);
2617
- }
2618
- .Layer__statement-of-cash-flow__header.Layer__statement-of-cash-flow__header--no-title .Layer__statement-of-cash-flow__actions {
2619
- flex: 1;
2620
- }
2621
- .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions {
2622
- display: flex;
2623
- flex-direction: row;
2624
- justify-content: space-between;
2625
- gap: var(--spacing-xs);
2626
- }
2627
- .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions .Layer__statement-of-cash-flow__actions__date-picker {
2628
- display: flex;
2629
- flex-direction: row;
2630
- gap: var(--spacing-xs);
2631
- }
2632
- .Layer__statement-of-cash-flow__table {
2633
- width: 100%;
2634
- border-collapse: collapse;
2635
- }
2636
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row {
2637
- font-size: 1em;
2638
- height: 52px;
2639
- }
2640
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row .Layer__statement-of-cash-flow-cell__value .Layer__table-cell-content {
2641
- justify-content: flex-end;
2642
- }
2643
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-0:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2644
- padding-left: 16px;
2645
- }
2646
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-0 .Layer__statement-of-cash-flow-cell__label .Layer__table-cell-content {
2647
- font-size: var(--text-lg);
2648
- font-weight: 540;
2649
- color: var(--text-color-primary);
2650
- }
2651
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-0.Layer__statement-of-cash-flow-row--variant-summation .Layer__table-cell-content {
2652
- font-size: var(--text-md);
2653
- }
2654
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2655
- background-color: var(--color-base-50);
2656
- }
2657
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2658
- padding-left: calc(50px - var(--spacing-sm));
2659
- }
2660
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1 .Layer__statement-of-cash-flow-cell__label {
2661
- padding-left: calc(34px - var(--spacing-sm));
2662
- }
2663
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1 .Layer__table-cell-content {
2664
- font-size: var(--text-md);
2665
- font-variation-settings: "wght" var(--font-weight-bold);
2666
- color: var(--color-base-700);
2667
- }
2668
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2669
- background-color: var(--color-base-50);
2670
- }
2671
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2672
- padding-left: calc(80px - var(--spacing-sm));
2673
- }
2674
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2 .Layer__statement-of-cash-flow-cell__label {
2675
- padding-left: calc(64px - var(--spacing-sm));
2676
- }
2677
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2 .Layer__table-cell-content {
2678
- font-size: var(--text-md);
2679
- font-weight: 460;
2680
- color: var(--text-color-secondary);
2681
- }
2682
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2683
- background-color: var(--color-base-50);
2684
- }
2685
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2686
- padding-left: calc(104px - var(--spacing-sm));
2687
- }
2688
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3 .Layer__statement-of-cash-flow-cell__label {
2689
- padding-left: calc(88px - var(--spacing-sm));
2690
- }
2691
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3 .Layer__table-cell-content {
2692
- font-size: var(--text-md);
2693
- font-weight: 460;
2694
- color: var(--text-color-secondary);
2695
- }
2696
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2697
- background-color: var(--color-base-50);
2698
- }
2699
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2700
- padding-left: calc(130px - var(--spacing-sm));
2701
- }
2702
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4 .Layer__statement-of-cash-flow-cell__label {
2703
- padding-left: calc(114px - var(--spacing-sm));
2704
- }
2705
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4 .Layer__table-cell-content {
2706
- font-size: var(--text-md);
2707
- font-weight: 460;
2708
- color: var(--text-color-secondary);
2668
+ flex: 1;
2669
+ font-size: var(--text-heading);
2670
+ margin: 0;
2709
2671
  }
2710
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--display-children-true {
2711
- font-weight: bold;
2712
- cursor: pointer;
2672
+ .Layer__statement-of-cash-flow {
2673
+ border: 1px solid var(--border-color);
2674
+ border-radius: var(--corner-radius);
2675
+ background-color: var(--background-color);
2713
2676
  }
2714
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--display-children-false {
2715
- font-weight: normal;
2677
+ .Layer__statement-of-cash-flow .Layer__panel_view-header__controls {
2678
+ gap: 0;
2716
2679
  }
2717
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--variant-summation {
2718
- background: var(--color-base-100);
2680
+ .Layer__statement-of-cash-flow * {
2681
+ font-family: var(--font-family);
2682
+ font-feature-settings:
2683
+ "cv10" on,
2684
+ "cv01" on,
2685
+ "cv05" on,
2686
+ "cv08" on,
2687
+ "ss03" on;
2719
2688
  }
2720
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--variant-summation .Layer__table-cell-content {
2721
- font-size: var(--text-md);
2722
- font-variation-settings: "wght" var(--font-weight-bold);
2723
- color: var(--text-color-primary);
2689
+ .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__title {
2690
+ display: inline;
2691
+ flex: 1;
2692
+ font-size: var(--text-heading);
2693
+ margin: 0;
2724
2694
  }
2725
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--expanded svg {
2726
- transform: rotate(0deg);
2695
+ @container (max-width: 800px) {
2696
+ .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header {
2697
+ flex-direction: column;
2698
+ gap: var(--spacing-sm);
2699
+ }
2727
2700
  }
2728
- .Layer__statement-of-cash-flow__table .Layer__table-cell--last {
2729
- text-align: right;
2701
+ @container (max-width: 540px) {
2702
+ .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header {
2703
+ flex-direction: row;
2704
+ gap: var(--spacing-sm);
2705
+ flex-wrap: wrap;
2706
+ }
2707
+ .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions {
2708
+ flex-wrap: wrap;
2709
+ }
2710
+ .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions__date-picker {
2711
+ flex-wrap: wrap;
2712
+ gap: var(--spacing-xs);
2713
+ }
2730
2714
  }
2731
- .Layer__statement-of-cash-flow__table .Layer__table-cell__content-wrapper {
2715
+ .Layer__statement-of-cash-flow__header {
2732
2716
  display: flex;
2733
- align-items: center;
2734
- }
2735
- .Layer__statement-of-cash-flow__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
2736
- margin: 0;
2737
- transition: transform var(--transition-speed);
2738
- transform: rotate(-90deg);
2739
- }
2740
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__label {
2741
- position: relative;
2717
+ flex: 1;
2718
+ flex-direction: row;
2719
+ padding: var(--spacing-sm) var(--spacing-md);
2742
2720
  }
2743
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__label .Layer__table-cell-content {
2744
- padding-left: 0;
2721
+ .Layer__statement-of-cash-flow__header.Layer__statement-of-cash-flow__header--no-title .Layer__statement-of-cash-flow__actions {
2722
+ flex: 1;
2745
2723
  }
2746
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__value--positive .Layer__table-cell-content::before {
2747
- content: "$";
2724
+ .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions {
2725
+ display: flex;
2726
+ flex-direction: row;
2727
+ justify-content: space-between;
2728
+ gap: var(--spacing-xs);
2748
2729
  }
2749
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__value--negative .Layer__table-cell-content::before {
2750
- content: "-$";
2730
+ .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions .Layer__statement-of-cash-flow__actions__date-picker {
2731
+ display: flex;
2732
+ flex-direction: row;
2733
+ gap: var(--spacing-xs);
2751
2734
  }
2752
2735
  .Layer__bank-transactions {
2753
2736
  max-width: var(--max-component-width);
@@ -2760,6 +2743,7 @@
2760
2743
  }
2761
2744
  .Layer__bank-transactions__header {
2762
2745
  position: sticky;
2746
+ z-index: 10;
2763
2747
  left: 0;
2764
2748
  display: flex;
2765
2749
  width: 100%;
@@ -3201,6 +3185,7 @@
3201
3185
  min-width: 150px;
3202
3186
  box-sizing: border-box;
3203
3187
  z-index: 2;
3188
+ text-align: right;
3204
3189
  box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
3205
3190
  }
3206
3191
  .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
@@ -3214,15 +3199,12 @@
3214
3199
  z-index: 2;
3215
3200
  }
3216
3201
  .Layer__bank-transactions__date-col {
3217
- min-width: 130px;
3218
- width: 130px;
3219
- max-width: 130px;
3202
+ min-width: 140px;
3203
+ width: 140px;
3204
+ max-width: 140px;
3220
3205
  box-sizing: border-box;
3221
3206
  }
3222
3207
  .Layer__bank-transactions__tx-col {
3223
- min-width: 125px;
3224
- width: 180px;
3225
- max-width: 280px;
3226
3208
  box-sizing: border-box;
3227
3209
  }
3228
3210
  .Layer__bank-transactions__tx-text {
@@ -3862,6 +3844,13 @@
3862
3844
  border-right-color: transparent;
3863
3845
  }
3864
3846
  }
3847
+ .Layer__bank-transaction-row--removing .Layer__table-cell-content {
3848
+ max-height: 0px;
3849
+ top: 1px;
3850
+ padding-top: 0;
3851
+ padding-bottom: 0;
3852
+ overflow: hidden;
3853
+ }
3865
3854
  .Layer__bank-transactions__mobile-list {
3866
3855
  padding: 0;
3867
3856
  margin: 0;
@@ -4625,9 +4614,7 @@
4625
4614
  display: flex;
4626
4615
  align-items: center;
4627
4616
  justify-content: flex-end;
4628
- }
4629
- .Layer__journal__form__input-group .Layer__datepicker__time {
4630
- margin-left: var(--spacing-sm);
4617
+ gap: var(--spacing-xs);
4631
4618
  }
4632
4619
  .Layer__journal__form__input-group .Layer__input-label {
4633
4620
  padding: 0;
@@ -4784,10 +4771,22 @@
4784
4771
  .Layer__chevron__up--counterclockwise {
4785
4772
  transform: rotate(-180deg);
4786
4773
  }
4774
+ .Layer__icon-box {
4775
+ width: 32px;
4776
+ height: 32px;
4777
+ background-color: var(--color-base-0);
4778
+ border-radius: var(--border-radius-3xs);
4779
+ display: inline-flex;
4780
+ align-items: center;
4781
+ justify-content: center;
4782
+ color: var(--color-base-1000);
4783
+ }
4787
4784
  .Layer__linked-accounts {
4788
4785
  min-height: 150px;
4789
4786
  box-sizing: border-box;
4790
4787
  overflow: visible;
4788
+ z-index: 1;
4789
+ max-width: var(--max-component-width);
4791
4790
  }
4792
4791
  .Layer__linked-accounts::-webkit-scrollbar {
4793
4792
  display: none;
@@ -4808,7 +4807,6 @@
4808
4807
  .Layer__linked-accounts__list {
4809
4808
  padding: var(--spacing-md);
4810
4809
  display: flex;
4811
- max-width: 1000px;
4812
4810
  flex-wrap: wrap;
4813
4811
  align-items: stretch;
4814
4812
  gap: var(--spacing-md);
@@ -5070,18 +5068,16 @@
5070
5068
  flex-direction: column;
5071
5069
  height: 100%;
5072
5070
  overflow: hidden;
5073
- padding: var(--spacing-md) var(--spacing-lg);
5074
- gap: var(--spacing-md);
5075
- max-width: 480px;
5071
+ border-radius: 8px;
5072
+ box-shadow: 0px 0px 0px 1px var(--color-base-300);
5073
+ background-color: var(--color-base-0);
5076
5074
  }
5077
5075
  .Layer__tasks-component .Layer__tasks-pending {
5078
5076
  display: flex;
5079
5077
  align-items: center;
5080
5078
  justify-content: space-between;
5081
- padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
5079
+ padding: var(--spacing-md) var(--spacing-lg);
5082
5080
  border-radius: 8px;
5083
- background-color: var(--color-base-0);
5084
- box-shadow: 0px 0px 0px 1px var(--color-base-300);
5085
5081
  }
5086
5082
  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
5087
5083
  display: flex;
@@ -5089,8 +5085,8 @@
5089
5085
  gap: var(--spacing-xs);
5090
5086
  font-weight: 540;
5091
5087
  padding: var(--spacing-xs);
5092
- border-radius: 8px;
5093
5088
  background-color: var(--color-base-50);
5089
+ border-radius: 8px;
5094
5090
  }
5095
5091
  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
5096
5092
  transform: rotate(90deg);
@@ -5102,18 +5098,35 @@
5102
5098
  color: var(--color-warning);
5103
5099
  }
5104
5100
  .Layer__tasks-component .Layer__tasks-header {
5101
+ min-height: 36px;
5102
+ display: flex;
5103
+ align-items: center;
5104
+ justify-content: space-between;
5105
+ gap: var(--spacing-md);
5106
+ padding: var(--spacing-md) var(--spacing-lg);
5107
+ border-bottom: 1px solid var(--color-base-300);
5108
+ }
5109
+ .Layer__tasks-component .Layer__tasks-header__left-col {
5105
5110
  display: flex;
5106
5111
  align-items: center;
5107
5112
  justify-content: flex-start;
5108
5113
  gap: var(--spacing-md);
5109
5114
  }
5115
+ .Layer__tasks-component .Layer__tasks__content {
5116
+ max-height: 1000px;
5117
+ opacity: 1;
5118
+ transition: max-height 0.18s ease-out, opacity 0.2s ease-out;
5119
+ }
5120
+ .Layer__tasks-component .Layer__tasks__content.Layer__tasks__content--collapsed {
5121
+ opacity: 0.3;
5122
+ max-height: 0;
5123
+ }
5110
5124
  .Layer__tasks-component .Layer__tasks-list {
5111
- border-radius: 8px;
5112
5125
  background-color: var(--color-base-0);
5113
5126
  box-shadow: 0px 0px 0px 1px var(--color-base-300);
5114
5127
  }
5115
5128
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper {
5116
- padding: var(--spacing-xs);
5129
+ padding: var(--spacing-2xs);
5117
5130
  }
5118
5131
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper:not(:last-child) {
5119
5132
  border-bottom: 1px solid var(--color-base-300);
@@ -5132,7 +5145,7 @@
5132
5145
  align-items: center;
5133
5146
  justify-content: space-between;
5134
5147
  gap: var(--spacing-xs);
5135
- padding: var(--spacing-sm);
5148
+ padding: var(--spacing-md);
5136
5149
  }
5137
5150
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info {
5138
5151
  display: flex;
@@ -5158,8 +5171,8 @@
5158
5171
  background: var(--color-info-warning-bg);
5159
5172
  }
5160
5173
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
5161
- padding-right: var(--spacing-sm);
5162
- padding-left: var(--spacing-sm);
5174
+ padding-right: var(--spacing-md);
5175
+ padding-left: var(--spacing-md);
5163
5176
  padding-bottom: 0;
5164
5177
  height: 0;
5165
5178
  opacity: 0;
@@ -5214,14 +5227,35 @@
5214
5227
  justify-content: flex-end;
5215
5228
  padding: var(--spacing-md) var(--spacing-sm);
5216
5229
  margin: 0 var(--spacing-xs);
5230
+ isolation: isolate;
5217
5231
  }
5218
5232
  .Layer__tasks-component .Layer__tasks__pagination ul {
5219
5233
  margin: 0;
5220
5234
  }
5235
+ .Layer__tasks__expand-icon {
5236
+ transition: transform 150ms ease-out;
5237
+ color: var(--color-base-600);
5238
+ margin-left: -15px;
5239
+ }
5221
5240
  @media screen and (max-width: 400px) {
5222
5241
  .Layer__tasks-component {
5223
5242
  padding: var(--spacing-xs) var(--spacing-sm);
5224
5243
  }
5244
+ .Layer__tasks-component .Layer__tasks-pending {
5245
+ flex-direction: column;
5246
+ align-items: stretch;
5247
+ gap: var(--spacing-xs);
5248
+ padding: var(--spacing-md) 0;
5249
+ }
5250
+ .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
5251
+ justify-content: space-between;
5252
+ }
5253
+ .Layer__tasks-component .Layer__badge {
5254
+ white-space: nowrap;
5255
+ }
5256
+ .Layer__tasks-component .Layer__tasks-header {
5257
+ padding: var(--spacing-md) 0;
5258
+ }
5225
5259
  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
5226
5260
  padding: var(--spacing-xs);
5227
5261
  }
@@ -5289,6 +5323,7 @@
5289
5323
  .Layer__panel {
5290
5324
  flex: 1;
5291
5325
  display: flex;
5326
+ align-items: start;
5292
5327
  height: 100%;
5293
5328
  }
5294
5329
  .Layer__panel__content {
@@ -5305,9 +5340,9 @@
5305
5340
  .Layer__panel .Layer__panel__content .Layer__component-header {
5306
5341
  position: sticky;
5307
5342
  top: 0;
5343
+ z-index: auto;
5308
5344
  background: rgba(255, 255, 255, 0.5);
5309
5345
  backdrop-filter: blur(6px);
5310
- z-index: 1;
5311
5346
  border-top-left-radius: var(--border-radius-sm);
5312
5347
  border-top-right-radius: var(--border-radius-sm);
5313
5348
  }
@@ -5317,7 +5352,6 @@
5317
5352
  position: -webkit-sticky;
5318
5353
  position: sticky;
5319
5354
  max-height: 0;
5320
- z-index: 1;
5321
5355
  top: 0;
5322
5356
  overflow-x: hidden;
5323
5357
  transition: max-width 180ms ease-in-out;
@@ -5332,6 +5366,14 @@
5332
5366
  opacity: 0.2;
5333
5367
  transition: opacity 180ms ease-in-out;
5334
5368
  }
5369
+ .Layer__panel__sidebar--default {
5370
+ max-width: none;
5371
+ width: 100%;
5372
+ flex: 1;
5373
+ }
5374
+ .Layer__panel__sidebar--default .Layer__panel__sidebar-content {
5375
+ width: 100%;
5376
+ }
5335
5377
  .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
5336
5378
  max-width: 480px;
5337
5379
  margin-left: -1px;
@@ -5375,6 +5417,98 @@
5375
5417
  width: 100%;
5376
5418
  }
5377
5419
  }
5420
+ .Layer__date-picker {
5421
+ position: relative;
5422
+ display: inline-block;
5423
+ }
5424
+ .Layer__date-picker .Layer__dropdown-toggle {
5425
+ box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
5426
+ border-radius: var(--spacing-2xs);
5427
+ padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
5428
+ min-height: var(--spacing-2xl);
5429
+ min-width: 180px;
5430
+ cursor: pointer;
5431
+ text-align: left;
5432
+ padding-left: var(--spacing-lm);
5433
+ gap: 20px;
5434
+ border: 1px solid transparent;
5435
+ background-color: var(--color-white);
5436
+ font-size: 14px;
5437
+ display: flex;
5438
+ align-items: center;
5439
+ justify-content: space-between;
5440
+ }
5441
+ .Layer__date-picker .Layer__dropdown-toggle .Layer__chevron {
5442
+ display: flex;
5443
+ transition: transform 0.3s ease;
5444
+ }
5445
+ .Layer__date-picker .Layer__dropdown-toggle .Layer__chevron.open {
5446
+ transform: rotate(180deg);
5447
+ }
5448
+ .Layer__date-picker .Layer__dropdown-menu {
5449
+ margin-top: 5px;
5450
+ position: absolute;
5451
+ top: 100%;
5452
+ left: 0;
5453
+ box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
5454
+ border-radius: var(--spacing-2xs);
5455
+ background-color: var(--color-white);
5456
+ width: 256px;
5457
+ z-index: 1000;
5458
+ opacity: 0;
5459
+ animation: fadeIn 0.3s forwards;
5460
+ }
5461
+ @keyframes fadeIn {
5462
+ to {
5463
+ opacity: 1;
5464
+ }
5465
+ }
5466
+ .Layer__date-picker .Layer__dropdown-menu .Layer__view-options {
5467
+ padding: var(--spacing-xs);
5468
+ margin-bottom: var(--spacing-4xs);
5469
+ }
5470
+ .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper {
5471
+ border-top: 1px solid var(--color-base-200);
5472
+ padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
5473
+ }
5474
+ .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper:first-child {
5475
+ border-top: transparent;
5476
+ }
5477
+ .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options {
5478
+ display: grid;
5479
+ grid-template-columns: 2fr 2fr;
5480
+ }
5481
+ .Layer__date-picker .Layer__option {
5482
+ cursor: pointer;
5483
+ display: flex;
5484
+ justify-content: space-between;
5485
+ align-items: center;
5486
+ font-size: 14px;
5487
+ padding: 0px var(--spacing-xs);
5488
+ max-height: 28px;
5489
+ min-height: 28px;
5490
+ }
5491
+ .Layer__date-picker .Layer__option:hover {
5492
+ border-radius: var(--spacing-3xs);
5493
+ background: var(--color-base-100);
5494
+ max-width: max-content;
5495
+ }
5496
+ .Layer__date-picker .Layer__option.Layer__selected {
5497
+ border-radius: var(--spacing-3xs);
5498
+ background: var(--color-base-100);
5499
+ max-width: max-content;
5500
+ }
5501
+ .Layer__date-picker .Layer__option .Layer__tick {
5502
+ margin-left: 10px;
5503
+ padding-top: 2px;
5504
+ color: var(--color-base-900);
5505
+ }
5506
+ .Layer__date-picker .Layer__compare-header {
5507
+ color: var(--color-base-500);
5508
+ font-size: 11px;
5509
+ padding: 0 0 var(--spacing-sm) var(--spacing-xs);
5510
+ position: relative;
5511
+ }
5378
5512
  .Layer__pill {
5379
5513
  position: relative;
5380
5514
  background-color: var(--badge-bg-color);
@@ -6256,10 +6390,15 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6256
6390
  width: calc(25% - 12px);
6257
6391
  height: 56px;
6258
6392
  }
6393
+ .Layer__accounting-overview-profit-and-loss-charts {
6394
+ display: flex;
6395
+ gap: var(--spacing-md);
6396
+ max-width: 1406px;
6397
+ }
6259
6398
  .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
6260
6399
  margin-top: -42px;
6261
6400
  }
6262
- .accounting-overview-profit-and-loss-charts > .Layer__toggle {
6401
+ .Layer__accounting-overview-profit-and-loss-charts > .Layer__toggle {
6263
6402
  display: none;
6264
6403
  }
6265
6404
  @container (max-width: 1023px) {
@@ -6278,10 +6417,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6278
6417
  .Layer__accounting-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
6279
6418
  width: 100%;
6280
6419
  }
6281
- .accounting-overview-profit-and-loss-charts {
6420
+ .Layer__accounting-overview-profit-and-loss-charts {
6282
6421
  flex-direction: column;
6283
6422
  }
6284
- .accounting-overview-profit-and-loss-charts > .Layer__toggle {
6423
+ .Layer__accounting-overview-profit-and-loss-charts > .Layer__toggle {
6285
6424
  display: flex;
6286
6425
  }
6287
6426
  .Layer__component.Layer__accounting-overview-profit-and-loss-chart.accounting-overview-profit-and-loss-chart--hidden {
@@ -6293,6 +6432,74 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6293
6432
  margin-top: -12px;
6294
6433
  }
6295
6434
  }
6435
+ .Layer__bookkeeping-overview--view .Layer__panel .Layer__panel__content .Layer__component-header {
6436
+ z-index: 1;
6437
+ }
6438
+ .Layer__bookkeeping-overview--view .Layer__panel.Layer__panel--open .Layer__panel__content {
6439
+ border-right: none;
6440
+ }
6441
+ .Layer__bookkeeping-overview--view .Layer__panel__sidebar {
6442
+ padding: var(--spacing-md) var(--spacing-lg);
6443
+ border-left: none;
6444
+ background: none;
6445
+ }
6446
+ @media screen and (min-width: 1100px) {
6447
+ .Layer__bookkeeping-overview--view .Layer__panel__content {
6448
+ max-width: 1406px;
6449
+ }
6450
+ .Layer__bookkeeping-overview--view .Layer__view-main {
6451
+ padding-right: 0;
6452
+ }
6453
+ }
6454
+ .Layer__bookkeeping-overview__summaries-row {
6455
+ display: flex;
6456
+ align-items: center;
6457
+ gap: var(--spacing-md);
6458
+ max-width: 1406px;
6459
+ padding: var(--spacing-md);
6460
+ }
6461
+ .Layer__bookkeeping-overview__summaries-row .Layer__notification-card {
6462
+ width: calc(25% - 12px);
6463
+ height: 56px;
6464
+ }
6465
+ .Layer__bookkeeping-overview-profit-and-loss-charts {
6466
+ display: flex;
6467
+ flex-direction: column;
6468
+ gap: var(--spacing-md);
6469
+ max-width: 1406px;
6470
+ }
6471
+ .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
6472
+ display: none;
6473
+ }
6474
+ .Layer__bookkeeping-overview-profit-and-loss .recharts-legend-wrapper {
6475
+ top: 16px !important;
6476
+ }
6477
+ .Layer__component.Layer__bookkeeping-overview-profit-and-loss-chart.bookkeeping-overview-profit-and-loss-chart--hidden {
6478
+ display: none;
6479
+ }
6480
+ @container (max-width: 796px) {
6481
+ .Layer__bookkeeping-overview__summaries-row {
6482
+ flex-direction: column;
6483
+ }
6484
+ .Layer__bookkeeping-overview__summaries-row .Layer__profit-and-loss-summaries {
6485
+ width: 100%;
6486
+ flex-direction: column;
6487
+ }
6488
+ .Layer__bookkeeping-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
6489
+ width: 100%;
6490
+ }
6491
+ .Layer__bookkeeping-overview-profit-and-loss-charts {
6492
+ flex-direction: column;
6493
+ }
6494
+ .Layer__bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
6495
+ display: flex;
6496
+ }
6497
+ }
6498
+ @container (max-width: 460px) {
6499
+ .Layer__component.Layer__bookkeeping-overview-profit-and-loss .recharts-responsive-container {
6500
+ margin-top: -12px;
6501
+ }
6502
+ }
6296
6503
  .Layer__reports .Layer__panel__content {
6297
6504
  border-radius: var(--border-radius-sm);
6298
6505
  }