@utrecht/components/button-group/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2022 Frameless B.V.
 */
.utrecht-button-group {
  align-items: baseline;
  background-color: var(--utrecht-button-group-background-color);
  display: flex;
  flex-wrap: wrap;
  gap: var(--utrecht-button-group-inline-gap, 1em);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
  min-block-size: var(--utrecht-button-block-size);
  padding-block-end: var(--utrecht-button-group-padding-block-end);
  padding-block-start: var(--utrecht-button-group-padding-block-start);
}

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

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

.utrecht-button-group--column {
  flex-direction: column;
  gap: var(--utrecht-button-group-block-gap, 1em);
}