@utrecht/component-library-css/dist/index.css

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

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2025 Frameless B.V.
 * Copyright (c) 2021-2025 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2024-2025 Gemeente Utrecht
 * Copyright (c) 2024-2025 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2023 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
@charset "UTF-8";
.utrecht-accordion {
  display: grid;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
  row-gap: var(--utrecht-accordion-row-gap);
}

.utrecht-accordion__section {
  border-block-start-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-start-style: solid;
  border-block-start-width: var(--utrecht-accordion-section-border-width, 0);
  break-inside: avoid;
}
.utrecht-accordion__section:is(:last-child, :only-child) {
  border-block-end-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-accordion-section-border-width, 0);
}
.utrecht-accordion__section:not(:last-child) {
  border-block-end-color: transparent;
}
.utrecht-accordion__section:hover {
  --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
}

.utrecht-accordion__button {
  --utrecht-button-focus-scale: 1;
  --utrecht-button-hover-scale: 1;
  --utrecht-button-inline-size: 100%;
  --utrecht-button-min-inline-size: 100%;
  --utrecht-button-subtle-background-color: var(--utrecht-accordion-button-background-color);
  --utrecht-button-subtle-padding-inline-start: var(--utrecht-accordion-button-padding-inline-start);
  --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
  --utrecht-button-subtle-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
  --utrecht-button-subtle-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
  --utrecht-button-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
  --utrecht-button-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
  --utrecht-button-subtle-color: var(--utrecht-accordion-button-color);
  --utrecht-button-subtle-hover-background-color: var(--utrecht-accordion-button-hover-background-color);
  --utrecht-button-subtle-hover-border-color: var(--utrecht-accordion-button-hover-border-color);
  --utrecht-button-subtle-hover-color: var(--utrecht-accordion-button-hover-color);
  --utrecht-button-subtle-active-background-color: var(--utrecht-accordion-button-active-background-color);
  --utrecht-button-subtle-active-border-color: var(--utrecht-accordion-button-active-border-color);
  --utrecht-button-subtle-active-color: var(--utrecht-accordion-button-active-color);
  --utrecht-button-subtle-focus-background-color: var(--utrecht-accordion-button-focus-background-color);
  --utrecht-button-subtle-focus-border-color: var(--utrecht-accordion-button-focus-border-color);
  --utrecht-button-subtle-focus-color: var(--utrecht-accordion-button-focus-color);
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-border-color);
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-border-width);
  --utrecht-button-icon-gap: var(--utrecht-accordion-button-gap, var(--utrecht-space-text-xs));
  align-items: baseline;
  justify-content: start !important;
  position: relative;
  text-align: start;
}
.utrecht-accordion__button:focus-visible {
  --utrecht-accordion-button-background-color: var(--utrecht-accordion-button-focus-visible-background-color);
  --utrecht-accordion-button-color: var(--utrecht-accordion-button-focus-visible-color);
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-focus-visible-border-color);
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-focus-visible-border-width);
}

.utrecht-accordion__button-icon {
  display: flex;
}
.utrecht-accordion__button[aria-expanded=true] .utrecht-accordion__button-icon {
  transform: rotate(180deg);
}

.utrecht-accordion__panel {
  border-block-start: none;
  border-color: var(--utrecht-accordion-panel-border-color);
  border-style: solid;
  border-width: var(--utrecht-accordion-panel-border-width);
  padding-block-end: var(--utrecht-accordion-panel-padding-block-end);
  padding-block-start: var(--utrecht-accordion-panel-padding-block-start);
  padding-inline-end: var(--utrecht-accordion-panel-padding-inline-end);
  padding-inline-start: var(--utrecht-accordion-panel-padding-inline-start);
}

.utrecht-accordion__header {
  align-items: center;
  display: flex;
  margin-block-end: 0;
  margin-block-start: 0;
}
.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;
}
.utrecht-alert-dialog:not(dialog:not([open])) {
  --utrecht-alert-dialog-margin-block-start: auto;
  --utrecht-alert-dialog-margin-block-end: auto;
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
  border-radius: var(--utrecht-alert-border-radius, 0);
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
  column-gap: var(--utrecht-alert-column-gap);
  display: flex;
  flex-direction: row;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
  padding-block-end: var(--utrecht-alert-padding-block-end);
  padding-block-start: var(--utrecht-alert-padding-block-start);
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
  align-self: center;
  border-color: var(--utrecht-alert-dialog-border-color);
  border-radius: var(--utrecht-alert-dialog-border-radius, 0);
  border-style: solid;
  border-width: var(--utrecht-alert-dialog-border-width, 0);
  box-shadow: var(--utrecht-alert-dialog-box-shadow);
  justify-self: center;
  max-block-size: min(var(--utrecht-alert-dialog-max-block-size), 100%);
  max-inline-size: min(var(--utrecht-alert-dialog-max-inline-size), 100%);
  min-block-size: var(--utrecht-alert-dialog-min-block-size);
  min-inline-size: var(--utrecht-alert-dialog-min-inline-size);
  overflow-y: auto;
  overflow-block: auto;
}

.utrecht-alert-dialog::backdrop {
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
  --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
  animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
  animation-name: utrecht-backdrop-fade-in;
  animation-timing-function: ease-in-out;
  background-color: var(--utrecht-backdrop-background-color);
  color: var(--utrecht-backdrop-color);
  opacity: var(--_utrecht-backdrop-opacity);
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .utrecht-alert-dialog::backdrop {
    --_utrecht-backdrop-fade-in-animation-duration: 0;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .utrecht-alert-dialog::backdrop {
    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
  }
}

.utrecht-alert-dialog__icon {
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
  --utrecht-icon-size: var(--utrecht-alert-icon-size);
  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
}

.utrecht-alert-dialog__message {
  --utrecht-heading-color: var(--utrecht-alert-color);
  --utrecht-paragraph-color: var(--utrecht-alert-color);
  row-gap: var(--utrecht-alert-message-row-gap);
}

.utrecht-alert-dialog--error {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-error-color);
}

.utrecht-alert-dialog--info {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-info-color);
}

.utrecht-alert-dialog--warning {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-warning-color);
}
.utrecht-alert {
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
  border-radius: var(--utrecht-alert-border-radius, 0);
  border-style: solid;
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
  column-gap: var(--utrecht-alert-column-gap);
  display: flex;
  flex-direction: row;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
  padding-block-end: var(--utrecht-alert-padding-block-end);
  padding-block-start: var(--utrecht-alert-padding-block-start);
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
}

.utrecht-alert__icon {
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
  --utrecht-icon-size: var(--utrecht-alert-icon-size);
  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
}

.utrecht-alert__content {
  row-gap: var(--utrecht-alert-content-row-gap);
}

.utrecht-alert__message {
  --utrecht-heading-color: var(--utrecht-alert-color);
  --utrecht-paragraph-color: var(--utrecht-alert-color);
  row-gap: var(--utrecht-alert-message-row-gap);
}

.utrecht-alert--info {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-info-color);
}

.utrecht-alert--ok {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-ok-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-ok-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-ok-color);
}

.utrecht-alert--warning {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-warning-color);
}

.utrecht-alert--error {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-error-color);
}
.utrecht-alternate-lang-nav__heading {
  display: none;
}
.utrecht-article {
  max-inline-size: var(--utrecht-article-max-inline-size);
}
.utrecht-backdrop {
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
  --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
  animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
  animation-name: utrecht-backdrop-fade-in;
  animation-timing-function: ease-in-out;
  background-color: var(--utrecht-backdrop-background-color);
  color: var(--utrecht-backdrop-color);
  opacity: var(--_utrecht-backdrop-opacity);
  -webkit-user-select: none;
  user-select: none;
  display: block;
  inset-block-end: 0;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  position: absolute;
  z-index: var(--utrecht-backdrop-z-index);
}
@media (prefers-reduced-motion: reduce) {
  .utrecht-backdrop {
    --_utrecht-backdrop-fade-in-animation-duration: 0;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .utrecht-backdrop {
    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
  }
}

.utrecht-backdrop--reduced-motion {
  --_utrecht-backdrop-fade-in-animation-duration: 0;
}

.utrecht-backdrop--reduced-transparency {
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
}

.utrecht-backdrop--viewport {
  position: fixed;
}
.utrecht-badge-counter {
  background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
  border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
  color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
  display: inline-block;
  font-family: var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
  font-size: var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));
  font-style: var(--utrecht-badge-counter-font-style, normal);
  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
  line-height: 1;
  max-block-size: max-content;
  max-inline-size: max-content;
  min-block-size: var(--utrecht-badge-counter-min-block-size, var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em)));
  min-inline-size: var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em));
  padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
  padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
  padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
  padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-badge-counter {
    border-color: currentColor;
    border-style: solid;
    border-width: 1px;
  }
}
.utrecht-badge-list {
  column-gap: var(--utrecht-badge-list-column-gap);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--utrecht-badge-list-row-gap);
}
.utrecht-badge-status {
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
  color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
  display: inline-block;
  font-family: var(--utrecht-document-font-family, sans-serif);
  font-size: var(--utrecht-badge-font-size, inherit);
  font-style: var(--utrecht-badge-font-style, normal);
  font-weight: var(--utrecht-badge-font-weight, bold);
  line-height: var(--utrecht-badge-line-height, 1em);
  max-block-size: max-content;
  max-inline-size: max-content;
  min-block-size: 1em;
  min-inline-size: 1em;
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
  padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
  text-decoration: none;
  letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
  text-transform: var(--utrecht-badge-status-text-transform, inherit);
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-badge-status {
    border-color: currentColor;
    border-style: solid;
    border-width: 1px;
  }
}

.utrecht-badge-status--danger {
  background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%));
  color: var(--utrecht-feedback-danger-fill-color, white);
}

.utrecht-badge-status--warning {
  background-color: var(--utrecht-feedback-warning-fill-background-color, hsl(48, 100%, 50%));
  color: var(--utrecht-feedback-warning-fill-color, white);
}

.utrecht-badge-status--safe {
  background-color: var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%));
  color: var(--utrecht-feedback-safe-fill-color, white);
}

.utrecht-badge-status--neutral {
  background-color: var(--utrecht-feedback-neutral-fill-background-color, black);
  color: var(--utrecht-feedback-neutral-fill-color, white);
}

.utrecht-badge-status--valid {
  background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
  color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
}

.utrecht-badge-status--invalid {
  background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39, 100%, 50%)));
  color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white));
}

.utrecht-badge-status--error {
  background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 30%)));
  color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white));
}

.utrecht-badge-status--success {
  background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
  color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white));
}

.utrecht-badge-status--active {
  background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
  color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white));
}

.utrecht-badge-status--inactive {
  background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%)));
  color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
}
.utrecht-blockquote {
  background-color: var(--utrecht-blockquote-background-color);
  border-color: var(--utrecht-blockquote-border-color);
  border-radius: var(--utrecht-blockquote-border-radius, 0);
  border-style: solid;
  border-width: var(--utrecht-blockquote-border-width, 0);
  border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
  color: var(--utrecht-blockquote-color);
  display: flex;
  flex-direction: column;
  font-family: var(--utrecht-document-font-family);
  font-size: var(--utrecht-blockquote-font-size);
  font-style: var(--utrecht-blockquote-font-style);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
  padding-block-end: var(--utrecht-blockquote-padding-block-end);
  padding-block-start: var(--utrecht-blockquote-padding-block-start);
  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
  row-gap: var(--utrecht-blockquote-row-gap, 0);
}
.utrecht-blockquote__attribution,
.utrecht-blockquote__caption {
  color: var(--utrecht-blockquote-caption-color, inherit);
  font-size: var(--utrecht-blockquote-caption-font-size, inherit);
}

.utrecht-blockquote__figure {
  display: flex;
  flex-direction: column;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  row-gap: var(--utrecht-blockquote-row-gap, 0);
}
.utrecht-blockquote__content,
.utrecht-blockquote__quote {
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
  color: var(--utrecht-blockquote-content-color, inherit);
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
}

.utrecht-blockquote--distanced {
  --utrecht-space-around: 1;
}

.utrecht-blockquote--html-blockquote {
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
  color: var(--utrecht-blockquote-content-color, inherit);
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
}
.utrecht-body {
  block-size: 100%;
  font-family: var(--utrecht-body-font-family, inherit);
  font-size: var(--utrecht-body-font-size, inherit);
  font-weight: var(--utrecht-body-font-weight, inherit);
  line-height: var(--utrecht-body-line-height, inherit);
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}
@media screen {
  .utrecht-body {
    min-block-size: 100vh;
    min-block-size: 100vb;
  }
}
.utrecht-breadcrumb-nav {
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
  --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-text-decoration);
  --utrecht-link-active-color: var(
    --utrecht-breadcrumb-nav-link-active-color,
    var(--utrecht-breadcrumb-nav-link-color)
  );
  --utrecht-link-active-text-decoration: var(
    --utrecht-breadcrumb-nav-link-focus-text-decoration,
    var(--utrecht-breadcrumb-nav-link-text-decoration)
  );
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
  --utrecht-link-focus-text-decoration: var(
    --utrecht-breadcrumb-nav-link-focus-text-decoration,
    var(--utrecht-breadcrumb-nav-link-text-decoration)
  );
  --utrecht-link-hover-color: var(--utrecht-breadcrumb-nav-link-hover-color, var(--utrecht-breadcrumb-nav-link-color));
  --utrecht-link-hover-text-decoration: var(
    --utrecht-breadcrumb-nav-link-hover-text-decoration,
    var(--utrecht-breadcrumb-nav-link-text-decoration)
  );
  --utrecht-link-visited-color: var(--utrecht-breadcrumb-nav-link-color);
  --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
  --utrecht-link-color: var(--utrecht-breadcrumb-nav-link-color);
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-breadcrumb-nav-font-size);
  line-height: var(--utrecht-breadcrumb-nav-line-height);
  text-transform: var(--utrecht-document-text-transform, inherit);
}

.utrecht-breadcrumb-nav__heading {
  display: none;
}

.utrecht-breadcrumb-nav__list {
  display: flex;
  flex-wrap: wrap;
  min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
}

.utrecht-breadcrumb-nav__list--html-ol {
  list-style: none;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-inline-start: 0;
}

.utrecht-breadcrumb-nav__list--html-p {
  margin-block-end: 0;
  margin-block-start: 0;
}

.utrecht-breadcrumb-nav__item {
  block-size: 100%;
}

.utrecht-breadcrumb-nav__link {
  --utrecht-icon-size: var(--utrecht-breadcrumb-nav-link-icon-size);
  --utrecht-link-icon-size: var(--utrecht-breadcrumb-nav-link-icon-size);
  background-color: var(--utrecht-breadcrumb-nav-link-background-color);
  display: inline-block;
  padding-block-end: var(--utrecht-breadcrumb-nav-item-padding-block-end, 8px);
  padding-block-start: var(--utrecht-breadcrumb-nav-item-padding-block-start, 8px);
  padding-inline-end: var(--utrecht-breadcrumb-nav-item-padding-inline-end, 8px);
  padding-inline-start: var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px);
}

.utrecht-breadcrumb-nav__link--first {
  padding-inline-start: var(--utrecht-breadcrumb-nav-item-first-padding-inline-start, var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px));
}

.utrecht-breadcrumb-nav__link--current {
  --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
  --_utrecht-breadcrumb-nav-link-current-cursor: var(--utrecht-action-inert-cursor, default);
  font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
}

.utrecht-breadcrumb-nav__link--disabled {
  --utrecht-link-placeholder-color: var(
    --utrecht-breadcrumb-nav-link-disabled-color,
    var(--utrecht-breadcrumb-nav-link-color)
  );
  --_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed);
  background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
  cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor));
}
.utrecht-breadcrumb-nav__separator {
  --_utrecht-breadcrumb-nav-separator-display: inline-flex;
  --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
  align-items: center;
  color: var(--utrecht-breadcrumb-nav-separator-color);
  cursor: var(--utrecht-action-inert-cursor, default);
  display: var(--_utrecht-breadcrumb-nav-separator-display);
  inline-size: fit-content;
  -webkit-user-select: none;
  user-select: none;
}

.utrecht-breadcrumb-nav__separator--html-li {
  --_utrecht-breadcrumb-nav-separator-display: inline-flex;
  --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
  align-items: center;
  color: var(--utrecht-breadcrumb-nav-separator-color);
  cursor: var(--utrecht-action-inert-cursor, default);
  display: var(--_utrecht-breadcrumb-nav-separator-display);
  inline-size: fit-content;
  -webkit-user-select: none;
  user-select: none;
}

.utrecht-breadcrumb-nav--arrows {
  --utrecht-breadcrumb-nav-arrow-size: 24px;
  min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
  overflow: hidden;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link {
  background-color: var(--utrecht-breadcrumb-nav-arrows-link-background-color);
  padding-inline-end: 0;
  position: relative;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
  block-size: 0;
  border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
  border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
  border-color: transparent;
  border-style: solid;
  content: " ";
  display: block;
  inline-size: 0;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));
  position: absolute;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after {
  border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-background-color);
  border-inline-start-width: var(--utrecht-breadcrumb-nav-arrow-size);
  z-index: 2;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
  border-inline-start-color: var(--utrecht-document-background-color);
  border-inline-start-width: var(--utrecht-breadcrumb-nav-arrow-size);
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));
  margin-inline-start: 1px;
  z-index: 1;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus {
  --utrecht-link-focus-background-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
  background-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus::after,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus::after {
  border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link ~ .utrecht-breadcrumb-nav__link,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item .utrecht-breadcrumb-nav__link {
  padding-inline-start: calc(var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size));
}

.utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item {
  margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
}
.utrecht-button-group {
  align-items: baseline;
  background-color: var(--utrecht-button-group-background-color);
  break-inside: avoid;
  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);
}
.utrecht-button-link {
  --_utrecht-button-background-color: var(
    --_utrecht-button-hint-background-color,
    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
  );
  --_utrecht-button-color: var(
    --_utrecht-button-hint-color,
    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
  );
  --_utrecht-button-border-color: var(
    --_utrecht-button-hint-border-color,
    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
  );
  --_utrecht-button-border-bottom-color: var(
    --_utrecht-button-hint-border-bottom-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-border-bottom-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
        )
      )
    )
  );
  --_utrecht-button-disabled-background-color: var(
    --_utrecht-button-hint-disabled-background-color,
    var(
      --_utrecht-button-appearance-disabled-background-color,
      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
    )
  );
  --_utrecht-button-disabled-border-color: var(
    --_utrecht-button-hint-disabled-border-color,
    var(
      --_utrecht-button-appearance-disabled-border-color,
      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
    )
  );
  --_utrecht-button-disabled-color: var(
    --_utrecht-button-hint-disabled-color,
    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
  );
  --_utrecht-button-pressed-background-color: var(
    --_utrecht-button-hint-pressed-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-pressed-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-border-color: var(
    --_utrecht-button-hint-pressed-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-pressed-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-color: var(
    --_utrecht-button-hint-pressed-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-pressed-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-focus-background-color: var(
    --_utrecht-button-hint-focus-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-focus-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-focus-border-color: var(
    --_utrecht-button-hint-focus-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-focus-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-focus-color: var(
    --_utrecht-button-hint-focus-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-focus-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-hover-background-color: var(
    --_utrecht-button-hint-hover-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-hover-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-hover-border-color: var(
    --_utrecht-button-hint-hover-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-hover-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-hover-color: var(
    --_utrecht-button-hint-hover-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-hover-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-active-background-color: var(
    --_utrecht-button-hint-active-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-active-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-active-border-color: var(
    --_utrecht-button-hint-active-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-active-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-active-color: var(
    --_utrecht-button-hint-active-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-active-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
  --_utrecht-button-border-block-end-width: var(
    --utrecht-button-border-bottom-width,
    var(--_utrecht-button-border-width, 0)
  );
  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  background-color: var(--_utrecht-button-background-color);
  block-size: fit-content;
  border-block-end-color: var(--_utrecht-button-border-bottom-color);
  border-block-end-width: var(--_utrecht-button-border-block-end-width);
  border-color: var(--_utrecht-button-border-color);
  border-radius: var(--utrecht-button-border-radius);
  border-style: solid;
  border-width: var(--_utrecht-button-border-width);
  box-sizing: border-box;
  color: var(--_utrecht-button-color);
  column-gap: var(--utrecht-button-column-gap);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: center;
  line-height: var(--_utrecht-button-line-height);
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  scale: 1;
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
  cursor: var(--utrecht-action-navigate-cursor, pointer);
  text-decoration: none;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-button-link {
    --_utrecht-button-disabled-border-color: GrayText;
    --_utrecht-button-disabled-color: GrayText;
    background-color: ButtonFace;
    border-color: buttonborder;
    color: ButtonText;
  }
}

.utrecht-button-link--active {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}

.utrecht-button-link--hover {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}

.utrecht-button-link--focus {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}

.utrecht-button-link--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-button-link--placeholder {
  background-color: var(--_utrecht-button-disabled-background-color);
  border-color: var(--_utrecht-button-disabled-border-color);
  color: var(--_utrecht-button-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-button-link--html-a:focus {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}
.utrecht-button-link--html-a:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.utrecht-button-link--html-a:hover {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}
.utrecht-button-link--html-a:active {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}

.utrecht-button-link--primary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
}

.utrecht-button-link--secondary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
}

.utrecht-button-link--subtle {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
  --_utrecht-button-appearance-focus-