ply-css 1.3.2 → 1.4.0

package/dist/css/ply-core.css

@@ -138,7 +138,7 @@
     --ply-color-table-stripped: #1c1c1c;
     --ply-color-table-hovered: #353535;
     --ply-color-accent: #4589ff;
-    --ply-btn-default-bg: #4589ff;
+    --ply-btn-default-bg: #0f62fe;
     --ply-btn-default-bg-hover: #619bff;
     --ply-btn-default-bg-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
     --ply-btn-default-bg-active: #73a6ff;
@@ -148,8 +148,9 @@
     --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), white 15%);
     --ply-btn-secondary-bg-active: #bebebe;
     --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), white 25%);
-    --ply-btn-default-color: #161616;
+    --ply-btn-default-color: #fff;
     --ply-btn-secondary-color: #161616;
+    --ply-btn-ghost-color: #4589ff;
     --ply-nav-bg: #161616;
     --ply-nav-color: #f4f4f4;
     --ply-nav-border: #f4f4f4;
@@ -233,7 +234,7 @@
   --ply-color-table-stripped: #1c1c1c;
   --ply-color-table-hovered: #353535;
   --ply-color-accent: #4589ff;
-  --ply-btn-default-bg: #4589ff;
+  --ply-btn-default-bg: #0f62fe;
   --ply-btn-default-bg-hover: #619bff;
   --ply-btn-default-bg-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
   --ply-btn-default-bg-active: #73a6ff;
@@ -243,8 +244,9 @@
   --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), white 15%);
   --ply-btn-secondary-bg-active: #bebebe;
   --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), white 25%);
-  --ply-btn-default-color: #161616;
+  --ply-btn-default-color: #fff;
   --ply-btn-secondary-color: #161616;
+  --ply-btn-ghost-color: #4589ff;
   --ply-nav-bg: #161616;
   --ply-nav-color: #f4f4f4;
   --ply-nav-border: #f4f4f4;
@@ -1845,16 +1847,15 @@ table tfoot td {
   display: flex;
   flex: 0 1 auto;
   flex-flow: row wrap;
-  margin: 0 -0.5rem 1.5rem;
+  gap: var(--units-gap, 1rem);
+  margin: 0 0 1.5rem;
 }
 .units-row.reverse-direction, .units-row.right-to-left {
   flex-direction: row-reverse;
 }
 .units-row.split {
-  margin: 0 0 1.5rem;
-}
-.units-row.split [class*=unit-] {
-  padding: 0;
+  --units-gap: 0px;
+  gap: 0;
 }
 .units-row.centered-content {
   justify-content: center;
@@ -1882,7 +1883,6 @@ table tfoot td {
 
 [class*=unit-] {
   box-sizing: border-box;
-  padding: 0 0.5rem;
 }
 [class*=unit-].fill-height {
   display: flex;
@@ -1895,102 +1895,82 @@ table tfoot td {
 
 .unit-100 {
   flex-basis: 100%;
-  max-width: 100%;
 }
 
 .unit-90 {
-  flex-basis: 90%;
-  max-width: 90%;
+  flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
 }
 
 .unit-88 {
-  flex-basis: 87.5%;
-  max-width: 87.5%;
+  flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
 }
 
 .unit-80 {
-  flex-basis: 80%;
-  max-width: 80%;
+  flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
 }
 
 .unit-75 {
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
 }
 
 .unit-70 {
-  flex-basis: 70%;
-  max-width: 70%;
+  flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
 }
 
 .unit-66 {
-  flex-basis: 66.6%;
-  max-width: 66.6%;
+  flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
 }
 
 .unit-65 {
-  flex-basis: 65%;
-  max-width: 65%;
+  flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
 }
 
 .unit-62 {
-  flex-basis: 62.5%;
-  max-width: 62.5%;
+  flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
 }
 
 .unit-60 {
-  flex-basis: 60%;
-  max-width: 60%;
+  flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
 }
 
 .unit-50 {
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
 }
 
 .unit-40 {
-  flex-basis: 40%;
-  max-width: 40%;
+  flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
 }
 
 .unit-38 {
-  flex-basis: 37.5%;
-  max-width: 37.5%;
+  flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
 }
 
 .unit-35 {
-  flex-basis: 35%;
-  max-width: 35%;
+  flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
 }
 
 .unit-33 {
-  flex-basis: 33.3%;
-  max-width: 33.3%;
+  flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
 }
 
 .unit-30 {
-  flex-basis: 30%;
-  max-width: 30%;
+  flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
 }
 
 .unit-25 {
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
 }
 
 .unit-20 {
-  flex-basis: 20%;
-  max-width: 20%;
+  flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
 }
 
 .unit-12 {
-  flex-basis: 12.5%;
-  max-width: 12.5%;
+  flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
 }
 
 .unit-10 {
-  flex-basis: 10%;
-  max-width: 10%;
+  flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
 }
 
 .forever-unit-auto {
@@ -2000,292 +1980,226 @@ table tfoot td {
 
 .forever-unit-100 {
   flex-basis: 100%;
-  max-width: 100%;
 }
 
 .forever-unit-90 {
-  flex-basis: 90%;
-  max-width: 90%;
+  flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
 }
 
 .forever-unit-88 {
-  flex-basis: 87.5%;
-  max-width: 87.5%;
+  flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
 }
 
 .forever-unit-80 {
-  flex-basis: 80%;
-  max-width: 80%;
+  flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
 }
 
 .forever-unit-75 {
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
 }
 
 .forever-unit-70 {
-  flex-basis: 70%;
-  max-width: 70%;
+  flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
 }
 
 .forever-unit-66 {
-  flex-basis: 66.6%;
-  max-width: 66.6%;
+  flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
 }
 
 .forever-unit-65 {
-  flex-basis: 65%;
-  max-width: 65%;
+  flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
 }
 
 .forever-unit-62 {
-  flex-basis: 62.5%;
-  max-width: 62.5%;
+  flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
 }
 
 .forever-unit-60 {
-  flex-basis: 60%;
-  max-width: 60%;
+  flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
 }
 
 .forever-unit-50 {
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
 }
 
 .forever-unit-40 {
-  flex-basis: 40%;
-  max-width: 40%;
+  flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
 }
 
 .forever-unit-38 {
-  flex-basis: 37.5%;
-  max-width: 37.5%;
+  flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
 }
 
 .forever-unit-35 {
-  flex-basis: 35%;
-  max-width: 35%;
+  flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
 }
 
 .forever-unit-33 {
-  flex-basis: 33.3%;
-  max-width: 33.3%;
+  flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
 }
 
 .forever-unit-30 {
-  flex-basis: 30%;
-  max-width: 30%;
+  flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
 }
 
 .forever-unit-25 {
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
 }
 
 .forever-unit-20 {
-  flex-basis: 20%;
-  max-width: 20%;
+  flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
 }
 
 .forever-unit-12 {
-  flex-basis: 12.5%;
-  max-width: 12.5%;
+  flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
 }
 
 .forever-unit-10 {
-  flex-basis: 10%;
-  max-width: 10%;
+  flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
 }
 
 @media (min-width: 1400px) {
   .large-screen-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .large-screen-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .large-screen-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .large-screen-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .large-screen-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .large-screen-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .large-screen-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .large-screen-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .large-screen-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .large-screen-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .large-screen-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .large-screen-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .large-screen-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .large-screen-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .large-screen-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (min-width: 1800px) {
   .x-large-screen-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .x-large-screen-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .x-large-screen-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .x-large-screen-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .x-large-screen-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .x-large-screen-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .x-large-screen-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .x-large-screen-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .x-large-screen-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .x-large-screen-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .x-large-screen-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .x-large-screen-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .x-large-screen-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .x-large-screen-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .x-large-screen-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 1024px) {
   .small-desktop-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .small-desktop-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .small-desktop-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .small-desktop-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .small-desktop-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .small-desktop-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .small-desktop-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .small-desktop-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .small-desktop-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .small-desktop-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .small-desktop-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .small-desktop-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .small-desktop-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .small-desktop-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .small-desktop-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .small-desktop-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 767px) {
@@ -2307,203 +2221,154 @@ table tfoot td {
   .unit-20,
   .unit-10 {
     flex-basis: 100%;
-    max-width: 100%;
   }
   .tablet-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .tablet-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .tablet-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .tablet-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .tablet-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .tablet-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .tablet-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .tablet-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .tablet-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .tablet-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .tablet-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .tablet-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .tablet-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .tablet-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .tablet-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .tablet-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 650px) {
   .large-phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .large-phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .large-phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .large-phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .large-phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .large-phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .large-phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .large-phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .large-phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .large-phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .large-phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .large-phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .large-phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .large-phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .large-phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .large-phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 480px) {
   .phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 .unit-push-90 {
@@ -3367,27 +3232,33 @@ table.table-hovered tbody tr:hover td {
 }
 
 .gap-xs {
-  gap: var(--ply-space-xs, 0.25rem);
+  --units-gap: var(--ply-space-xs, 0.25rem);
+  gap: var(--units-gap);
 }
 
 .gap-sm {
-  gap: var(--ply-space-sm, 0.5rem);
+  --units-gap: var(--ply-space-sm, 0.5rem);
+  gap: var(--units-gap);
 }
 
 .gap {
-  gap: var(--ply-space-md, 0.75rem);
+  --units-gap: var(--ply-space-md, 0.75rem);
+  gap: var(--units-gap);
 }
 
 .gap-lg {
-  gap: var(--ply-space-lg, 1.5rem);
+  --units-gap: var(--ply-space-lg, 1.5rem);
+  gap: var(--units-gap);
 }
 
 .gap-xl {
-  gap: var(--ply-space-xl, 2rem);
+  --units-gap: var(--ply-space-xl, 2rem);
+  gap: var(--units-gap);
 }
 
 .gap-xxl {
-  gap: var(--ply-space-xxl, 3rem);
+  --units-gap: var(--ply-space-xxl, 3rem);
+  gap: var(--units-gap);
 }
 
 .no-link-style a {
@@ -4752,7 +4623,7 @@ input[type=button].btn-ghost,
 input[type=reset].btn-ghost,
 button.btn-ghost {
   background: transparent;
-  color: var(--ply-btn-default-bg);
+  color: var(--ply-btn-ghost-color, var(--ply-btn-default-bg));
   border: none;
 }
 .btn-ghost:hover, .btn-ghost:active, .btn-ghost:focus-visible,
@@ -4769,7 +4640,7 @@ button.btn-ghost:hover,
 button.btn-ghost:active,
 button.btn-ghost:focus-visible {
   background: var(--ply-bg-muted, rgba(128, 128, 128, 0.1));
-  color: var(--ply-btn-default-bg);
+  color: var(--ply-btn-ghost-color, var(--ply-btn-default-bg));
 }
 .btn-ghost:focus-visible,
 input[type=submit].btn-ghost:focus-visible,
@@ -4787,8 +4658,8 @@ input[type=reset].btn-primary-outline,
 button.btn-primary-outline {
   background: transparent;
   padding: 0.5625rem 1.5rem;
-  border: 1px solid var(--ply-btn-default-bg);
-  color: var(--ply-btn-default-bg);
+  border: 1px solid var(--ply-btn-ghost-color, var(--ply-btn-default-bg));
+  color: var(--ply-btn-ghost-color, var(--ply-btn-default-bg));
 }
 .btn-primary-outline:hover, .btn-primary-outline:active, .btn-primary-outline:focus-visible,
 input[type=submit].btn-primary-outline:hover,
@@ -5831,84 +5702,64 @@ button.btn-white.btn-outline.btn-active {
 
 @container (max-width: 480px) {
   .container-phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-phone-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-phone-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-phone-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-phone-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-phone-unit-auto {
     flex-basis: 0;
@@ -5917,84 +5768,64 @@ button.btn-white.btn-outline.btn-active {
 }
 @container (max-width: 650px) {
   .container-large-phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-large-phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-large-phone-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-large-phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-large-phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-large-phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-large-phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-large-phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-large-phone-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-large-phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-large-phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-large-phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-large-phone-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-large-phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-large-phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-large-phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-large-phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-large-phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-large-phone-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-large-phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-large-phone-unit-auto {
     flex-basis: 0;
@@ -6003,84 +5834,64 @@ button.btn-white.btn-outline.btn-active {
 }
 @container (max-width: 767px) {
   .container-tablet-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-tablet-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-tablet-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-tablet-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-tablet-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-tablet-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-tablet-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-tablet-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-tablet-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-tablet-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-tablet-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-tablet-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-tablet-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-tablet-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-tablet-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-tablet-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-tablet-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-tablet-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-tablet-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-tablet-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-tablet-unit-auto {
     flex-basis: 0;
@@ -6089,84 +5900,64 @@ button.btn-white.btn-outline.btn-active {
 }
 @container (max-width: 1024px) {
   .container-small-desktop-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-small-desktop-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-small-desktop-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-small-desktop-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-small-desktop-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-small-desktop-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-small-desktop-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-small-desktop-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-small-desktop-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-small-desktop-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-small-desktop-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-small-desktop-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-small-desktop-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-small-desktop-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-small-desktop-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-small-desktop-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-small-desktop-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-small-desktop-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-small-desktop-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-small-desktop-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-small-desktop-unit-auto {
     flex-basis: 0;