@patternfly/react-styles 6.0.0-alpha.5 → 6.0.0-alpha.6

package/css/components/Divider/divider.css

@@ -47,340 +47,260 @@
   }
 }
 
+:root,
+:where(.pf-v5-c-divider) {
+  --pf-v5-c-divider--Display: flex;
+  --pf-v5-c-divider--Color: var(--pf-t--global--border--color--default);
+  --pf-v5-c-divider--Size: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-divider--before--FlexBasis: 100%;
+}
+
 .pf-v5-c-divider {
-  --pf-v5-c-divider--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-divider--BorderColor--base: var(--pf-v5-c-divider--BackgroundColor);
-  --pf-v5-c-divider--Height: var(--pf-v5-c-divider--BorderWidth--base);
-  --pf-v5-c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-divider--BorderColor--base);
-  --pf-v5-c-divider--after--FlexBasis: 100%;
-  --pf-v5-c-divider--after--Inset: 0%;
-  --pf-v5-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-v5-c-divider--m-horizontal--Display: flex;
-  --pf-v5-c-divider--m-horizontal--FlexDirection: row;
-  --pf-v5-c-divider--m-horizontal--after--Height: var(--pf-v5-c-divider--Height);
-  --pf-v5-c-divider--m-horizontal--after--Width: auto;
-  --pf-v5-c-divider--m-vertical--Display: inline-flex;
-  --pf-v5-c-divider--m-vertical--FlexDirection: column;
-  --pf-v5-c-divider--m-vertical--after--Height: auto;
-  --pf-v5-c-divider--m-vertical--after--Width: var(--pf-v5-c-divider--BorderWidth--base);
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
-  --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-  --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-  --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-  --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+  flex-direction: row;
   width: 100%;
-  height: auto;
-  flex-direction: var(--pf-v5-c-divider--FlexDirection);
-  flex-shrink: 0;
-  align-items: center;
-  align-self: stretch;
+  height: var(--pf-v5-c-divider--Size);
+  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
+  align-items: stretch;
   justify-content: center;
   border: 0;
 }
-.pf-v5-c-divider::after {
-  flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
-}
-.pf-v5-c-divider::after {
-  align-self: stretch;
-  justify-self: center;
-  width: var(--pf-v5-c-divider--after--Width);
-  height: var(--pf-v5-c-divider--after--Height);
+.pf-v5-c-divider::before {
+  flex-basis: var(--pf-v5-c-divider--before--FlexBasis);
   content: "";
-  background-color: var(--pf-v5-c-divider--after--BackgroundColor);
+  background-color: var(--pf-v5-c-divider--Color);
 }
-.pf-v5-c-divider.pf-m-vertical {
-  --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-  --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-  --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-  --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-  width: auto;
-  height: inherit;
+.pf-v5-c-divider.pf-m-horizontal {
+  flex-direction: row;
+  width: 100%;
+  height: var(--pf-v5-c-divider--Size);
 }
-.pf-v5-c-divider.pf-m-vertical::after {
-  flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+.pf-v5-c-divider.pf-m-vertical {
+  flex-direction: column;
+  width: var(--pf-v5-c-divider--Size);
+  height: 100%;
 }
 .pf-v5-c-divider.pf-m-inset-none {
-  --pf-v5-c-divider--after--Inset: 0%;
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
 }
 .pf-v5-c-divider.pf-m-inset-xs {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-sm {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-md {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-lg {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-xl {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-2xl {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-3xl {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
 }
+
 @media (min-width: 576px) {
   .pf-v5-c-divider.pf-m-horizontal-on-sm {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-sm::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 576px) {
   .pf-v5-c-divider.pf-m-vertical-on-sm {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-sm::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 576px) {
   .pf-v5-c-divider.pf-m-inset-none-on-sm {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-divider.pf-m-horizontal-on-md {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-md::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-divider.pf-m-vertical-on-md {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-md::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-divider.pf-m-inset-none-on-md {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-divider.pf-m-horizontal-on-lg {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-lg::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-divider.pf-m-vertical-on-lg {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-lg::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-divider.pf-m-inset-none-on-lg {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-divider.pf-m-horizontal-on-xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-divider.pf-m-vertical-on-xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-divider.pf-m-inset-none-on-xl {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-divider.pf-m-horizontal-on-2xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-2xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-divider.pf-m-vertical-on-2xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-2xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-divider.pf-m-inset-none-on-2xl {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }

package/css/components/Divider/divider.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "horizontal": "pf-m-horizontal",
     "vertical": "pf-m-vertical",
     "insetNone": "pf-m-inset-none",
     "insetXs": "pf-m-inset-xs",

package/css/components/Divider/divider.js

@@ -15,6 +15,7 @@ exports.default = {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "horizontal": "pf-m-horizontal",
     "vertical": "pf-m-vertical",
     "insetNone": "pf-m-inset-none",
     "insetXs": "pf-m-inset-xs",

package/css/components/Divider/divider.mjs

@@ -13,6 +13,7 @@ export default {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "horizontal": "pf-m-horizontal",
     "vertical": "pf-m-vertical",
     "insetNone": "pf-m-inset-none",
     "insetXs": "pf-m-inset-xs",