@utrecht/web-component-library-stencil/dist/collection/components/action-group.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) 2022 Frameless B.V.
*/
/**
* @license EUPL-1.2
* Copyright (c) 2022 Frameless B.V.
*/
.utrecht-action-group {
  align-items: baseline;
  background-color: var(--utrecht-action-group-background-color);
  break-inside: avoid;
  column-gap: var(--utrecht-action-group-column-gap, 1em);
  display: flex;
  flex-wrap: wrap;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-action-group-margin-block-start, 0));
  min-block-size: var(--utrecht-button-block-size);
  padding-block-end: var(--utrecht-action-group-padding-block-end);
  padding-block-start: var(--utrecht-action-group-padding-block-start);
  row-gap: var(--utrecht-action-group-row-gap, 1em);
}

.utrecht-action-group--distanced {
  --utrecht-space-around: 1;
}

.utrecht-action-group__link-button--row,
.utrecht-action-group--row .utrecht-link-button,
.utrecht-action-group:not(.utrecht-action-group--column) .utrecht-link-button {
  --utrecht-button-padding-inline-end: 0;
  --utrecht-button-padding-inline-start: 0;
}

.utrecht-action-group--column {
  flex-direction: column;
}

.utrecht-action-group--column-stretch {
  flex-direction: column;
  --utrecht-button-max-inline-size: none;
  align-items: stretch;
  inline-size: fit-content;
}

:host {
  display: block;
}

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