@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Content/content.css

@@ -1,256 +1,270 @@
+:root,
 .pf-v6-c-content {
-  --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
-  --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
-  --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
-  --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
-  --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
-  --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
-  --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
-  --pf-v6-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300);
-  --pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle);
-  --pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
+  --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
+  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
+  --pf-v6-c-content--dl--GridTemplateColumns--dt: 12ch;
+  --pf-v6-c-content--dl--GridTemplateColumns--dd: 1fr;
+  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
+  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
   --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--dt--sm--MarginTop: 0;
+  --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
   --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
+}
+
+[class*=pf-v6-c-content] {
   font-size: var(--pf-v6-c-content--FontSize);
   line-height: var(--pf-v6-c-content--LineHeight);
   color: var(--pf-v6-c-content--Color);
 }
-.pf-v6-c-content a {
+[class*=pf-v6-c-content].pf-m-editorial {
+  --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
+  --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
+}
+
+:is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
-  text-decoration: var(--pf-v6-c-content--a--TextDecoration);
+  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
 }
-.pf-v6-c-content a:hover {
+:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
   --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
-  --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
+  --pf-v6-c-content--a--TextDecorationLine: var(--pf-v6-c-content--a--hover--TextDecorationLine);
+  --pf-v6-c-content--a--TextDecorationStyle: var(--pf-v6-c-content--a--hover--TextDecorationStyle);
 }
-.pf-v6-c-content.pf-m-visited a:visited,
-.pf-v6-c-content a.pf-m-visited:visited {
+
+:is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
   color: var(--pf-v6-c-content--a--visited--Color);
 }
-.pf-v6-c-content li + li {
-  margin-block-start: var(--pf-v6-c-content--li--MarginTop);
-}
-.pf-v6-c-content p:not(:last-child),
-.pf-v6-c-content dl:not(:last-child),
-.pf-v6-c-content ol:not(:last-child),
-.pf-v6-c-content ul:not(:last-child),
-.pf-v6-c-content blockquote:not(:last-child),
-.pf-v6-c-content small:not(:last-child),
-.pf-v6-c-content pre:not(:last-child),
-.pf-v6-c-content table:not(:last-child),
-.pf-v6-c-content hr:not(:last-child) {
-  margin-block-end: var(--pf-v6-c-content--MarginBottom);
-}
-.pf-v6-c-content h1,
-.pf-v6-c-content h2,
-.pf-v6-c-content h3,
-.pf-v6-c-content h4,
-.pf-v6-c-content h5,
-.pf-v6-c-content h6 {
+
+:is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
+  margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
+}
+
+:is(.pf-v6-c-content--p,
+.pf-v6-c-content--dl,
+.pf-v6-c-content--ol,
+.pf-v6-c-content--ul,
+.pf-v6-c-content--blockquote,
+.pf-v6-c-content--small,
+.pf-v6-c-content--pre,
+.pf-v6-c-content--table,
+.pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
+  margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
+}
+
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
   margin: 0;
   font-family: var(--pf-v6-c-content--heading--FontFamily);
 }
-.pf-v6-c-content h1:first-child,
-.pf-v6-c-content h2:first-child,
-.pf-v6-c-content h3:first-child,
-.pf-v6-c-content h4:first-child,
-.pf-v6-c-content h5:first-child,
-.pf-v6-c-content h6:first-child {
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
   margin-block-start: 0;
 }
-.pf-v6-c-content h1:last-child,
-.pf-v6-c-content h2:last-child,
-.pf-v6-c-content h3:last-child,
-.pf-v6-c-content h4:last-child,
-.pf-v6-c-content h5:last-child,
-.pf-v6-c-content h6:last-child {
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
-.pf-v6-c-content ol,
-.pf-v6-c-content ul {
-  margin: 0;
-}
-.pf-v6-c-content ol.pf-m-plain,
-.pf-v6-c-content ul.pf-m-plain {
-  padding-inline-start: 0;
-  margin-inline-start: 0;
-  list-style: none;
-}
-.pf-v6-c-content h1 {
-  margin-block-start: var(--pf-v6-c-content--h1--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h1--MarginBottom);
+
+:is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
+  margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
   font-size: var(--pf-v6-c-content--h1--FontSize);
   font-weight: var(--pf-v6-c-content--h1--FontWeight);
   line-height: var(--pf-v6-c-content--h1--LineHeight);
 }
-.pf-v6-c-content h2 {
-  margin-block-start: var(--pf-v6-c-content--h2--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h2--MarginBottom);
+
+:is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
+  margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
   font-size: var(--pf-v6-c-content--h2--FontSize);
   font-weight: var(--pf-v6-c-content--h2--FontWeight);
   line-height: var(--pf-v6-c-content--h2--LineHeight);
 }
-.pf-v6-c-content h3 {
-  margin-block-start: var(--pf-v6-c-content--h3--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h3--MarginBottom);
+
+:is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
+  margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
   font-size: var(--pf-v6-c-content--h3--FontSize);
   font-weight: var(--pf-v6-c-content--h3--FontWeight);
   line-height: var(--pf-v6-c-content--h3--LineHeight);
 }
-.pf-v6-c-content h4 {
-  margin-block-start: var(--pf-v6-c-content--h4--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h4--MarginBottom);
+
+:is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
+  margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
   font-size: var(--pf-v6-c-content--h4--FontSize);
   font-weight: var(--pf-v6-c-content--h4--FontWeight);
   line-height: var(--pf-v6-c-content--h4--LineHeight);
 }
-.pf-v6-c-content h5 {
-  margin-block-start: var(--pf-v6-c-content--h5--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h5--MarginBottom);
+
+:is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
+  margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
   font-size: var(--pf-v6-c-content--h5--FontSize);
   font-weight: var(--pf-v6-c-content--h5--FontWeight);
   line-height: var(--pf-v6-c-content--h5--LineHeight);
 }
-.pf-v6-c-content h6 {
-  margin-block-start: var(--pf-v6-c-content--h6--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h6--MarginBottom);
+
+:is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
+  margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
   font-size: var(--pf-v6-c-content--h6--FontSize);
   font-weight: var(--pf-v6-c-content--h6--FontWeight);
   line-height: var(--pf-v6-c-content--h6--LineHeight);
 }
-.pf-v6-c-content small {
+
+:is(.pf-v6-c-content--small, .pf-v6-c-content small) {
   display: block;
   font-size: var(--pf-v6-c-content--small--FontSize);
   line-height: var(--pf-v6-c-content--small--LineHeight);
   color: var(--pf-v6-c-content--small--Color);
 }
-.pf-v6-c-content small:not(:last-child) {
-  margin-block-end: var(--pf-v6-c-content--small--MarginBottom);
+:is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
+  margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
 }
-.pf-v6-c-content blockquote {
-  padding-block-start: var(--pf-v6-c-content--blockquote--PaddingTop);
-  padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingRight);
+
+:is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
+  padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
   color: var(--pf-v6-c-content--blockquote--Color);
-  border-inline-start: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor);
+  border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
 }
-.pf-v6-c-content hr {
+
+:is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
   height: var(--pf-v6-c-content--hr--Height);
   background-color: var(--pf-v6-c-content--hr--BackgroundColor);
   border: none;
 }
-.pf-v6-c-content ol {
-  padding-inline-start: var(--pf-v6-c-content--ol--PaddingLeft);
-  margin-inline-start: var(--pf-v6-c-content--ol--MarginLeft);
+
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-v6-c-content--list--Gap);
+  padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
 }
-.pf-v6-c-content ol ul {
-  --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
+  padding-inline-start: 0;
+  list-style: none;
 }
-.pf-v6-c-content ol ol {
-  --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul,
+ol,
+ul) {
+  margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
 }
-.pf-v6-c-content ul {
-  padding-inline-start: var(--pf-v6-c-content--ul--PaddingLeft);
-  margin-inline-start: var(--pf-v6-c-content--ul--MarginLeft);
+
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
   list-style: var(--pf-v6-c-content--ul--ListStyle);
 }
-.pf-v6-c-content ul ul {
-  --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
-}
-.pf-v6-c-content ul ol {
-  --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
-}
-.pf-v6-c-content dl {
+
+:is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
   display: grid;
   grid-template-columns: 1fr;
 }
-@media screen and (min-width: 576px) {
-  .pf-v6-c-content dl {
-    grid-template: auto/auto 1fr;
+@media screen and (min-width: 36rem) {
+  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
+    grid-template: auto/var(--pf-v6-c-content--dl--GridTemplateColumns--dt) var(--pf-v6-c-content--dl--GridTemplateColumns--dd);
     grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
     grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
   }
 }
-.pf-v6-c-content dt {
+
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
   font-weight: var(--pf-v6-c-content--dt--FontWeight);
 }
-.pf-v6-c-content dt:not(:first-child) {
-  margin-block-start: var(--pf-v6-c-content--dt--MarginTop);
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
+  margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
 }
-@media screen and (min-width: 576px) {
-  .pf-v6-c-content dt:not(:first-child) {
-    --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop);
+@media screen and (min-width: 36rem) {
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
+    --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
   }
 }
-@media screen and (min-width: 576px) {
-  .pf-v6-c-content dt {
+@media screen and (min-width: 36rem) {
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
     grid-column: 1;
   }
 }
-@media screen and (min-width: 576px) {
-  .pf-v6-c-content dd {
+
+@media screen and (min-width: 36rem) {
+  :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
     grid-column: 2;
   }
 }