@developer-overheid-nl/don-register-components 0.0.1-beta.1

package/dist/styles.css

@@ -0,0 +1,944 @@
+._button_8tc5x_1 {
+  --utrecht-button-padding-block-end: 0.125rem;
+  --utrecht-button-padding-block-start: 0.125rem;
+  --utrecht-button-padding-inline-end: 0.125rem;
+  --utrecht-button-padding-inline-start: 0.125rem;
+  --utrecht-button-min-block-size: 36px;
+  --utrecht-button-min-inline-size: 36px;
+}
+
+._icon_8tc5x_19 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+._alert_cond8_1 {
+  --utrecht-space-around: 1;
+}
+._alignBox_kyemf_1 {
+  display: flex;
+  inline-size: 100%;
+
+  .no-shrink {
+    flex-shrink: 0;
+  }
+}
+
+._inline_kyemf_19 {
+  inline-size: max-content;
+}
+
+._block_kyemf_27 {
+  inline-size: 100%;
+}
+
+._row_kyemf_35 {
+  flex-direction: row;
+}
+
+._column_kyemf_43 {
+  flex-direction: column;
+}
+
+._left_kyemf_51 {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+._center_kyemf_61,
+._middle_kyemf_63 {
+  align-items: center;
+  justify-content: center;
+}
+
+._right_kyemf_73 {
+  align-items: center;
+  justify-content: flex-end;
+}
+
+._top_kyemf_83 {
+  align-items: flex-start;
+  justify-content: center;
+}
+
+._bottom_kyemf_93 {
+  align-items: flex-end;
+  justify-content: center;
+}
+
+._topLeft_kyemf_103 {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+._topRight_kyemf_113 {
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+._bottomLeft_kyemf_123 {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+._bottomRight_kyemf_133 {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+._stretch_kyemf_143 {
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+._spaceBetween_kyemf_153 {
+  align-items: center;
+  justify-content: space-between;
+}
+
+._spaceAround_kyemf_163 {
+  align-items: center;
+  justify-content: space-around;
+}
+
+._spaceEvenly_kyemf_173 {
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+._gapNone_kyemf_183 {
+  gap: 0;
+}
+
+._gapSmall_kyemf_191 {
+  gap: 0.5rem;
+}
+
+._gapMedium_kyemf_199 {
+  gap: 1rem;
+}
+
+._gapLarge_kyemf_207 {
+  gap: 2rem;
+}
+._block_12iix_1 {
+  padding: 1rem;
+  border-radius: var(--rhc-card-as-link-border-radius);
+
+  &._flex-row_12iix_9,
+  &._flex-col_12iix_11 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &._flex-col_12iix_11 {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  &._clear_12iix_35 {
+    background-color: transparent;
+  }
+
+  &._filled_12iix_43 {
+    background-color: var(--rhc-card-as-link-hover-background-color);
+  }
+
+  &._outlined_12iix_51 {
+    border: 1px solid var(--rhc-card-as-link-border-color);
+  }
+}
+._cardAsLink_1qtqu_1._cardAsLink_1qtqu_1 {
+  &:hover {
+    .rhc-card-as-link__heading {
+      text-decoration: none;
+    }
+    .nl-heading {
+      text-decoration: var(
+        --rhc-card-as-link-active-text-decoration,
+        underline
+      );
+    }
+  }
+}
+
+.rhc-card-as-link__metadata {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+
+.rhc-card-as-link__footer {
+  --rhc-card-as-link-padding-block-start: 0;
+}
+._cardsList_193ys_1 {
+  --rhc-card-as-link-inline-size: 100%;
+  --rhc-card-as-link-active-text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-space-200);
+  padding-inline-start: 0;
+  list-style-type: none;
+}
+
+.rhc-card-as-link:hover
+    .rhc-card-as-link__heading.rhc-card-as-link__heading {
+  /* TODO: specifity */
+  .nl-heading {
+    text-decoration: underline;
+  }
+}
+._container_1mym9_1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--rhc-nav-bar-container-inline-size);
+
+  > * {
+    flex: 1;
+    max-inline-size: var(--rhc-nav-bar-max-inline-size);
+    padding-inline-start: var(--rhc-nav-bar-link-padding-inline-start);
+    padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  ._container_1mym9_1 {
+    > * {
+      padding-inline-start: calc(
+        var(--rhc-nav-bar-link-padding-inline-start) *
+        0.5
+      );
+      padding-inline-end: calc(
+        var(--rhc-nav-bar-link-padding-inline-end) *
+        0.5
+      );
+    }
+  }
+}
+._donDataBadge_hqyci_1._donDataBadge_hqyci_1 {
+  &._primary_hqyci_3 {
+    --_utrecht-data-badge-color: oklch(
+      from var(--utrecht-data-badge-color) calc(l - 0.1) c h
+    );
+    color: var(--_utrecht-data-badge-color);
+
+    &:hover {
+      color: var(--utrecht-data-badge-color);
+    }
+  }
+
+  &._outlined_hqyci_25 {
+    --_utrecht-data-badge-background-color: var(--rhc-color-canvas);
+    background-color: var(--_utrecht-data-badge-background-color);
+    border: 2px solid var(--utrecht-data-badge-color);
+
+    &:hover {
+      background-color: var(--utrecht-data-badge-background-color);
+      border-color: var(--utrecht-data-badge-background-color);
+    }
+  }
+
+  &._subtle_hqyci_47 {
+    --_utrecht-data-badge-color: var(--nl-link-color);
+    --_utrecht-data-badge-background-color: var(--rhc-color-cool-grey-200);
+    --utrecht-data-badge-font-weight: normal;
+    color: var(--_utrecht-data-badge-color);
+    background-color: var(--_utrecht-data-badge-background-color);
+
+    &:hover {
+      color: var(--rhc-color-cool-grey-50);
+      background-color: var(--rhc-color-cool-grey-500);
+    }
+  }
+}
+
+._badgeLink_hqyci_75 {
+  display: inline-block;
+  padding-block: 0.25rem;
+  color: inherit;
+  text-decoration: inherit;
+}
+.rhc-data-summary {
+  --rhc-data-summary-item-key-padding-inline-start: 0;
+  --rhc-data-summary-item-key-padding-inline-end: 0;
+  --rhc-data-summary-item-key-padding-block-start: 0;
+  --rhc-data-summary-item-key-padding-block-end: 0;
+  --rhc-data-summary-item-value-padding-inline-start: 0;
+  --rhc-data-summary-item-value-padding-inline-end: 0;
+  --rhc-data-summary-item-value-padding-block-start: 0;
+  --rhc-data-summary-item-value-padding-block-end: 0;
+  --rhc-data-summary-item-action-padding-inline-start: 0;
+  --rhc-data-summary-item-action-padding-inline-end: 0;
+  --rhc-data-summary-item-action-padding-block-start: 0;
+  --rhc-data-summary-item-action-padding-block-end: 0;
+  --rhc-data-summary-item-key-row-padding-inline-start: 0;
+  --rhc-data-summary-item-key-row-padding-inline-end: 0;
+  --rhc-data-summary-item-key-row-padding-block-start: 0;
+  --rhc-data-summary-item-key-row-padding-block-end: 0.75rem;
+  --rhc-data-summary-item-value-row-padding-inline-start: 0;
+  --rhc-data-summary-item-value-row-padding-inline-end: 0;
+  --rhc-data-summary-item-value-row-padding-block-start: 0;
+  --rhc-data-summary-item-value-row-padding-block-end: 0.75rem;
+  --rhc-data-summary-item-action-row-padding-inline-start: 0;
+  --rhc-data-summary-item-action-row-padding-inline-end: 0;
+  --rhc-data-summary-item-action-row-padding-block-start: 0;
+  --rhc-data-summary-item-action-row-padding-block-end: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.75rem;
+  margin-block-start: 0;
+  margin-block-end: 1rem;
+}
+
+.rhc-data-summary__item {
+  row-gap: 0.75rem;
+  column-gap: 1rem;
+}
+
+.rhc-data-summary--column {
+  .rhc-data-summary__item {
+    padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
+  }
+}
+
+.rhc-data-summary--row {
+  .rhc-data-summary__item {
+    justify-content: space-between;
+  }
+
+  .rhc-data-summary__item-value:last-child {
+    text-align: end;
+  }
+}
+
+.rhc-data-summary__item-key:empty,
+.rhc-data-summary__item-value:empty {
+  display: none;
+}
+
+.rhc-data-summary__item-value {
+  hyphens: auto;
+  word-break: break-word;
+}
+
+._isContained_fwue6_127 {
+  margin-block-end: 0;
+  .rhc-data-summary__item:last-child {
+    --rhc-data-summary-item-border-block-end-style: none;
+    --rhc-data-summary-item-key-row-padding-block-end: 0;
+  }
+}
+._filters_1h44t_1 {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-space-200);
+}
+
+._currentFilter_1h44t_13 {
+  flex-direction: column;
+}
+
+._active_1h44t_21 {
+  font-weight: bold;
+}
+
+._icon_1h44t_29 {
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.utrecht-link-list__link:hover ._icon_1h44t_29:not(._active_1h44t_21) {
+  transform: translateX(0.125rem);
+}
+
+._icon_1h44t_29._active_1h44t_21 {
+  transform: scale(1.5);
+}
+._container_1qzwx_1 {
+  /* border-block-end: 1px solid var(--rhc-nav-bar-border-color); */
+  margin-block-end: 1rem;
+}
+
+._navbar_1qzwx_11 {
+  .rhc-nav-bar__link {
+    align-items: center;
+    .don-icon-externe-link-inline {
+      order: 1;
+    }
+  }
+}
+
+@media (--md-and-below-viewport) {
+  ._navbar_1qzwx_11 {
+    flex-wrap: wrap;
+  }
+}
+
+/* TODO: hamburger menu ? */
+@media (--xs-and-below-viewport) {
+  ._navbar_1qzwx_11._navbar_1qzwx_11 {
+    flex-direction: column;
+    align-items: stretch;
+
+    .rhc-nav-bar__list {
+      justify-content: center;
+      border-block-end: 1px solid var(--rhc-nav-bar-border-color);
+    }
+
+    .rhc-nav-bar__list--end {
+      margin-inline-start: revert;
+      border-block-end: revert;
+    }
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  ._navbar_1qzwx_11 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (--xxxs-viewport) {
+  ._navbar_1qzwx_11 {
+    font-size: 0.75rem;
+  }
+}
+
+/* modifier style wasn't implemented in RHC */
+.rhc-nav-bar__link--bold {
+  font-weight: bold;
+}
+._footer_1ea1l_1 {
+  --utrecht-page-footer-padding-block-end: 2rem;
+  --utrecht-page-footer-padding-block-start: 1rem;
+  --utrecht-page-footer-padding-inline-end: var(
+    --rhc-nav-bar-link-padding-inline-end
+  );
+  --utrecht-page-footer-padding-inline-start: var(
+    --rhc-nav-bar-link-padding-inline-start
+  );
+  --rhc-page-footer-outlined-color: #154273;
+  --rhc-page-footer-outlined-border-color: var(--rhc-nav-bar-border-color);
+  --rhc-page-footer-border-block-start-width: var(
+    --rhc-nav-bar-border-block-end-width
+  );
+}
+
+._footer_1ea1l_1 {
+  .utrecht-column-layout {
+    display: flex;
+    justify-content: space-between;
+    inline-size: 100%;
+
+    > * {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  &._numColumns_1ea1l_57,
+  &._numColumns1_1ea1l_59 {
+    .utrecht-column-layout {
+      row-gap: 0.5rem;
+
+      > * {
+        flex-basis: 100%;
+      }
+    }
+  }
+
+  &._numColumns2_1ea1l_79 {
+    .utrecht-column-layout {
+      > * {
+        flex-basis: calc(50% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+
+  &._numColumns3_1ea1l_95 {
+    .utrecht-column-layout {
+      > * {
+        flex-basis: calc(33.333% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+  &._numColumns4_1ea1l_109 {
+    .utrecht-column-layout {
+      flex-wrap: wrap;
+
+      > * {
+        flex-basis: calc(25% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+
+  .utrecht-link-list__link {
+    align-items: center;
+    .don-icon-externe-link-inline {
+      order: 1;
+    }
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  ._footer_1ea1l_1._footer_1ea1l_1 {
+    .utrecht-column-layout {
+      row-gap: 0.5rem;
+
+      > * {
+        flex-basis: calc(50% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  ._footer_1ea1l_1._footer_1ea1l_1 {
+    .utrecht-column-layout {
+      row-gap: 0.5rem;
+
+      > * {
+        flex-basis: 100%;
+      }
+    }
+  }
+}
+
+.rhc-page-prefooter.rhc-page-prefooter {
+  margin-block-start: 2rem;
+
+  &:before {
+    background-color: var(--rhc-nav-bar-border-color);
+  }
+}
+._logo_1v9bt_1 {
+  display: grid;
+  grid-template-areas:
+    'vignet don'
+    'payoff payoff';
+  grid-template-columns: 2rem auto;
+  row-gap: 0.125rem;
+  column-gap: 0.25rem;
+  width: max-content;
+
+  &._forced-dark_1v9bt_21 {
+    outline: 0.25rem solid #000000;
+    background-color: #000000;
+  }
+}
+
+._vignet_1v9bt_33 {
+  grid-area: vignet;
+  height: 1.5rem;
+  margin-block-end: 0.25rem;
+}
+
+._rsaquo_1v9bt_45 {
+  color: #01689b;
+}
+
+._lowbar_1v9bt_53 {
+  color: #8fcae7;
+}
+
+._don_1v9bt_61 {
+  grid-area: don;
+  align-self: end;
+  height: 1.5rem;
+  color: #000000;
+}
+
+._payoff_1v9bt_75 {
+  grid-area: payoff;
+  height: 0.825rem;
+  color: #01689b;
+}
+
+@media (prefers-color-scheme: dark) {
+  ._logo_1v9bt_1:not(._forced-light_1v9bt_89) {
+    ._rsaquo_1v9bt_45 {
+      color: #66a4c3;
+    }
+    ._lowbar_1v9bt_53 {
+      color: #cce7f4;
+    }
+    ._don_1v9bt_61 {
+      color: #ffffff;
+    }
+    ._payoff_1v9bt_75 {
+      color: #cce7f4;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  ._rsaquo_1v9bt_45 {
+    color: #0f172a;
+  }
+  ._lowbar_1v9bt_53 {
+    color: #475569;
+  }
+  ._payoff_1v9bt_75 {
+    color: #0f172a;
+  }
+}
+
+@media (forced-colors: active) and (prefers-color-scheme: dark) {
+  ._rsaquo_1v9bt_45 {
+    color: #e2e8f0;
+  }
+  ._lowbar_1v9bt_53 {
+    color: #f8fafc;
+  }
+  ._don_1v9bt_61 {
+    color: #ffffff;
+  }
+  ._payoff_1v9bt_75 {
+    color: #e2e8f0;
+  }
+}
+._header_edw0m_1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0 0.5rem;
+
+  > * {
+    flex-basis: 33.3333%;
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  ._header_edw0m_1 {
+    flex-direction: column;
+
+    > * {
+      flex-basis: auto;
+    }
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  ._header_edw0m_1 {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+
+    > * {
+      flex-basis: auto;
+      order: 2;
+    }
+  }
+
+  ._lint_edw0m_65 {
+    flex-basis: 100%;
+    order: 1;
+  }
+}
+
+._title_edw0m_77 {
+  margin-inline-start: 1rem;
+  text-align: end;
+}
+
+._heading_edw0m_87 {
+  margin: 0;
+  margin-block-end: 0.5rem;
+}
+
+._icon_edw0m_97 {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  fill: currentColor;
+  transition: all 0.25s ease-in-out;
+}
+
+._link_edw0m_111._link_edw0m_111:any-link {
+  align-items: center;
+  text-decoration-line: none;
+  transition: all 0.25s ease-in-out;
+}
+
+._link_edw0m_111._link_edw0m_111:any-link:hover {
+  text-decoration-line: underline;
+  /* first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
+  text-decoration-skip-ink: auto;
+  text-decoration-skip-ink: all; /* bugged in Chromium */
+
+  ._icon_edw0m_97 {
+    transform: translateX(-0.0625rem);
+  }
+}
+._headingGroup_rivq7_1 {
+  inline-size: 100%;
+}
+.utrecht-data-badge--active {
+  --utrecht-data-badge-background-color: var(--rhc-color-groen-100);
+  --utrecht-data-badge-color: var(--rhc-color-groen-500);
+}
+
+.utrecht-data-badge--deprecated {
+  --utrecht-data-badge-background-color: var(--rhc-color-donkergeel-100);
+  --utrecht-data-badge-color: var(--rhc-color-donkergeel-500);
+}
+
+.utrecht-data-badge--sunset {
+  --utrecht-data-badge-background-color: var(--rhc-color-oranje-100);
+  --utrecht-data-badge-color: var(--rhc-color-oranje-500);
+}
+
+.utrecht-data-badge--retired {
+  --utrecht-data-badge-background-color: var(--rhc-color-rood-100);
+  --utrecht-data-badge-color: var(--rhc-color-rood-500);
+}
+._pagination_1tw3t_1 {
+  text-align: center;
+}
+
+.utrecht-pagination__page-link.utrecht-pagination__page-link--current:hover {
+  color: var(--utrecht-pagination-page-link-current-color);
+  background-color: var(
+    --utrecht-pagination-page-link-current-background-color
+  );
+  border-color: var(--utrecht-pagination-page-link-current-border-color);
+}
+:root {
+  --don-pill-badge-font-size: 0.875rem;
+  --don-pill-badge-gap: 0.5rem;
+  --don-pill-badge-border-radius: 5px;
+  --don-pill-badge-padding-inline: 0.5rem;
+  --don-pill-badge-padding-block: 0.25rem;
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-200);
+  --don-pill-badge-start-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-start-background-color: var(--rhc-color-cool-grey-700);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-light-color);
+  --don-pill-badge-end-background-color: var(--rhc-color-groen-100);
+  --don-pill-badge-border-color: linear-gradient(
+    to top,
+    rgba(51, 51, 51, 0.25),
+    rgba(204, 204, 204, 0.25)
+  );
+  --don-pill-badge-border-width: 1px;
+}
+
+._pill-badge-figure_1tk3o_39 {
+  display: contents;
+}
+
+._pill-badge_1tk3o_39 {
+  --percentage: 100%;
+  position: relative;
+  display: inline-block;
+  align-items: center;
+  width: fit-content;
+  height: auto;
+  overflow: clip;
+  font-size: var(--don-pill-badge-font-size);
+  background-color: var(--don-pill-badge-background-color);
+  border-radius: var(--don-pill-badge-border-radius);
+
+  /* Because Biome CSS parser does not yet support modern attr() some of the following is commented out.
+   * Fixme: remove this workaround when https://github.com/biomejs/biome/issues/6183 is closed and tested */
+
+  /* Browser has modern attr() support */
+  /*
+  @supports (x: attr(x type(*))) {
+    --percentage: attr(data-percentage %, 100%);
+  }
+  */
+
+  /* Browser does not have modern attr() support */
+  /* @supports not (x: attr(x type(*))) { */
+  &[data-percentage^='1'] {
+    --percentage: 10%;
+  }
+  &[data-percentage^='2'] {
+    --percentage: 20%;
+  }
+  &[data-percentage^='3'] {
+    --percentage: 30%;
+  }
+  &[data-percentage^='4'] {
+    --percentage: 40%;
+  }
+  &[data-percentage^='5'] {
+    --percentage: 50%;
+  }
+  &[data-percentage^='6'] {
+    --percentage: 60%;
+  }
+  &[data-percentage^='7'] {
+    --percentage: 70%;
+  }
+  &[data-percentage^='8'] {
+    --percentage: 80%;
+  }
+  &[data-percentage^='9'] {
+    --percentage: 90%;
+  }
+  &[data-percentage='100'] {
+    --percentage: 100%;
+  }
+  &[data-percentage='9'],
+  &[data-percentage='8'],
+  &[data-percentage='7'],
+  &[data-percentage='6'],
+  &[data-percentage='5'],
+  &[data-percentage='4'],
+  &[data-percentage='3'],
+  &[data-percentage='2'],
+  &[data-percentage='1'],
+  &[data-percentage='0'] {
+    --percentage: 0%;
+  }
+  /*}*/
+
+  /* --_don-pill-badge-end-color: attr(data-color type(<color>), var(--don-pill-badge-end-color));*/
+}
+
+._pill-badge_1tk3o_39::before {
+  position: absolute;
+  inset: 0;
+  content: '';
+  background: var(--don-pill-badge-border-color) border-box;
+  border: var(--don-pill-badge-border-width) solid transparent;
+  border-radius: var(--don-pill-badge-border-radius);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+._pill-badge__start_1tk3o_215 {
+  padding-block: var(--don-pill-badge-padding-block);
+  padding-inline: var(--don-pill-badge-padding-inline);
+  padding-inline-end: calc(0.5 * var(--don-pill-badge-gap));
+  color: var(--don-pill-badge-start-color);
+  background-color: var(--don-pill-badge-start-background-color);
+}
+
+._pill-badge__end_1tk3o_231 {
+  padding-block: var(--don-pill-badge-padding-block);
+  padding-inline: var(--don-pill-badge-padding-inline);
+  padding-inline-start: calc(0.5 * var(--don-pill-badge-gap));
+  color: var(--don-pill-badge-end-color);
+  background-color: var(--don-pill-badge-end-background-color);
+}
+
+._pill-badge--type-percentage_1tk3o_247 ._pill-badge__end_1tk3o_231 {
+  background: linear-gradient(
+    to right,
+    var(--don-pill-badge-end-background-color) var(--percentage),
+    var(--don-pill-badge-background-color) var(--percentage)
+  );
+}
+
+/* Pre-defined Rijkshuisstijl colors, 
+ * AA contrast checked, most are AAA prove, but not all because of font-size 
+ */
+[data-color='robijnrood'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-robijnrood-200);
+}
+[data-color='roze'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-roze-300);
+}
+[data-color='rood'] ._pill-badge__end_1tk3o_231 {
+  /* Not AAA prove */
+  --don-pill-badge-end-background-color: var(--rhc-color-rood-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='oranje'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-oranje-300);
+}
+[data-color='donkergeel'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-donkergeel-400);
+}
+[data-color='geel'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-geel-400);
+}
+[data-color='donkergroen'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-donkergroen-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='groen'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-groen-300);
+}
+[data-color='mosgroen'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-mosgroen-300);
+}
+[data-color='mintgroen'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-mintgroen-400);
+}
+[data-color='donkerblauw'] ._pill-badge__end_1tk3o_231 {
+  /* Not AAA prove */
+  --don-pill-badge-end-background-color: var(--rhc-color-donkerblauw-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='hemelblauw'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-hemelblauw-200);
+}
+[data-color='paars'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-paars-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='violet'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-violet-200);
+}
+[data-color='lichtblauw'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-lichtblauw-300);
+}
+[data-color='coolgrey'] ._pill-badge__end_1tk3o_231,
+[data-color='grijs'] ._pill-badge__end_1tk3o_231,
+[data-color='grey'] ._pill-badge__end_1tk3o_231 {
+  --don-pill-badge-end-background-color: var(--rhc-color-cool-grey-300);
+}
+._input_1hekh_1._input_1hekh_1 {
+  --utrecht-textbox-max-inline-size: none;
+  --utrecht-pointer-target-min-size: 36px;
+  /* field-sizing: content; */
+  inline-size: -webkit-fill-available;
+}
+._search_ft18e_1 {
+  --utrecht-textbox-border-width: 2px;
+  --utrecht-textbox-border-radius: 5px;
+  --utrecht-textbox-border-color: var(--rhc-color-cool-grey-900);
+}
+
+._form_ft18e_13 {
+  display: grid;
+  grid-template-areas: 'input button';
+  grid-template-columns: auto min-content;
+  gap: 0;
+  align-items: end;
+}
+
+@media (--xxs-and-below-viewport) {
+  ._form_ft18e_13 {
+    justify-content: center;
+  }
+}
+
+._input_ft18e_41 {
+  grid-area: input;
+
+  .utrecht-textbox {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .utrecht-textbox--html-input:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+._button_ft18e_69.utrecht-button {
+  grid-area: button;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}