@wavemaker/app-runtime-wm-build 12.0.0-next.45052 → 12.0.0-next.45057

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.
@@ -707,6 +707,28 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
707
707
  --wm-datepicker-date-hover-state-layer-opacity: var(--wm-opacity-hover);
708
708
  --wm-datepicker-date-focus-state-layer-opacity: var(--wm-opacity-focus);
709
709
  --wm-datepicker-date-active-state-layer-opacity: var(--wm-opacity-active);
710
+ /* dropdown menu variables */
711
+ --wm-dropdown-menu-background: var(--wm-color-surface);
712
+ --wm-dropdown-menu-border-radius: var(--wm-radius-xs);
713
+ --wm-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
714
+ --wm-dropdown-menu-horizontal-padding: var(--wm-space-0) var(--wm-space-2);
715
+ --wm-dropdown-menu-vertical-padding: var(--wm-space-2) var(--wm-space-0);
716
+ --wm-dropdown-menu-width: 220px;
717
+ --wm-dropdown-menu-caret-size: var(--wm-icon-size-sm);
718
+ --wm-dropdown-menu-vertical-inline-submenu-padding: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-4);
719
+ --wm-dropdown-menu-horizontal-inline-submenu-padding: var(--wm-space-0);
720
+ --wm-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
721
+ --wm-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
722
+ --wm-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
723
+ --wm-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
724
+ --wm-dropdown-menu-item-letter-spacing: var(--wm-body-large-letter-spacing);
725
+ --wm-dropdown-menu-item-color: var(--wm-color-on-surface);
726
+ --wm-dropdown-menu-item-gap: var(--wm-space-3);
727
+ --wm-dropdown-menu-item-padding: var(--wm-space-3) var(--wm-space-4);
728
+ --wm-dropdown-menu-item-state-layer-color: var(--wm-color-on-surface);
729
+ --wm-dropdown-menu-item-hover-state-layer-opacity: var(--wm-opacity-hover);
730
+ --wm-dropdown-menu-item-focus-state-layer-opacity: var(--wm-opacity-focus);
731
+ --wm-dropdown-menu-item-active-state-layer-opacity: var(--wm-opacity-active);
710
732
  /*--file upload--*/
711
733
  --wm-file-upload-status-padding: var(--wm-space-2);
712
734
  --wm-file-upload-status-border-color: var(--wm-border-color);
@@ -842,50 +864,125 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
842
864
  --wm-header-shadow: inset 0px 0px 0 0 var(--wm-color-secondary);
843
865
  --wm-header-padding: 0;
844
866
  --wm-header-logo-height: 50px;
845
- --wm-page-content: var(--wm-space-0) var(--wm-space-2);
867
+ --wm-page-content: var(--wm-space-0);
846
868
  --wm-header-link-size: var(--wm-h4-font-size);
847
869
  --wm-header-link-color: var(--wm-background-light);
848
870
  --wm-header-link-color-hover: var(--wm-background-light);
849
871
  --wm-header-link-color-active: var(--wm-background-light);
850
872
  --wm-header-leftnav-toggle-width: 50px;
851
873
  /*--app top nav--*/
874
+ --wm-top-nav-background: none;
875
+ --wm-top-nav-color: none;
852
876
  --wm-top-nav-box-shadow: none;
853
877
  --wm-top-nav-z-index: 3;
854
878
  /*--app left panel/nav--*/
855
- --wm-left-nav-background: var(--wm-color-surface-container-low);
856
- --wm-left-nav-color: var(--wm-color-on-surface-variant);
857
- --wm-left-nav-padding-top: var(--wm-space-3);
858
- --wm-left-nav-padding-right: var(--wm-space-3);
859
- --wm-left-nav-padding-bottom: var(--wm-space-3);
860
- --wm-left-nav-padding-left: var(--wm-space-3);
861
- /*--app right panel/nav--*/
862
- --wm-right-nav-background: var(--wm-color-surface-container-low);
863
- --wm-right-nav-color: var(--wm-color-on-surface-variant);
864
- --wm-right-nav-padding-top: var(--wm-space-3);
865
- --wm-right-nav-padding-right: var(--wm-space-3);
866
- --wm-right-nav-padding-bottom: var(--wm-space-3);
867
- --wm-right-nav-padding-left: var(--wm-space-3);
868
- --wm-aside-panel-width: 262px;
869
- --wm-aside-panel-link-height: 38px;
870
- --wm-aside-panel-collapsible-width: 0px;
871
- --wm-aside-separator-color: var(--wm-color-light-grey-500);
872
- --wm-aside-panel-shadow: none;
873
- --wm-aside-panel-link-spacing: var(--wm-space-2) var(--wm-space-3);
874
- --wm-aside-panel-link-color: var(--wm-text-color);
875
- --wm-aside-panel-link-hover-color: var(--wm-color-primary-60);
876
- --wm-aside-panel-link-active-color: var(--wm-color-primary);
877
- --wm-aside-panel-link-bg-color: var(--wm-color-contrast-light);
878
- --wm-aside-panel-link-hover-bg-color: var(--wm-color-contrast-light);
879
- --wm-aside-panel-link-active-bg-color: var(--wm-color-primary-10);
880
- --wm-aside-panel-link-font-size: var(--wm-font-size-base);
881
- --wm-aside-panel-link-icon-size: var(--wm-icon-size-sm);
882
- --wm-aside-panel-link-icon-color: var(--wm-text-color);
883
- --wm-aside-panel-link-icon-hover-color: var(--wm-color-primary-60);
884
- --wm-aside-panel-link-icon-active-color: var(--wm-color-primary);
885
- --wm-aside-panel-link-indicator-active-color: transparent;
879
+ --wm-aside-panel-width: 260px;
880
+ --wm-aside-panel-background: var(--wm-color-surface-container-low);
881
+ --wm-aside-panel-color: var(--wm-color-on-surface-variant);
882
+ --wm-aside-panel-padding-top: var(--wm-space-3);
883
+ --wm-aside-panel-padding-right: var(--wm-space-3);
884
+ --wm-aside-panel-padding-bottom: var(--wm-space-3);
885
+ --wm-aside-panel-padding-left: var(--wm-space-3);
886
+ --wm-aside-nav-padding: var(--wm-space-0);
887
+ --wm-aside-nav-background: var(--wm-aside-panel-background);
888
+ --wm-aside-nav-color: var(--wm-aside-panel-color);
889
+ --wm-aside-nav-gap: var(--wm-space-0);
890
+ --wm-aside-nav-item-min-height: 56px;
891
+ --wm-aside-nav-item-padding: var(--wm-space-2) var(--wm-space-6);
892
+ --wm-aside-nav-item-font-size: var(--wm-label-large-font-size);
893
+ --wm-aside-nav-item-font-family: var(--wm-label-large-font-family);
894
+ --wm-aside-nav-item-font-weight: var(--wm-label-large-font-weight);
895
+ --wm-aside-nav-item-line-height: var(--wm-label-large-line-height);
896
+ --wm-aside-nav-item-letter-spacing: var(--wm-label-large-letter-spacing);
897
+ --wm-aside-nav-item-radius: var(--wm-radius-pill);
898
+ --wm-aside-nav-item-icon-size: var(--wm-icon-size);
899
+ --wm-aside-nav-item-gap: var(--wm-space-2);
900
+ --wm-aside-nav-item-color: var(--wm-aside-nav-color);
901
+ --wm-aside-nav-item-background: var(--wm-aside-nav-background);
902
+ --wm-aside-nav-item-color-active: var(--wm-color-on-secondary-container);
903
+ --wm-aside-nav-item-background-active: var(--wm-color-secondary-container);
904
+ --wm-aside-nav-item-state-layer-color: var(--wm-color-on-surface);
905
+ --wm-aside-nav-item-hover-state-layer-opacity: var(--wm-opacity-hover);
906
+ --wm-aside-nav-item-focus-state-layer-opacity: var(--wm-opacity-focus);
907
+ --wm-aside-nav-item-active-state-layer-opacity: var(--wm-opacity-active);
908
+ --wm-aside-nav-item-caret-size: var(--wm-icon-size-sm);
909
+ --wm-aside-nav-submenu-padding: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-3);
910
+ --wm-aside-nav-submenu-background: var(--wm-aside-nav-item-background);
911
+ --wm-aside-nav-submenu-color: var(--wm-aside-nav-item-color);
912
+ --wm-aside-nav-submenu-box-shadow: none;
913
+ --wm-aside-nav-submenu-radius: var(--wm-radius-none);
914
+ --wm-aside-nav-submenu-item-min-height: 44px;
915
+ --wm-aside-nav-submenu-item-padding: var(--wm-space-2) var(--wm-space-6);
916
+ --wm-aside-nav-submenu-item-font-size: var(--wm-label-large-font-size);
917
+ --wm-aside-nav-submenu-item-font-family: var(--wm-label-large-font-family);
918
+ --wm-aside-nav-submenu-item-font-weight: var(--wm-label-large-font-weight);
919
+ --wm-aside-nav-submenu-item-line-height: var(--wm-label-large-line-height);
920
+ --wm-aside-nav-submenu-item-letter-spacing: var(--wm-label-large-letter-spacing);
921
+ --wm-aside-nav-submenu-item-radius: var(--wm-radius-pill);
922
+ --wm-aside-nav-submenu-item-gap: var(--wm-space-2);
923
+ --wm-aside-nav-submenu-item-color: var(--wm-aside-nav-submenu-color);
924
+ --wm-aside-nav-submenu-item-background: var(--wm-aside-nav-submenu-background);
925
+ --wm-aside-nav-submenu-item-color-active: var(--wm-color-on-secondary-container);
926
+ --wm-aside-nav-submenu-item-background-active: var(--wm-color-secondary-container);
927
+ --wm-aside-panel-rail-width: 80px;
928
+ --wm-aside-panel-rail-background: var(--wm-color-surface);
929
+ --wm-aside-panel-rail-color: var(--wm-color-on-surface-variant);
930
+ --wm-aside-panel-rail-padding-top: var(--wm-space-3);
931
+ --wm-aside-panel-rail-padding-right: var(--wm-space-2);
932
+ --wm-aside-panel-rail-padding-bottom: var(--wm-space-3);
933
+ --wm-aside-panel-rail-padding-left: var(--wm-space-2);
934
+ --wm-aside-nav-rail-background: var(--wm-aside-panel-rail-background);
935
+ --wm-aside-nav-rail-color: var(--wm-aside-panel-rail-color);
936
+ --wm-aside-nav-rail-gap: var(--wm-space-3);
937
+ --wm-aside-nav-rail-item-padding: 0;
938
+ --wm-aside-nav-rail-item-font-size: var(--wm-label-medium-font-size);
939
+ --wm-aside-nav-rail-item-font-family: var(--wm-label-medium-font-family);
940
+ --wm-aside-nav-rail-item-font-weight: var(--wm-label-medium-font-weight);
941
+ --wm-aside-nav-rail-item-line-height: var(--wm-label-medium-line-height);
942
+ --wm-aside-nav-rail-item-letter-spacing: var(--wm-label-medium-letter-spacing);
943
+ --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-color);
944
+ --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-background);
945
+ --wm-aside-nav-rail-item-color-active: var(--wm-color-on-surface);
946
+ --wm-aside-nav-rail-item-background-active: none;
947
+ --wm-aside-nav-rail-item-radius: var(--wm-radius-pill);
948
+ --wm-aside-nav-rail-item-gap: var(--wm-space-1);
949
+ --wm-aside-nav-rail-item-icon-size: 24px;
950
+ --wm-aside-nav-rail-item-icon-width: 56px;
951
+ --wm-aside-nav-rail-item-icon-height: 32px;
952
+ --wm-aside-nav-rail-item-icon-radius: var(--wm-radius-pill);
953
+ --wm-aside-nav-rail-item-icon-radius-active: var(--wm-radius-pill);
954
+ --wm-aside-nav-rail-item-icon-color: var(--wm-aside-nav-rail-item-color);
955
+ --wm-aside-nav-rail-item-icon-background: var(--wm-aside-nav-rail-item-background);
956
+ --wm-aside-nav-rail-item-icon-color-active: var(--wm-color-on-secondary-container);
957
+ --wm-aside-nav-rail-item-icon-background-active: var(--wm-color-secondary-container);
958
+ --wm-aside-nav-rail-item-icon-state-layer-color: var(--wm-color-on-surface);
959
+ --wm-aside-nav-rail-item-icon-hover-state-layer-opacity: var(--wm-opacity-hover);
960
+ --wm-aside-nav-rail-item-icon-focus-state-layer-opacity: var(--wm-opacity-focus);
961
+ --wm-aside-nav-rail-item-icon-active-state-layer-opacity: var(--wm-opacity-active);
962
+ --wm-aside-nav-rail-submenu-padding: var(--wm-space-3) var(--wm-space-2);
963
+ --wm-aside-nav-rail-submenu-background: var(--wm-aside-nav-rail-background);
964
+ --wm-aside-nav-rail-submenu-color: var(--wm-aside-nav-rail-color);
965
+ --wm-aside-nav-rail-submenu-box-shadow: var(--wm-elevation-shadow-1);
966
+ --wm-aside-nav-rail-submenu-radius: var(--wm-radius-none) var(--wm-radius-sm) var(--wm-radius-sm) var(--wm-radius-none);
967
+ --wm-aside-nav-rail-submenu-width: 260px;
968
+ --wm-aside-nav-rail-submenu-item-min-height: 44px;
969
+ --wm-aside-nav-rail-submenu-item-padding: var(--wm-space-2) var(--wm-space-6);
970
+ --wm-aside-nav-rail-submenu-item-font-size: var(--wm-label-large-font-size);
971
+ --wm-aside-nav-rail-submenu-item-font-family: var(--wm-label-large-font-family);
972
+ --wm-aside-nav-rail-submenu-item-font-weight: var(--wm-label-large-font-weight);
973
+ --wm-aside-nav-rail-submenu-item-line-height: var(--wm-label-large-line-height);
974
+ --wm-aside-nav-rail-submenu-item-letter-spacing: var(--wm-label-large-letter-spacing);
975
+ --wm-aside-nav-rail-submenu-item-radius: var(--wm-radius-pill);
976
+ --wm-aside-nav-rail-submenu-item-gap: var(--wm-space-2);
977
+ --wm-aside-nav-rail-submenu-item-color: var(--wm-aside-nav-rail-submenu-color);
978
+ --wm-aside-nav-rail-submenu-item-background: var(--wm-aside-nav-rail-submenu-background);
979
+ --wm-aside-nav-rail-submenu-item-color-active: var(--wm-color-on-secondary-container);
980
+ --wm-aside-nav-rail-submenu-item-background-active: var(--wm-color-secondary-container);
981
+ /*--right--*/
982
+ --wm-aside-right-nav-rail-submenu-radius: var(--wm-radius-sm) var(--wm-radius-none) var(--wm-radius-none) var(--wm-radius-sm);
886
983
  /*--app page content--*/
887
- --wm-page-bg-color: var(--wm-color-contrast-light);
888
- --wm-page-text-color: var(--wm-color-contrast-dark);
984
+ --wm-page-content-background: var(--wm-color-contrast-light);
985
+ --wm-page-color: var(--wm-color-contrast-dark);
889
986
  --wm-page-text-muted-color: var(--wm-color-dark-grey-500);
890
987
  /*--app footer--*/
891
988
  --wm-footer-spacing: 3.5rem 2.5rem;
@@ -13685,6 +13782,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13685
13782
  .wm-app .app-anchor .anchor-caption:empty {
13686
13783
  display: none;
13687
13784
  }
13785
+ .wm-app a [class="app-icon"],
13786
+ .wm-app .app-anchor [class="app-icon"],
13787
+ .wm-app a [class~="glyphicon"],
13788
+ .wm-app .app-anchor [class~="glyphicon"] {
13789
+ display: none;
13790
+ }
13688
13791
  .wm-app .app-audio {
13689
13792
  position: relative;
13690
13793
  display: inline-block;
@@ -14932,6 +15035,174 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14932
15035
  border: none !important;
14933
15036
  --wm-btn-state-layer-color: var(--wm-color-primary);
14934
15037
  }
15038
+ .wm-app .dropdown.app-menu {
15039
+ position: relative;
15040
+ display: inline-flex;
15041
+ }
15042
+ .wm-app .dropdown.app-menu .dropdown-menu {
15043
+ display: flex;
15044
+ flex-direction: column;
15045
+ width: var(--wm-dropdown-menu-width);
15046
+ padding: var(--wm-dropdown-menu-vertical-padding);
15047
+ border-radius: var(--wm-dropdown-menu-border-radius);
15048
+ background: var(--wm-dropdown-menu-background);
15049
+ box-shadow: var(--wm-dropdown-menu-box-shadow);
15050
+ position: absolute;
15051
+ top: 100%;
15052
+ left: 0;
15053
+ z-index: 1000;
15054
+ }
15055
+ .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a {
15056
+ display: flex;
15057
+ align-items: center;
15058
+ justify-content: flex-start;
15059
+ width: 100%;
15060
+ gap: var(--wm-dropdown-menu-item-gap);
15061
+ padding: var(--wm-dropdown-menu-item-padding);
15062
+ font-family: var(--wm-dropdown-menu-item-font-family);
15063
+ font-size: var(--wm-dropdown-menu-item-font-size);
15064
+ line-height: var(--wm-dropdown-menu-item-line-height);
15065
+ font-weight: var(--wm-dropdown-menu-item-font-weight);
15066
+ letter-spacing: var(--wm-dropdown-menu-item-letter-spacing);
15067
+ color: var(--wm-dropdown-menu-item-color);
15068
+ }
15069
+ .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:before {
15070
+ content: "";
15071
+ position: absolute;
15072
+ inset: 0;
15073
+ width: 100%;
15074
+ height: 100%;
15075
+ opacity: 0;
15076
+ background: var(--wm-dropdown-menu-item-state-layer-color);
15077
+ border-radius: inherit;
15078
+ }
15079
+ .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a .anchor-caption {
15080
+ overflow: hidden;
15081
+ white-space: nowrap;
15082
+ text-overflow: ellipsis;
15083
+ }
15084
+ .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:hover:before {
15085
+ opacity: var(--wm-dropdown-menu-item-hover-state-layer-opacity);
15086
+ }
15087
+ .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:focus:before {
15088
+ opacity: var(--wm-dropdown-menu-item-focus-state-layer-opacity);
15089
+ }
15090
+ .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:active:before {
15091
+ opacity: var(--wm-dropdown-menu-item-active-state-layer-opacity);
15092
+ }
15093
+ .wm-app .dropdown.app-menu .dropdown-menu.horizontal {
15094
+ width: auto;
15095
+ flex-direction: row;
15096
+ padding: var(--wm-dropdown-menu-horizontal-padding);
15097
+ }
15098
+ .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-menu {
15099
+ width: auto;
15100
+ flex-direction: row;
15101
+ padding: var(--wm-dropdown-menu-horizontal-padding);
15102
+ }
15103
+ .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-menu.pull-right {
15104
+ flex-direction: row-reverse;
15105
+ }
15106
+ .wm-app .dropdown.app-menu .dropdown-menu.horizontal.pull-right {
15107
+ flex-direction: row-reverse;
15108
+ }
15109
+ .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu {
15110
+ top: 100%;
15111
+ left: auto;
15112
+ }
15113
+ .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu.pull-right {
15114
+ left: auto;
15115
+ right: 0;
15116
+ }
15117
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu {
15118
+ position: relative;
15119
+ }
15120
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > a {
15121
+ padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2);
15122
+ }
15123
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > .dropdown-menu {
15124
+ display: none;
15125
+ top: 0;
15126
+ left: 100%;
15127
+ }
15128
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > .dropdown-menu.pull-right {
15129
+ left: auto;
15130
+ right: 100%;
15131
+ }
15132
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
15133
+ display: flex;
15134
+ }
15135
+ .wm-app .dropdown.app-menu .dropdown-menu.pull-right {
15136
+ left: auto;
15137
+ right: 0;
15138
+ }
15139
+ .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu .dropdown-menu {
15140
+ position: relative;
15141
+ inset: auto;
15142
+ }
15143
+ .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu .dropdown-submenu > .dropdown-menu {
15144
+ position: relative;
15145
+ inset: auto;
15146
+ background: none;
15147
+ box-shadow: none;
15148
+ padding: var(--wm-dropdown-menu-vertical-inline-submenu-padding);
15149
+ width: 100%;
15150
+ }
15151
+ .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu.horizontal .dropdown-submenu > .dropdown-menu {
15152
+ padding: var(--wm-dropdown-menu-horizontal-inline-submenu-padding);
15153
+ }
15154
+ .wm-app .dropdown.app-menu:not(.open) > .btn .caret {
15155
+ transform: rotate(0deg);
15156
+ }
15157
+ .wm-app .dropdown.app-menu:not(.open) > .dropdown-menu {
15158
+ display: none;
15159
+ }
15160
+ .wm-app .dropdown.app-menu.dropup > .dropdown-menu {
15161
+ bottom: 100%;
15162
+ top: auto;
15163
+ margin-bottom: 2px;
15164
+ }
15165
+ .wm-app .dropdown.app-menu.dropup > .dropdown-menu .dropdown-submenu > .dropdown-menu {
15166
+ top: auto;
15167
+ bottom: 0;
15168
+ }
15169
+ .wm-app .dropdown.app-menu.dropup > .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu {
15170
+ top: auto;
15171
+ bottom: 100%;
15172
+ }
15173
+ .wm-app .dropdown.app-menu[menuposition="inline"] {
15174
+ flex-direction: column;
15175
+ }
15176
+ .wm-app .dropdown.app-menu[menuposition="inline"] > .dropdown-toggle {
15177
+ align-self: flex-start;
15178
+ }
15179
+ .wm-app .dropdown.app-menu .btn > .anchor-caption,
15180
+ .wm-app .dropdown.app-menu a > .anchor-caption,
15181
+ .wm-app .dropdown.app-menu .btn > .btn-caption,
15182
+ .wm-app .dropdown.app-menu a > .btn-caption {
15183
+ width: 100%;
15184
+ white-space: nowrap;
15185
+ overflow: hidden;
15186
+ text-overflow: ellipsis;
15187
+ text-align: left;
15188
+ }
15189
+ .wm-app .dropdown.app-menu .btn .caret,
15190
+ .wm-app .dropdown.app-menu a .caret {
15191
+ margin: 0;
15192
+ display: inline-flex;
15193
+ justify-content: center;
15194
+ align-items: center;
15195
+ position: absolute;
15196
+ right: calc(var(--wm-dropdown-menu-caret-size) / 1.5);
15197
+ width: var(--wm-dropdown-menu-caret-size);
15198
+ height: var(--wm-dropdown-menu-caret-size);
15199
+ font-size: var(--wm-dropdown-menu-caret-size);
15200
+ transform: rotate(180deg);
15201
+ }
15202
+ .wm-app .dropdown.app-menu .btn:has(> .caret),
15203
+ .wm-app .dropdown.app-menu a:has(> .caret) {
15204
+ padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2) !important;
15205
+ }
14935
15206
  .wm-app .wm-app .app-fileupload {
14936
15207
  position: relative;
14937
15208
  overflow: hidden;
@@ -15702,32 +15973,569 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15702
15973
  }
15703
15974
  .wm-app .app-page .app-page-content {
15704
15975
  padding: var(--wm-page-content);
15976
+ width: 100%;
15705
15977
  }
15706
15978
  .wm-app .app-page .app-left-panel,
15707
- .wm-app .app-page .app-left-nav {
15708
- background: var(--wm-left-nav-background);
15709
- color: var(--wm-left-nav-color);
15710
- padding-top: var(--wm-left-nav-padding-top);
15711
- padding-right: var(--wm-left-nav-padding-right);
15712
- padding-bottom: var(--wm-left-nav-padding-bottom);
15713
- padding-left: var(--wm-left-nav-padding-left);
15979
+ .wm-app .app-page .app-right-panel {
15980
+ min-width: var(--wm-aside-panel-width);
15981
+ width: var(--wm-aside-panel-width);
15982
+ background: var(--wm-aside-panel-background);
15983
+ color: var(--wm-aside-panel-color);
15984
+ padding-top: var(--wm-aside-panel-padding-top);
15985
+ padding-right: var(--wm-aside-panel-padding-right);
15986
+ padding-bottom: var(--wm-aside-panel-padding-bottom);
15987
+ padding-left: var(--wm-aside-panel-padding-left);
15714
15988
  }
15715
15989
  .wm-app .app-page .app-left-panel .app-nav,
15716
- .wm-app .app-page .app-left-nav .app-nav {
15717
- --wm-nav-padding: 0;
15718
- }
15719
- .wm-app .app-page .app-right-panel,
15720
- .wm-app .app-page .app-right-nav {
15721
- background: var(--wm-right-nav-background);
15722
- color: var(--wm-right-nav-color);
15723
- padding-top: var(--wm-right-nav-padding-top);
15724
- padding-right: var(--wm-right-nav-padding-right);
15725
- padding-bottom: var(--wm-right-nav-padding-bottom);
15726
- padding-left: var(--wm-right-nav-padding-left);
15727
- }
15728
- .wm-app .app-page .app-right-panel .app-nav,
15729
- .wm-app .app-page .app-right-nav .app-nav {
15730
- --wm-nav-padding: 0;
15990
+ .wm-app .app-page .app-right-panel .app-nav {
15991
+ padding: var(--wm-aside-nav-padding);
15992
+ background: var(--wm-aside-nav-background);
15993
+ gap: var(--wm-aside-nav-gap);
15994
+ }
15995
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item,
15996
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item {
15997
+ width: 100%;
15998
+ }
15999
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor,
16000
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor,
16001
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
16002
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
16003
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-button,
16004
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-button,
16005
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
16006
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
16007
+ position: relative;
16008
+ display: flex;
16009
+ justify-content: flex-start;
16010
+ width: 100%;
16011
+ min-height: var(--wm-aside-nav-item-min-height);
16012
+ padding: var(--wm-aside-nav-item-padding);
16013
+ font-size: var(--wm-aside-nav-item-font-size);
16014
+ font-family: var(--wm-aside-nav-item-font-family);
16015
+ font-weight: var(--wm-aside-nav-item-font-weight);
16016
+ line-height: var(--wm-aside-nav-item-line-height);
16017
+ letter-spacing: var(--wm-aside-nav-item-letter-spacing);
16018
+ border-radius: var(--wm-aside-nav-item-radius);
16019
+ gap: var(--wm-aside-nav-item-gap);
16020
+ }
16021
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor .app-icon,
16022
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor .app-icon,
16023
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
16024
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
16025
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-button .app-icon,
16026
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-button .app-icon,
16027
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon,
16028
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
16029
+ font-size: var(--wm-aside-nav-item-icon-size);
16030
+ min-width: var(--wm-aside-nav-item-icon-size);
16031
+ width: var(--wm-aside-nav-item-icon-size);
16032
+ height: var(--wm-aside-nav-item-icon-size);
16033
+ margin-left: calc(var(--wm-space-2) * -1);
16034
+ }
16035
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
16036
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
16037
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
16038
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
16039
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-button > .anchor-caption,
16040
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-button > .anchor-caption,
16041
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
16042
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
16043
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor > .btn-caption,
16044
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor > .btn-caption,
16045
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
16046
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
16047
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-button > .btn-caption,
16048
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-button > .btn-caption,
16049
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption,
16050
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption {
16051
+ width: 100%;
16052
+ white-space: nowrap;
16053
+ overflow: hidden;
16054
+ text-overflow: ellipsis;
16055
+ text-align: left;
16056
+ }
16057
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor,
16058
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor,
16059
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
16060
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
16061
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
16062
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
16063
+ background: var(--wm-aside-nav-item-background);
16064
+ color: var(--wm-aside-nav-item-color);
16065
+ }
16066
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:before,
16067
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:before,
16068
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:before,
16069
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:before,
16070
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before,
16071
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before {
16072
+ content: "";
16073
+ top: 0;
16074
+ left: 0;
16075
+ right: 0;
16076
+ bottom: 0;
16077
+ position: absolute;
16078
+ pointer-events: none;
16079
+ border-radius: inherit;
16080
+ opacity: 0;
16081
+ background: var(--wm-aside-nav-item-state-layer-color);
16082
+ }
16083
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:hover::before,
16084
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:hover::before,
16085
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:hover::before,
16086
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:hover::before,
16087
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
16088
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
16089
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor.hover::before,
16090
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor.hover::before,
16091
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
16092
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
16093
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before,
16094
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before {
16095
+ opacity: var(--wm-aside-nav-item-hover-state-layer-opacity);
16096
+ }
16097
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:focus::before,
16098
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:focus::before,
16099
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:focus::before,
16100
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:focus::before,
16101
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
16102
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
16103
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor.focus::before,
16104
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor.focus::before,
16105
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
16106
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
16107
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before,
16108
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before {
16109
+ opacity: var(--wm-aside-nav-item-focus-state-layer-opacity);
16110
+ }
16111
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:active::before,
16112
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:active::before,
16113
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active::before,
16114
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active::before,
16115
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
16116
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
16117
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:active:focus::before,
16118
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:active:focus::before,
16119
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
16120
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
16121
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
16122
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
16123
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:active:hover::before,
16124
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:active:hover::before,
16125
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
16126
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
16127
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
16128
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
16129
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:active.focus::before,
16130
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:active.focus::before,
16131
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
16132
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
16133
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before,
16134
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before {
16135
+ opacity: var(--wm-aside-nav-item-active-state-layer-opacity);
16136
+ }
16137
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor.active,
16138
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor.active,
16139
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor.active,
16140
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.active,
16141
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active,
16142
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active {
16143
+ --wm-aside-nav-item-background: var(--wm-aside-nav-item-background-active);
16144
+ --wm-aside-nav-item-color: var(--wm-aside-nav-item-color-active);
16145
+ }
16146
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item.active > .app-anchor,
16147
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item.active > .app-anchor,
16148
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor,
16149
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor,
16150
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor,
16151
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor {
16152
+ --wm-aside-nav-item-background: var(--wm-aside-nav-item-background-active);
16153
+ --wm-aside-nav-item-color: var(--wm-aside-nav-item-color-active);
16154
+ }
16155
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu,
16156
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu {
16157
+ flex-direction: column;
16158
+ position: relative;
16159
+ width: 100%;
16160
+ }
16161
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu > .app-anchor .anchor-caption,
16162
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu > .app-anchor .anchor-caption {
16163
+ width: 100%;
16164
+ white-space: nowrap;
16165
+ overflow: hidden;
16166
+ text-overflow: ellipsis;
16167
+ }
16168
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu,
16169
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
16170
+ display: flex;
16171
+ flex-direction: column;
16172
+ width: 100%;
16173
+ position: relative;
16174
+ inset: auto;
16175
+ z-index: 1;
16176
+ padding: var(--wm-aside-nav-submenu-padding);
16177
+ background: var(--wm-aside-nav-submenu-background);
16178
+ box-shadow: var(--wm-aside-nav-submenu-box-shadow);
16179
+ border-radius: var(--wm-aside-nav-submenu-radius);
16180
+ }
16181
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a,
16182
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a {
16183
+ color: var(--wm-aside-nav-submenu-item-color);
16184
+ background: var(--wm-aside-nav-submenu-item-background);
16185
+ min-height: var(--wm-aside-nav-submenu-item-min-height);
16186
+ padding: var(--wm-aside-nav-submenu-item-padding);
16187
+ font-size: var(--wm-aside-nav-submenu-item-font-size);
16188
+ font-family: var(--wm-aside-nav-submenu-item-font-family);
16189
+ font-weight: var(--wm-aside-nav-submenu-item-font-weight);
16190
+ line-height: var(--wm-aside-nav-submenu-item-line-height);
16191
+ letter-spacing: var(--wm-aside-nav-submenu-item-letter-spacing);
16192
+ border-radius: var(--wm-aside-nav-submenu-item-radius);
16193
+ gap: var(--wm-aside-nav-submenu-item-gap);
16194
+ }
16195
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a,
16196
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a {
16197
+ --wm-aside-nav-submenu-item-background: var(--wm-aside-nav-submenu-item-background-active);
16198
+ --wm-aside-nav-submenu-item-color: var(--wm-aside-nav-submenu-item-color-active);
16199
+ }
16200
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu,
16201
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu {
16202
+ position: relative;
16203
+ }
16204
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret,
16205
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret {
16206
+ transform: rotate(90deg);
16207
+ }
16208
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu,
16209
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu {
16210
+ display: none;
16211
+ }
16212
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret,
16213
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret {
16214
+ transform: rotate(270deg);
16215
+ }
16216
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu,
16217
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu {
16218
+ display: flex;
16219
+ }
16220
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) > .dropdown-menu,
16221
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) > .dropdown-menu {
16222
+ display: none;
16223
+ }
16224
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) a > .caret,
16225
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) a > .caret {
16226
+ transform: rotate(0deg);
16227
+ }
16228
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item a > .caret,
16229
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item a > .caret {
16230
+ display: inline-flex;
16231
+ justify-content: center;
16232
+ align-items: center;
16233
+ margin: 0;
16234
+ width: var(--wm-aside-nav-item-caret-size);
16235
+ height: var(--wm-aside-nav-item-caret-size);
16236
+ font-size: var(--wm-aside-nav-item-caret-size);
16237
+ position: absolute;
16238
+ right: calc(var(--wm-aside-nav-item-caret-size) / 1.5);
16239
+ transform: rotate(180deg);
16240
+ }
16241
+ .wm-app .app-page .app-left-panel .app-nav .app-nav-item a:has(> .caret),
16242
+ .wm-app .app-page .app-right-panel .app-nav .app-nav-item a:has(> .caret) {
16243
+ padding-right: calc(var(--wm-aside-nav-item-caret-size) * 2) !important;
16244
+ }
16245
+ .wm-app .app-page .app-left-panel.app-nav-rail,
16246
+ .wm-app .app-page .app-right-panel.app-nav-rail {
16247
+ min-width: var(--wm-aside-panel-rail-width);
16248
+ width: var(--wm-aside-panel-rail-width);
16249
+ background: var(--wm-aside-panel-rail-background);
16250
+ color: var(--wm-aside-panel-rail-color);
16251
+ padding-top: var(--wm-aside-panel-rail-padding-top);
16252
+ padding-right: var(--wm-aside-panel-rail-padding-right);
16253
+ padding-bottom: var(--wm-aside-panel-rail-padding-bottom);
16254
+ padding-left: var(--wm-aside-panel-rail-padding-left);
16255
+ }
16256
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav,
16257
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav {
16258
+ background: var(--wm-aside-nav-rail-background);
16259
+ gap: var(--wm-aside-nav-rail-gap);
16260
+ }
16261
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor,
16262
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor,
16263
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor,
16264
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor,
16265
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-button,
16266
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-button,
16267
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
16268
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
16269
+ flex-direction: column;
16270
+ font-size: var(--wm-aside-nav-rail-item-font-size);
16271
+ font-family: var(--wm-aside-nav-rail-item-font-family);
16272
+ font-weight: var(--wm-aside-nav-rail-item-font-weight);
16273
+ line-height: var(--wm-aside-nav-rail-item-line-height);
16274
+ letter-spacing: var(--wm-aside-nav-rail-item-letter-spacing);
16275
+ gap: var(--wm-aside-nav-rail-item-gap);
16276
+ border-radius: var(--wm-aside-nav-rail-item-radius);
16277
+ padding: var(--wm-aside-nav-rail-item-padding) !important;
16278
+ }
16279
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .anchor-caption,
16280
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .anchor-caption,
16281
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
16282
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
16283
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-button > .anchor-caption,
16284
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-button > .anchor-caption,
16285
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
16286
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
16287
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .btn-caption,
16288
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .btn-caption,
16289
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
16290
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
16291
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-button > .btn-caption,
16292
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-button > .btn-caption,
16293
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption,
16294
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption {
16295
+ text-align: center;
16296
+ word-break: break-word;
16297
+ white-space: normal;
16298
+ }
16299
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor .app-icon,
16300
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor .app-icon,
16301
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
16302
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
16303
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-button .app-icon,
16304
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-button .app-icon,
16305
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon,
16306
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
16307
+ margin: var(--wm-space-0);
16308
+ font-size: var(--wm-aside-nav-rail-item-icon-size);
16309
+ width: var(--wm-aside-nav-rail-item-icon-width);
16310
+ height: var(--wm-aside-nav-rail-item-icon-height);
16311
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius);
16312
+ }
16313
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor,
16314
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor,
16315
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor,
16316
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor,
16317
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
16318
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
16319
+ background: var(--wm-aside-nav-rail-item-background);
16320
+ color: var(--wm-aside-nav-rail-item-color);
16321
+ }
16322
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:before,
16323
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:before,
16324
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:before,
16325
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:before,
16326
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before,
16327
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before {
16328
+ display: none;
16329
+ }
16330
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .app-icon:before,
16331
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .app-icon:before,
16332
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .app-icon:before,
16333
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .app-icon:before,
16334
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .app-icon:before,
16335
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .app-icon:before {
16336
+ z-index: 2;
16337
+ }
16338
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .app-icon:after,
16339
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .app-icon:after,
16340
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .app-icon:after,
16341
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor > .app-icon:after,
16342
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .app-icon:after,
16343
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .app-icon:after {
16344
+ content: "";
16345
+ z-index: 1;
16346
+ position: absolute;
16347
+ inset: 0;
16348
+ pointer-events: none;
16349
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius);
16350
+ background: var(--wm-aside-nav-rail-item-icon-state-layer-color);
16351
+ opacity: 0;
16352
+ }
16353
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:hover > .app-icon:after,
16354
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:hover > .app-icon:after,
16355
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:hover > .app-icon:after,
16356
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:hover > .app-icon:after,
16357
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover > .app-icon:after,
16358
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover > .app-icon:after,
16359
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.hover > .app-icon:after,
16360
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.hover > .app-icon:after,
16361
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.hover > .app-icon:after,
16362
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.hover > .app-icon:after,
16363
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover > .app-icon:after,
16364
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover > .app-icon:after {
16365
+ opacity: var(--wm-aside-nav-rail-item-icon-hover-state-layer-opacity);
16366
+ }
16367
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus > .app-icon:after,
16368
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus > .app-icon:after,
16369
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:focus > .app-icon:after,
16370
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:focus > .app-icon:after,
16371
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus > .app-icon:after,
16372
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus > .app-icon:after,
16373
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.focus > .app-icon:after,
16374
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.focus > .app-icon:after,
16375
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.focus > .app-icon:after,
16376
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.focus > .app-icon:after,
16377
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus > .app-icon:after,
16378
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus > .app-icon:after {
16379
+ opacity: var(--wm-aside-nav-rail-item-icon-focus-state-layer-opacity);
16380
+ }
16381
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active > .app-icon:after,
16382
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active > .app-icon:after,
16383
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active > .app-icon:after,
16384
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active > .app-icon:after,
16385
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active > .app-icon:after,
16386
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active > .app-icon:after,
16387
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:focus > .app-icon:after,
16388
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:focus > .app-icon:after,
16389
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus > .app-icon:after,
16390
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus > .app-icon:after,
16391
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus > .app-icon:after,
16392
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus > .app-icon:after,
16393
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:hover > .app-icon:after,
16394
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:hover > .app-icon:after,
16395
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover > .app-icon:after,
16396
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover > .app-icon:after,
16397
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover > .app-icon:after,
16398
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover > .app-icon:after,
16399
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active.focus > .app-icon:after,
16400
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active.focus > .app-icon:after,
16401
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus > .app-icon:after,
16402
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus > .app-icon:after,
16403
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus > .app-icon:after,
16404
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus > .app-icon:after {
16405
+ opacity: var(--wm-aside-nav-rail-item-icon-active-state-layer-opacity);
16406
+ }
16407
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active,
16408
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active,
16409
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active,
16410
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active,
16411
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active,
16412
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active {
16413
+ --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-item-background-active);
16414
+ --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-item-color-active);
16415
+ }
16416
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon,
16417
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon,
16418
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active > .app-icon,
16419
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active > .app-icon,
16420
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon,
16421
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon {
16422
+ background: var(--wm-aside-nav-rail-item-icon-background-active);
16423
+ color: var(--wm-aside-nav-rail-item-icon-color-active);
16424
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
16425
+ }
16426
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon:after,
16427
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon:after,
16428
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active > .app-icon:after,
16429
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active > .app-icon:after,
16430
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon:after,
16431
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon:after {
16432
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
16433
+ }
16434
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-button,
16435
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-button {
16436
+ --wm-aside-nav-rail-item-radius: var(--wm-radius-md);
16437
+ --wm-aside-nav-rail-item-padding: var(--wm-space-2);
16438
+ }
16439
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor,
16440
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor,
16441
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor,
16442
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor,
16443
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor,
16444
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor {
16445
+ --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-item-background-active);
16446
+ --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-item-color-active);
16447
+ }
16448
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon,
16449
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon,
16450
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor > .app-icon,
16451
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor > .app-icon,
16452
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon,
16453
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon {
16454
+ background: var(--wm-aside-nav-rail-item-icon-background-active);
16455
+ color: var(--wm-aside-nav-rail-item-icon-color-active);
16456
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
16457
+ }
16458
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon:after,
16459
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon:after,
16460
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor > .app-icon:after,
16461
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor > .app-icon:after,
16462
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon:after,
16463
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon:after {
16464
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
16465
+ }
16466
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu,
16467
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu {
16468
+ flex-direction: column;
16469
+ }
16470
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu > a .caret,
16471
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu > a .caret {
16472
+ display: none;
16473
+ }
16474
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu,
16475
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
16476
+ width: var(--wm-aside-nav-rail-submenu-width);
16477
+ position: absolute;
16478
+ top: 0;
16479
+ left: calc(100% + var(--wm-aside-panel-rail-padding-right));
16480
+ z-index: 1;
16481
+ padding: var(--wm-aside-nav-rail-submenu-padding);
16482
+ background: var(--wm-aside-nav-rail-submenu-background);
16483
+ border-radius: var(--wm-aside-nav-rail-submenu-radius);
16484
+ box-shadow: var(--wm-aside-nav-rail-submenu-box-shadow);
16485
+ }
16486
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a,
16487
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a {
16488
+ color: var(--wm-aside-nav-rail-submenu-item-color);
16489
+ background: var(--wm-aside-nav-rail-submenu-item-background);
16490
+ min-height: var(--wm-aside-nav-rail-submenu-item-min-height);
16491
+ padding: var(--wm-aside-nav-rail-submenu-item-padding);
16492
+ font-size: var(--wm-aside-nav-rail-submenu-item-font-size);
16493
+ font-family: var(--wm-aside-nav-rail-submenu-item-font-family);
16494
+ font-weight: var(--wm-aside-nav-rail-submenu-item-font-weight);
16495
+ line-height: var(--wm-aside-nav-rail-submenu-item-line-height);
16496
+ letter-spacing: var(--wm-aside-nav-rail-submenu-item-letter-spacing);
16497
+ border-radius: var(--wm-aside-nav-rail-submenu-item-radius);
16498
+ gap: var(--wm-aside-nav-rail-submenu-item-gap);
16499
+ }
16500
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a,
16501
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a {
16502
+ --wm-aside-nav-rail-submenu-item-background: var(--wm-aside-nav-rail-submenu-item-background-active);
16503
+ --wm-aside-nav-rail-submenu-item-color: var(--wm-aside-nav-rail-submenu-item-color-active);
16504
+ }
16505
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu,
16506
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu {
16507
+ position: relative;
16508
+ }
16509
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret,
16510
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret {
16511
+ transform: rotate(90deg);
16512
+ }
16513
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu,
16514
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu {
16515
+ display: none;
16516
+ position: relative;
16517
+ inset: auto;
16518
+ width: 100%;
16519
+ padding: 0;
16520
+ box-shadow: none;
16521
+ padding-left: var(--wm-space-3);
16522
+ }
16523
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret,
16524
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret {
16525
+ transform: rotate(270deg);
16526
+ }
16527
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu,
16528
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu {
16529
+ display: flex;
16530
+ }
16531
+ .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu.open > a > .app-icon:after,
16532
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu.open > a > .app-icon:after {
16533
+ opacity: var(--wm-aside-nav-rail-item-icon-focus-state-layer-opacity);
16534
+ }
16535
+ .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
16536
+ right: calc(100% + var(--wm-aside-panel-rail-padding-left));
16537
+ left: auto;
16538
+ --wm-aside-nav-rail-submenu-radius: var(--wm-aside-right-nav-rail-submenu-radius);
15731
16539
  }
15732
16540
  .wm-app .app-page .app-footer {
15733
16541
  position: relative;