@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/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/components/Divider/divider.scss

@@ -1,98 +1,80 @@
 // @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
 $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
 
+// * Divider horizontal
 @mixin pf-v5-c-divider--m-horizontal {
-  --#{$divider}--Display: var(--#{$divider}--m-horizontal--Display);
-  --#{$divider}--FlexDirection: var(--#{$divider}--m-horizontal--FlexDirection);
-  --#{$divider}--after--Width: var(--#{$divider}--m-horizontal--after--Width);
-  --#{$divider}--after--Height: var(--#{$divider}--m-horizontal--after--Height);
-
-  width: 100%; // update to var breaking change
-  height: auto; // update to var breaking change
-
-  &::after {
-    flex-basis:
-      calc(
-        var(--#{$divider}--after--FlexBasis) - calc(var(--#{$divider}--after--Inset) * 2)
-      ); // update at breaking change
-  }
+  flex-direction: row;
+  width: 100%;
+  height: var(--#{$divider}--Size);  // apply size to height in horizontal orientation
 }
 
+// * Divider vertical
 @mixin pf-v5-c-divider--m-vertical {
-  --#{$divider}--Display: var(--#{$divider}--m-vertical--Display);
-  --#{$divider}--FlexDirection: var(--#{$divider}--m-vertical--FlexDirection);
-  --#{$divider}--after--Width: var(--#{$divider}--m-vertical--after--Width);
-  --#{$divider}--after--Height: var(--#{$divider}--m-vertical--after--Height);
+  flex-direction: column;
+  width: var(--#{$divider}--Size); // apply size to width in vertical orientation
+  height: 100%;
+}
 
-  width: auto; // update to var breaking change
-  height: inherit; // update to var at breaking change
+:root,
+:where(.#{$divider}) {
+  // * Divider
+  --#{$divider}--Display: flex;
+  --#{$divider}--Color: var(--pf-t--global--border--color--default);
+  --#{$divider}--Size: var(--pf-t--global--border--width--divider--default);
 
-  &::after {
-    flex-basis:
-      calc(
-        var(--#{$divider}--m-vertical--after--FlexBasis) - var(--#{$divider}--after--Inset)
-      ); // update at breaking change
-  }
+  // * Divider before
+  --#{$divider}--before--FlexBasis: 100%;
 }
 
+// - Divider
 .#{$divider} {
-  // Base
-  --#{$divider}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$divider}--BorderColor--base: var(--#{$divider}--BackgroundColor); // update at breaking change
-  --#{$divider}--Height: var(--#{$divider}--BorderWidth--base); // remove at breaking change
-  --#{$divider}--BackgroundColor: var(--#{$pf-global}--BorderColor--100); // remove at breaking change
-  --#{$divider}--after--BackgroundColor: var(--#{$divider}--BorderColor--base); // remove at breaking change
-
-  // Borders
-  --#{$divider}--after--FlexBasis: 100%;
-  --#{$divider}--after--Inset: 0%;
-
-  // Vertical
-  --#{$divider}--m-vertical--after--FlexBasis: 100%; // remove at breaking change
-
-  // Horizontal mixin
-  --#{$divider}--m-horizontal--Display: flex;
-  --#{$divider}--m-horizontal--FlexDirection: row;
-  --#{$divider}--m-horizontal--after--Height: var(--#{$divider}--Height); // update at breaking change
-  --#{$divider}--m-horizontal--after--Width: auto;
-
-  // Vertical mixin
-  --#{$divider}--m-vertical--Display: inline-flex;
-  --#{$divider}--m-vertical--FlexDirection: column;
-  --#{$divider}--m-vertical--after--Height: auto;
-  --#{$divider}--m-vertical--after--Width: var(--#{$divider}--BorderWidth--base); // remove at breaking change
-
-  // Vertical
+  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
   @include pf-v5-hidden-visible(var(--#{$divider}--Display));
-  @include pf-v5-c-divider--m-horizontal; // set to default to horizontal
 
-  flex-direction: var(--#{$divider}--FlexDirection);
-  flex-shrink: 0;
-  align-items: center;
-  align-self: stretch;
+  align-items: stretch;
   justify-content: center;
   border: 0; // removes the default border styling on an hr
 
-  &::after {
-    align-self: stretch;
-    justify-self: center;
-    width: var(--#{$divider}--after--Width);
-    height: var(--#{$divider}--after--Height);
+  // - Divider before
+  &::before {
+    flex-basis: var(--#{$divider}--before--FlexBasis);
     content: "";
-    background-color: var(--#{$divider}--after--BackgroundColor);
+    background-color: var(--#{$divider}--Color);
   }
 
-  // stylelint-disable max-nesting-depth
+  // - Divider horizontal
+  &.pf-m-horizontal {
+    @include pf-v5-c-divider--m-horizontal;
+  }
+
+  // - Divider vertical
+  &.pf-m-vertical {
+    @include pf-v5-c-divider--m-vertical;
+  }
 
+  // - Divider spacer insets
+  @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+    @if $spacer == none {
+      $spacer-value: 0%;
+    }
+
+    &.pf-m-inset-#{$spacer} {
+      --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
+    }
+  }
+}
+
+// TODO: move this loop to separate file for resize observer implementation
+// TODO: make responsive values opt in/out
+// stylelint-disable
+.#{$divider} {
   @each $breakpoint, $breakpoint-value in $pf-v5-c-divider--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: '-on-' + #{$breakpoint};
 
-    @if $breakpoint != "base" {
-      @include pf-v5-apply-breakpoint($breakpoint) {
-        &.pf-m-horizontal#{$breakpoint-name} {
-          @include pf-v5-c-divider--m-horizontal;
-        }
+    @include pf-v5-apply-breakpoint($breakpoint) {
+      &.pf-m-horizontal#{$breakpoint-name} {
+        @include pf-v5-c-divider--m-horizontal;
       }
     }
 
@@ -104,16 +86,15 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
     @include pf-v5-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
-        @if $spacer == none {
-          $spacer-value: 0%;
-        }
-
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
-          --#{$divider}--after--Inset: #{$spacer-value};
+          @if $spacer == none {
+            --#{$divider}--before--FlexBasis: 100%;
+          } @else {
+            --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
+          }
         }
       }
     }
   }
-
-  // stylelint-enable
 }
+// stylelint-enable