@oiz/stzh-components 2.1.0 → 2.2.0-beta

package/dist/collection/components/stzh-datalist/stzh-datalist.css

@@ -97,528 +97,40 @@
   box-sizing: border-box;
 }
 
+:host ::slotted(stzh-details),
+.stzh-datalist stzh-details {
+  --content-grid-column: 1 / 5;
+  --content-padding: var(--stzh-space-large) 0 var(--stzh-space-xlarge);
+  --content-border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-details),
+.stzh-datalist stzh-details {
+    --content-padding: var(--stzh-space-large) 0 var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-details),
+.stzh-datalist stzh-details {
+    --content-padding: var(--stzh-space-large) 0 var(--stzh-space-xxxlarge);
+  }
+}
+
 .stzh-datalist {
-  /* Direction variants */
-  /* Horizontal variant */
-  /* Vertical variant */
-  /* Vertical variant */
+  /* Has hidden border variant */
   /* Vertical variant */
-  /* Vertical variant */
-  /* Vertical variant */
-}
-.stzh-datalist__list-item {
-  position: relative;
 }
 .stzh-datalist__list {
   width: 100%;
 }
-.stzh-datalist__value {
-  font-size: var(--stzh-font-milli-font-size);
-  line-height: var(--stzh-font-milli-text-line-height);
-  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
-  color: var(--stzh-color-black);
-}
-.stzh-datalist__label, .stzh-datalist__meta {
-  font-size: var(--stzh-font-nano-font-size);
-  line-height: var(--stzh-font-nano-text-line-height);
-}
-.stzh-datalist__action {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  color: inherit;
-  cursor: pointer;
-  transition: color var(--stzh-base-transition-animation-speed);
-}
-.stzh-datalist__action:hover {
-  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}
-.stzh-datalist--direction-vertical .stzh-datalist__list {
-  display: block;
-}
-.stzh-datalist--direction-vertical .stzh-datalist__list-item {
-  display: block;
-  padding-top: var(--stzh-space-xsmall);
-  padding-bottom: var(--stzh-space-xsmall);
-}
-.stzh-datalist--direction-vertical .stzh-datalist__list-item--has-icon {
-  padding-right: calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default));
-}
-.stzh-datalist--direction-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-}
-.stzh-datalist--direction-vertical .stzh-datalist__label, .stzh-datalist--direction-vertical .stzh-datalist__value, .stzh-datalist--direction-vertical .stzh-datalist__meta, .stzh-datalist--direction-vertical .stzh-datalist__action-list {
-  display: block;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.stzh-datalist--direction-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-  border-bottom: none;
-}
-.stzh-datalist--direction-vertical .stzh-datalist__label:not(:empty) {
-  padding-right: 0;
-}
-.stzh-datalist--direction-vertical .stzh-datalist__meta:not(:empty) {
-  padding-left: 0;
-}
-.stzh-datalist--direction-vertical .stzh-datalist__action-list {
-  vertical-align: initial;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.stzh-datalist--direction-vertical .stzh-datalist__action-list:not(:empty) {
-  padding-left: var(--stzh-space-xsmall);
+.stzh-datalist--has-hidden-border .stzh-datalist__list {
+  margin-top: calc(var(--stzh-space-xsmall) / -2);
+  margin-bottom: calc(var(--stzh-space-xsmall) / -2);
 }
 .stzh-datalist--direction-horizontal .stzh-datalist__list {
-  display: table;
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__list-item {
-  display: table-row;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__list-item--has-icon {
-  padding-right: 0;
-}
-.stzh-datalist--direction-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-  border-bottom: none;
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__label, .stzh-datalist--direction-horizontal .stzh-datalist__value, .stzh-datalist--direction-horizontal .stzh-datalist__meta, .stzh-datalist--direction-horizontal .stzh-datalist__action-list {
-  display: table-cell;
-  padding-top: var(--stzh-space-xsmall);
-  padding-bottom: var(--stzh-space-xsmall);
-}
-.stzh-datalist--direction-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__label:not(:empty) {
-  padding-right: var(--stzh-space-xsmall);
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__meta:not(:empty) {
-  padding-left: var(--stzh-space-xsmall);
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__action-list {
-  vertical-align: top;
-  position: static;
-  right: auto;
-  top: auto;
-  transform: initial;
-}
-.stzh-datalist--direction-horizontal .stzh-datalist__action-list:not(:empty) {
-  padding-left: var(--stzh-space-xsmall);
-}
-@media screen and (min-width: 600px) {
-  .stzh-datalist {
-    /* Horizontal variant */
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__list {
-    display: block;
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__list-item {
-    display: block;
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__list-item--has-icon {
-    padding-right: calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default));
-  }
-  .stzh-datalist--direction-small-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__label, .stzh-datalist--direction-small-vertical .stzh-datalist__value, .stzh-datalist--direction-small-vertical .stzh-datalist__meta, .stzh-datalist--direction-small-vertical .stzh-datalist__action-list {
-    display: block;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-small-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-small-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-small-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-small-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__label:not(:empty) {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__meta:not(:empty) {
-    padding-left: 0;
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__action-list {
-    vertical-align: initial;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .stzh-datalist--direction-small-vertical .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__list {
-    display: table;
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__list-item {
-    display: table-row;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__list-item--has-icon {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-small-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__label, .stzh-datalist--direction-small-horizontal .stzh-datalist__value, .stzh-datalist--direction-small-horizontal .stzh-datalist__meta, .stzh-datalist--direction-small-horizontal .stzh-datalist__action-list {
-    display: table-cell;
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-small-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-small-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-small-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-small-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__label:not(:empty) {
-    padding-right: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__meta:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__action-list {
-    vertical-align: top;
-    position: static;
-    right: auto;
-    top: auto;
-    transform: initial;
-  }
-  .stzh-datalist--direction-small-horizontal .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-datalist {
-    /* Horizontal variant */
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__list {
-    display: block;
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__list-item {
-    display: block;
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__list-item--has-icon {
-    padding-right: calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default));
-  }
-  .stzh-datalist--direction-smallheader-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__label, .stzh-datalist--direction-smallheader-vertical .stzh-datalist__value, .stzh-datalist--direction-smallheader-vertical .stzh-datalist__meta, .stzh-datalist--direction-smallheader-vertical .stzh-datalist__action-list {
-    display: block;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-smallheader-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-smallheader-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-smallheader-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-smallheader-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__label:not(:empty) {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__meta:not(:empty) {
-    padding-left: 0;
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__action-list {
-    vertical-align: initial;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .stzh-datalist--direction-smallheader-vertical .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__list {
-    display: table;
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__list-item {
-    display: table-row;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__list-item--has-icon {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-smallheader-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__label, .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__value, .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__meta, .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__action-list {
-    display: table-cell;
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-smallheader-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-smallheader-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-smallheader-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-smallheader-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__label:not(:empty) {
-    padding-right: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__meta:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__action-list {
-    vertical-align: top;
-    position: static;
-    right: auto;
-    top: auto;
-    transform: initial;
-  }
-  .stzh-datalist--direction-smallheader-horizontal .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-datalist {
-    /* Horizontal variant */
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__list {
-    display: block;
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__list-item {
-    display: block;
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__list-item--has-icon {
-    padding-right: calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default));
-  }
-  .stzh-datalist--direction-medium-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__label, .stzh-datalist--direction-medium-vertical .stzh-datalist__value, .stzh-datalist--direction-medium-vertical .stzh-datalist__meta, .stzh-datalist--direction-medium-vertical .stzh-datalist__action-list {
-    display: block;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-medium-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-medium-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-medium-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-medium-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__label:not(:empty) {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__meta:not(:empty) {
-    padding-left: 0;
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__action-list {
-    vertical-align: initial;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .stzh-datalist--direction-medium-vertical .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__list {
-    display: table;
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__list-item {
-    display: table-row;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__list-item--has-icon {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-medium-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__label, .stzh-datalist--direction-medium-horizontal .stzh-datalist__value, .stzh-datalist--direction-medium-horizontal .stzh-datalist__meta, .stzh-datalist--direction-medium-horizontal .stzh-datalist__action-list {
-    display: table-cell;
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-medium-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-medium-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-medium-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-medium-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__label:not(:empty) {
-    padding-right: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__meta:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__action-list {
-    vertical-align: top;
-    position: static;
-    right: auto;
-    top: auto;
-    transform: initial;
-  }
-  .stzh-datalist--direction-medium-horizontal .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist {
-    /* Horizontal variant */
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__list {
-    display: block;
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__list-item {
-    display: block;
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__list-item--has-icon {
-    padding-right: calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default));
-  }
-  .stzh-datalist--direction-large-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__label, .stzh-datalist--direction-large-vertical .stzh-datalist__value, .stzh-datalist--direction-large-vertical .stzh-datalist__meta, .stzh-datalist--direction-large-vertical .stzh-datalist__action-list {
-    display: block;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-large-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-large-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-large-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-large-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__label:not(:empty) {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__meta:not(:empty) {
-    padding-left: 0;
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__action-list {
-    vertical-align: initial;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .stzh-datalist--direction-large-vertical .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__list {
-    display: table;
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__list-item {
-    display: table-row;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__list-item--has-icon {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-large-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__label, .stzh-datalist--direction-large-horizontal .stzh-datalist__value, .stzh-datalist--direction-large-horizontal .stzh-datalist__meta, .stzh-datalist--direction-large-horizontal .stzh-datalist__action-list {
-    display: table-cell;
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-large-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-large-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-large-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-large-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__label:not(:empty) {
-    padding-right: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__meta:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__action-list {
-    vertical-align: top;
-    position: static;
-    right: auto;
-    top: auto;
-    transform: initial;
-  }
-  .stzh-datalist--direction-large-horizontal .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-}
-@media screen and (min-width: 1440px) {
-  .stzh-datalist {
-    /* Horizontal variant */
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__list {
-    display: block;
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__list-item {
-    display: block;
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__list-item--has-icon {
-    padding-right: calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default));
-  }
-  .stzh-datalist--direction-ultra-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__label, .stzh-datalist--direction-ultra-vertical .stzh-datalist__value, .stzh-datalist--direction-ultra-vertical .stzh-datalist__meta, .stzh-datalist--direction-ultra-vertical .stzh-datalist__action-list {
-    display: block;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-ultra-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-ultra-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-ultra-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-ultra-vertical:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__label:not(:empty) {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__meta:not(:empty) {
-    padding-left: 0;
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__action-list {
-    vertical-align: initial;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .stzh-datalist--direction-ultra-vertical .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__list {
-    display: table;
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__list-item {
-    display: table-row;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__list-item--has-icon {
-    padding-right: 0;
-  }
-  .stzh-datalist--direction-ultra-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__list-item {
-    border-bottom: none;
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__label, .stzh-datalist--direction-ultra-horizontal .stzh-datalist__value, .stzh-datalist--direction-ultra-horizontal .stzh-datalist__meta, .stzh-datalist--direction-ultra-horizontal .stzh-datalist__action-list {
-    display: table-cell;
-    padding-top: var(--stzh-space-xsmall);
-    padding-bottom: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-ultra-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__label, .stzh-datalist--direction-ultra-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__value, .stzh-datalist--direction-ultra-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__meta, .stzh-datalist--direction-ultra-horizontal:not(.stzh-datalist--hide-border) .stzh-datalist__action-list {
-    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__label:not(:empty) {
-    padding-right: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__meta:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__action-list {
-    vertical-align: top;
-    position: static;
-    right: auto;
-    top: auto;
-    transform: initial;
-  }
-  .stzh-datalist--direction-ultra-horizontal .stzh-datalist__action-list:not(:empty) {
-    padding-left: var(--stzh-space-xsmall);
-  }
+  width: 100%;
+  display: grid;
+  border-collapse: collapse;
+  grid-template-columns: auto minmax(auto, 1fr) auto auto;
+  align-items: stretch;
 }