@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

package/src/styles/mobile/components/basic/label.less

@@ -1,6 +1,21 @@
 .app-label {
-    margin: var(--wm-label-margin);
-    padding: var(--wm-label-padding);
+    margin-top: var(--wm-label-margin-top);
+    margin-bottom: var(--wm-label-margin-bottom);
+    margin-left: var(--wm-label-margin-left);
+    margin-right: var(--wm-label-margin-right);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .app-label-text {
@@ -16,13 +31,13 @@
 
 .p.app-label-text {
     font-size: var(--wm-label-font-size);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
     color: var(--wm-label-color);
 }
 
 .media-heading.app-label-text {
     font-size: var(--wm-label-font-size);
-    margin: var(--wm-label-margin);
     color: var(--wm-label-color);
 }
 
@@ -31,7 +46,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h2.app-label-text {
@@ -39,7 +55,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h3.app-label-text {
@@ -47,7 +64,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h4.app-label-text {
@@ -55,7 +73,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h5.app-label-text {
@@ -63,7 +82,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h6.app-label-text {
@@ -71,37 +91,137 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-primary .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-primary .app-label-text {
-    color: var(--wm-label-color);    
+    color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-secondary .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-secondary .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-success .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-success .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-warning .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-warning .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-danger .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-danger .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-info .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-info .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-muted .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-muted .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
+//no problem
 .label-primary .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
@@ -114,6 +234,8 @@
 .label-primary .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .label-secondary .app-label {
@@ -128,23 +250,28 @@
 .label-secondary .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-success .app-label{
+.label-success .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
     padding-left: var(--wm-label-padding-left);
     padding-right: var(--wm-label-padding-right);
     border-radius: var(--wm-label-border-radius);
+
 }
 
 .label-success .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-warning .app-label{
+.label-warning .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -156,9 +283,11 @@
 .label-warning .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-danger .app-label{
+.label-danger .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -170,9 +299,11 @@
 .label-danger .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-info .app-label{
+.label-info .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -184,6 +315,8 @@
 .label-info .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .label-muted .app-label {
@@ -198,6 +331,8 @@
 .label-muted .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 @import (optional) url('../variables/label.variant.less');

package/src/styles/mobile/components/basic/lottie.less

@@ -1,4 +1,7 @@
-.app-lottie-content {
-    height: var(--wm-lottie-content-height);
-    width: var(--wm-lottie-content-width);
+.app-lottie {
+    background-color: var(--wm-lottie-background-color);
+    padding-right: var(--wm-lottie-padding-right);
+    padding-left: var(--wm-lottie-padding-left);
+    padding-bottom: var(--wm-lottie-padding-bottom);
+    padding-top: var(--wm-lottie-padding-top);
 }

package/src/styles/mobile/components/basic/picture.less

@@ -4,6 +4,15 @@
         align-items: center;
         max-width: 100%;
         max-height: 100%;
+        border-radius: var(--wm-picture-radius);
+        padding-top: var(--wm-picture-padding-top);
+        padding-bottom: var(--wm-picture-padding-bottom);
+        padding-left: var(--wm-picture-padding-left);
+        padding-right: var(--wm-picture-padding-right);
+        background-color: var(--wm-picture-background);
+        border-width: var(--wm-picture-border-width);
+        border-style:  var(--wm-picture-border-style);
+        border-color: var(--wm-picture-border-color);
 }
 .thumbnail-image.app-picture {
         border-radius: var(--wm-picture-radius);

package/src/styles/mobile/components/basic/search.less

@@ -23,12 +23,26 @@
 }
 
 .app-search-invalid {
+    border-bottom-color: var(--wm-search-invalid-color);
     border-color: var(--wm-search-invalid-color);
 }
 
 .app-search-clear-btn .app-button {
     border-color: transparent;
     ripple-color: transparent;
+    padding-left: var(--wm-search-clear-btn-padding-left);
+    padding-right: var(--wm-search-clear-btn-padding-right);
+    padding-top: var(--wm-search-clear-btn-padding-top);
+    padding-bottom: var(--wm-search-clear-btn-padding-bottom);
+    border-radius: var(--wm-search-clear-btn-border-radius);
+    background-color: var(--wm-search-clear-btn-background-color);
+    width: var(--wm-search-clear-btn-width);
+}
+
+.app-search-clear-btn .app-button-icon .app-icon-shape{
+    background-color: transparent;
+    color:var(--wm-search-clear-btn-icon-color);
+    font-size: var(--wm-search-clear-btn-icon-size);
 }
 
 .app-search-btn .app-button-icon .app-icon-shape {
@@ -71,7 +85,7 @@
 }
 
 .app-search-placeholder {
-    color: var(--wm-search-placeholder-color);
+    color: var(--wm-search-placeholder-text-color);
 }
 
 .app-search-dropdown-content {
@@ -96,7 +110,12 @@
     border-width: var(--wm-search-border-width);
     border-style: solid;
     border-left-width: 0;
-    
+    padding-left: var(--wm-search-btn-padding-left);
+    padding-right: var(--wm-search-btn-padding-right);
+    padding-top: var(--wm-search-btn-padding-top);
+    padding-bottom: var(--wm-search-btn-padding-bottom);
+    width: var(--wm-search-btn-width);
+
 }
 
 .app-autocomplete.text{

package/src/styles/mobile/components/container/panel/panel-footer.less

@@ -1,3 +1,15 @@
-
 .app-panel-footer {
+    background-color: var(--wm-panel-footer-background);
+    padding-inline: var(--wm-panel-footer-padding-inline);
+    padding-block: var(--wm-panel-footer-padding-block);
+    border-style: var(--wm-panel-footer-border-style);
+    border-width: var(--wm-panel-footer-border-width);
+    border-color: var(--wm-panel-footer-border-color);
+    border-radius: var(--wm-panel-footer-border-radius);
+    min-height: var(--wm-panel-footer-min-height);
+    margin-top: var(--wm-panel-footer-margin-top);
+    margin-bottom: var(--wm-panel-footer-margin-bottom);
+    margin-left: var(--wm-panel-footer-margin-left);
+    margin-right: var(--wm-panel-footer-margin-right)
 }
+    

package/src/styles/mobile/components/container/panel.less

@@ -8,43 +8,40 @@
     padding: 0;
 }
 
-.app-panel-title {
-    font-family: var(--wm-panel-heading-font-family);
-    font-size: var(--wm-panel-heading-font-size);
-    color: var(--wm-panel-heading-color);
-    font-weight: var(--wm-panel-heading-font-weight);
+.app-panel-icon .app-icon-text {
+    font-size: var(--wm-panel-heading-icon-size);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .app-panel-header {
+    gap: var(--wm-panel-heading-gap);
     background-color: var(--wm-panel-heading-background);
     padding-inline: var(--wm-panel-heading-padding-inline);
     padding-block: var(--wm-panel-heading-padding-block);
 }
 
 .app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
+    font-family: var(--wm-panel-heading-font-family);
+    font-size: var(--wm-panel-heading-font-size);
+    font-weight: var(--wm-panel-heading-font-weight);
+    letter-spacing: var(--wm-panel-heading-letter-spacing);
+    line-height: var(--wm-panel-heading-line-height);
 }
 
 .app-panel-sub-title {
+    font-family: var(--wm-panel-description-font-family);
+    font-size: var(--wm-panel-description-font-size);
+    font-weight: var(--wm-panel-description-font-weight);
+    letter-spacing: var(--wm-panel-description-letter-spacing);
+    line-height: var(--wm-panel-description-line-height);
     color: var(--wm-panel-description-color);
 }
 
-.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
-}
-
 .app-panel-content {
     padding: var(--wm-panel-content-padding);
 }
 
-.app-panel-footer {
-    background-color: var(--wm-panel-footer-background);
-    padding-inline: var(--wm-panel-footer-padding);
-    padding-block: var(--wm-panel-footer-padding);
-    border-style: var(--wm-panel-footer-border-style);
-    border-width: var(--wm-panel-footer-border-width);
-    border-color: var(--wm-panel-footer-border-color);
-}
 
 //TODO: Remove below styles once rn style override issue is fixed
 .panel-default.app-panel-header {
@@ -52,7 +49,7 @@
 }
 
 .panel-default.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-default.app-panel-sub-title {
@@ -60,7 +57,7 @@
 }
 
 .panel-default.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-danger.app-panel-header {
@@ -68,7 +65,7 @@
 }
 
 .panel-danger.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-danger.app-panel-sub-title {
@@ -76,7 +73,7 @@
 }
 
 .panel-danger.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-success.app-panel-header {
@@ -84,7 +81,7 @@
 }
 
 .panel-success.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-success.app-panel-sub-title {
@@ -92,7 +89,7 @@
 }
 
 .panel-success.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-warning.app-panel-header {
@@ -100,7 +97,7 @@
 }
 
 .panel-warning.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-warning.app-panel-sub-title {
@@ -108,7 +105,7 @@
 }
 
 .panel-warning.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-info.app-panel-header {
@@ -116,7 +113,7 @@
 }
 
 .panel-info.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-info.app-panel-sub-title {
@@ -124,7 +121,7 @@
 }
 
 .panel-info.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-primary.app-panel-header {
@@ -132,7 +129,7 @@
 }
 
 .panel-primary.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-primary.app-panel-sub-title {
@@ -140,7 +137,7 @@
 }
 
 .panel-primary.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-secondary.app-panel-header {
@@ -148,7 +145,7 @@
 }
 
 .panel-secondary.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-secondary.app-panel-sub-title {
@@ -156,7 +153,7 @@
 }
 
 .panel-secondary.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-tertiary.app-panel-header {
@@ -164,7 +161,7 @@
 }
 
 .panel-tertiary.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-tertiary.app-panel-sub-title {
@@ -172,5 +169,5 @@
 }
 
 .panel-tertiary.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }

package/src/styles/mobile/components/container/tabs/tab-header.less

@@ -21,19 +21,25 @@
     font-size: var(--wm-tabs-item-heading-font-size);
     font-weight: var(--wm-tabs-item-heading-font-weight);
     line-height: var(--wm-tabs-item-heading-line-height);
-    color: var(--wm-tabs-item-heading-text);
+    color: var(--wm-tabs-item-heading-text-color);
 }
 .app-tabheader-active-item-text {
-    color: var(--wm-tabs-item-heading-text);
+    font-size: var(--wm-tabs-item-heading-font-size);
+    font-weight: var(--wm-tabs-item-heading-font-weight);
+    line-height: var(--wm-tabs-item-heading-line-height);
+    color: var(--wm-tabs-item-heading-text-color);
 }
 
 .app-tabheader-active-item-icon .app-icon-shape {
-    color: var(--wm-tabs-item-heading-icon);
+    color: var(--wm-tabs-item-heading-icon-color);
+    font-size: var(--wm-tabs-item-heading-icon-size);
+    height: var(--wm-tabs-item-heading-icon-height);
+    width: var(--wm-tabs-item-heading-icon-width);
 }
 
 .app-tabheader-item-icon .app-icon-shape {
-    color: var(--wm-tabs-item-heading-icon);
-    font-size: var(--wm-tabs-item-heading-font-size);
+    color: var(--wm-tabs-item-heading-icon-color);
+    font-size: var(--wm-tabs-item-heading-icon-size);
     height: var(--wm-tabs-item-heading-icon-height);
     width: var(--wm-tabs-item-heading-icon-width);
  

package/src/styles/mobile/components/container/tabs.less

@@ -1,10 +1,12 @@
 @import (optional) url('../variables/tabs.variant.less');
 
 .app-tabs {
+    width: 100%; // create and assign a variable for this.. ex: var(--wm-tabs-width), like accordion and expose it in the style ws
     background-color: var(--wm-tabs-background);
     border-radius: var(--wm-tabs-border-radius);
     border-style: var(--wm-tabs-border-style);
     border-width: var(--wm-tabs-border-width);
     border-bottom-width: var(--wm-tabs-border-width);
     border-color: var(--wm-tabs-border-color);
+    min-height: var(--wm-tabs-min-height);
 }

package/src/styles/mobile/components/container.less

@@ -8,7 +8,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    border-top-width: var(--wm-container-border-width-top);
+    border-bottom-width: var(--wm-container-border-width-bottom);
+    border-left-width: var(--wm-container-border-width-left);
+    border-right-width: var(--wm-container-border-width-right);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -23,7 +26,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    border-top-width: var(--wm-container-border-width-top);
+    border-bottom-width: var(--wm-container-border-width-bottom);
+    border-left-width: var(--wm-container-border-width-left);
+    border-right-width: var(--wm-container-border-width-right);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -39,7 +45,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    border-top-width: var(--wm-container-border-width-top);
+    border-bottom-width: var(--wm-container-border-width-bottom);
+    border-left-width: var(--wm-container-border-width-left);
+    border-right-width: var(--wm-container-border-width-right);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -54,7 +63,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    border-top-width: var(--wm-container-border-width-top);
+    border-bottom-width: var(--wm-container-border-width-bottom);
+    border-left-width: var(--wm-container-border-width-left);
+    border-right-width: var(--wm-container-border-width-right);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }