npm - @oiz/stzh-components - Versions diffs - 1.5.0-alpha → 2.0.0 - Mend

@oiz/stzh-components 1.5.0-alpha → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (515) hide show

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

@@ -0,0 +1,621 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+.stzh-datalist {
+  /* Direction variants */
+  /* Horizontal variant */
+  /* Vertical variant */
+  /* Vertical 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--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);
+  }
+}