@utrecht/web-component-library-stencil/dist/collection/components/data-list-item.css

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* `@mixin utrecht-data-list--html-dl` is not necessary.
 * Default styles include only `display` and `margin`, and those properties are configured by default.
 */
/* `@mixin utrecht-data-list__item-key--html-dt` is not necessary, `<dt>` has no default styles. */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
:host {
  display: contents;
}

div {
  /* `break-inside: avoid` would probably be too much in situations, especially with nested lists */
  page-break-inside: avoid;
  --_utrecht-minmax: max(
    var(--utrecht-data-list-rows-column-min-inline-size, 25ch),
    var(--utrecht-data-list-rows-column-inline-size, 80%)
  );
  --_utrecht-auto-col: minmax(var(--_utrecht-minmax), max-content);
  border-block-end-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
  column-gap: var(--utrecht-data-list-rows-gap);
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(auto-fit, var(--_utrecht-auto-col));
  margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
  padding-block-end: var(--utrecht-data-list-rows-item-padding-block-end);
  padding-block-start: var(--utrecht-data-list-rows-item-padding-block-start);
  row-gap: 0;
}

:host([hidden]) {
  display: none !important;
}