@rijkshuisstijl-community/components-css 1.0.0-alpha.27 → 1.0.0-alpha.6

package/hero/_mixin.scss

@@ -1,93 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-hero {
-  block-size: auto;
-  inline-size: var(--rhc-hero-inline-size);
-  overflow: hidden;
-  position: relative;
-}
-
-@mixin rhc-hero--aspect-ratio-16-9 {
-  aspect-ratio: 16 / 9;
-}
-
-@mixin rhc-hero--aspect-ratio-1-1 {
-  aspect-ratio: 1 / 1;
-}
-
-@mixin rhc-hero--aspect-ratio-4-3 {
-  aspect-ratio: 4 / 3;
-}
-
-@mixin rhc-hero__message {
-  background-color: var(--rhc-hero-message-background-color);
-  box-sizing: border-box;
-  color: var(--rhc-hero-message-color, inherit);
-  display: flex;
-  flex-direction: column;
-  inline-size: var(--rhc-hero-message-inline-size);
-  inset-block-end: 0;
-  padding-block-end: var(--rhc-hero-message-padding-block-end);
-  padding-block-start: var(--rhc-hero-message-padding-block-start);
-  padding-inline-end: var(--rhc-hero-message-padding-inline-end);
-  padding-inline-start: var(--rhc-hero-message-padding-inline-start);
-  position: absolute;
-  row-gap: var(--rhc-hero-message-row-gap);
-}
-
-@mixin rhc-hero__heading-group {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-hero-message-heading-group-row-gap, var(--rhc-hero-message-row-gap));
-}
-
-@mixin rhc-hero--border-radius-corner-end-end {
-  border-end-end-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero--border-radius-corner-end-start {
-  border-end-start-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero--border-radius-corner-start-end {
-  border-start-end-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero--border-radius-corner-start-start {
-  border-start-start-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero__message--text-align-start {
-  border-start-end-radius: var(--rhc-hero-message-border-radius);
-  inset-inline-start: 0;
-}
-
-@mixin rhc-hero__message--text-align-end {
-  border-start-start-radius: var(--rhc-hero-message-border-radius);
-  inset-inline-end: 0;
-}
-
-@mixin rhc-hero__image {
-  block-size: auto;
-  inline-size: var(--rhc-hero-inline-size);
-  position: relative;
-}
-
-@mixin rhc-hero__heading {
-  color: currentColor;
-  font-family: var(--rhc-hero-heading-font-family);
-  font-size: var(--rhc-hero-heading-font-size);
-  font-weight: var(--rhc-hero-heading-font-weight);
-  line-height: var(--rhc-hero-heading-line-height);
-}
-
-@mixin rhc-hero__sub-heading {
-  color: currentColor;
-  font-family: var(--rhc-hero-sub-heading-font-family);
-  font-size: var(--rhc-hero-sub-heading-font-size);
-  font-weight: var(--rhc-hero-sub-heading-font-weight);
-  line-height: var(--rhc-hero-sub-heading-line-height);
-}

package/hero/index.scss

@@ -1,73 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-@import "./mixin";
-
-.rhc-hero {
-  @include rhc-hero;
-}
-
-.rhc-hero--aspect-ratio-16-9 {
-  @include rhc-hero--aspect-ratio-16-9;
-}
-
-.rhc-hero--aspect-ratio-1-1 {
-  @include rhc-hero--aspect-ratio-1-1;
-}
-
-.rhc-hero--aspect-ratio-4-3 {
-  @include rhc-hero--aspect-ratio-4-3;
-}
-
-.rhc-hero__message {
-  @include rhc-hero__message;
-}
-
-.rhc-hero__message .utrecht-heading-group {
-  @include rhc-hero__heading-group;
-}
-
-.rhc-hero--text-align-start:not(.rhc-hero--custom-border-radius-corner) {
-  @include rhc-hero--border-radius-corner-start-start;
-}
-
-.rhc-hero--text-align-start .rhc-hero__message {
-  @include rhc-hero__message--text-align-start;
-}
-
-.rhc-hero--text-align-end:not(.rhc-hero--custom-border-radius-corner) {
-  @include rhc-hero--border-radius-corner-start-end;
-}
-
-.rhc-hero--text-align-end .rhc-hero__message {
-  @include rhc-hero__message--text-align-end;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-start-start {
-  @include rhc-hero--border-radius-corner-start-start;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-start-end {
-  @include rhc-hero--border-radius-corner-start-end;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-end-start {
-  @include rhc-hero--border-radius-corner-end-start;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-end-end {
-  @include rhc-hero--border-radius-corner-end-end;
-}
-
-.rhc-hero__image {
-  @include rhc-hero__image;
-}
-
-.rhc-hero__heading {
-  @include rhc-hero__heading;
-}
-
-.rhc-hero__sub-heading {
-  @include rhc-hero__sub-heading;
-}

package/index.scss

@@ -1,40 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "accordion/index";
-@import "action-group/index";
-@import "alert/index";
-@import "article/index";
-@import "blockquote/index";
-@import "breadcrumb-nav/index";
-@import "button/index";
-@import "dot-badge";
-@import "checkbox/index";
-@import "fieldset/index";
-@import "figure/index";
-@import "form/index";
-@import "form-field/index";
-@import "form-field-error-message/index";
-@import "form-field-radio-option/index";
-@import "footer/index";
-@import "hero/index";
-@import "link-list/index";
-@import "link-list-card/index";
-@import "link/index";
-@import "logo/index";
-@import "navbar/index";
-@import "navigation-list/index";
-@import "ordered-list/index";
-@import "radio/index";
-@import "radio-group/index";
-@import "select/index";
-@import "separator/index";
-@import "side-nav/index";
-@import "skip-link/index";
-@import "table/index";
-@import "textarea/index";
-@import "textbox/index";
-@import "toggletip/index";
-@import "unordered-list/index";

package/link/_mixin.scss

@@ -1,34 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-link--any-link {
-  --utrecht-icon-inset-block-start: var(--utrecht-link-icon-inset-block-start, inherit);
-
-  column-gap: var(--utrecht-link-column-gap, inherit);
-  display: inline-flex;
-}
-
-@mixin rhc-link--icon {
-  min-block-size: var(--utrecht-link-icon-size, inherit);
-  min-inline-size: var(--utrecht-link-icon-size, inherit);
-}
-
-@mixin rhc-link--visited {
-  --utrecht-link-text-decoration-color: var(--utrecht-link-visited-color, inherit);
-
-  color: var(--utrecht-link-visited-color, inherit);
-}
-
-@mixin rhc-link--visited-icon {
-  color: var(--utrecht-link-visited-color, inherit);
-}
-
-@mixin rhc-link--active {
-  --utrecht-link-text-decoration: var(--utrecht-link-active-text-decoration, inherit);
-}
-
-@mixin rhc-link--focus-visible {
-  z-index: var(--utrecht-stack-focus-z-index, 1);
-}

package/link/index.scss

@@ -1,41 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-@import "../button/mixin";
-@import "./mixin";
-
-.utrecht-rich-text .utrecht-link {
-  margin-block-end: var(--utrecht-link-margin-block-end);
-}
-
-.utrecht-link:any-link {
-  @include rhc-link--any-link;
-}
-
-.utrecht-link:any-link .utrecht-icon {
-  @include rhc-link--icon;
-}
-
-.utrecht-link:visited,
-.utrecht-link--visted {
-  @include rhc-link--visited;
-}
-
-.utrecht-link:visited .utrecht-icon {
-  @include rhc-link--visited-icon;
-}
-
-.utrecht-link:active,
-.utrecht-link--active {
-  @include rhc-link--active;
-}
-
-.utrecht-link:focus-visible,
-.utrecht-link--focus-visible {
-  @include rhc-link--focus-visible;
-}
-
-.utrecht-link .rhc-link__sr-only {
-  @include invisible-but-accessible;
-}

package/link-list/index.scss

@@ -1,9 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-link-list__link {
-  --utrecht-link-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start, inherit);
-  --utrecht-link-column-gap: var(--utrecht-link-list-item-column-gap, inherit);
-}

package/link-list-card/index.scss

@@ -1,10 +0,0 @@
-.rhc-link-list-card {
-  background-color: var(--rhc-link-list-card-background-color);
-  display: flex;
-  flex-direction: column;
-  gap: var(--rhc-link-list-card-row-gap);
-  padding-block-end: var(--rhc-link-list-card-padding-block-end);
-  padding-block-start: var(--rhc-link-list-card-padding-block-start);
-  padding-inline-end: var(--rhc-link-list-card-padding-inline-end);
-  padding-inline-start: var(--rhc-link-list-card-padding-inline-start);
-}

package/logo/_mixin.scss

@@ -1,53 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-logo {
-  display: grid;
-  font-family: var(--rhc-logo-font-family);
-  font-size: var(--rhc-logo-title-font-size, 1em);
-  font-weight: var(--rhc-logo-title-font-weight);
-  gap: 0 var(--rhc-logo-column-gap, inherit);
-  grid-auto-rows: var(--rhc-logo-img-inline-size);
-  grid-template-areas: ". img ." ". img caption";
-  grid-template-columns: 1fr var(--rhc-logo-img-inline-size) 1fr;
-  grid-template-rows: var(--rhc-logo-title-padding-block-start) 1fr;
-  line-height: var(--rhc-logo-title-line-height, 1);
-  margin-block-end: var(--rhc-logo-margin-block-end, 0);
-  margin-block-start: var(--rhc-logo-margin-block-start, 0);
-  margin-inline-end: var(--rhc-logo-margin-inline-end, 0);
-  margin-inline-start: var(--rhc-logo-margin-inline-start, 0);
-  min-block-size: calc(var(--rhc-logo-rows, 2) * var(--rhc-logo-img-inline-size));
-}
-
-@mixin rhc-logo__img {
-  align-items: center;
-  background-color: var(--rhc-logo-img-background-color, inherit);
-  block-size: var(--rhc-logo-img-block-size, inherit);
-  color: var(--rhc-logo-img-color, inherit);
-  display: flex;
-  flex-direction: column;
-  grid-area: img;
-  inline-size: var(--rhc-logo-img-inline-size, inherit);
-  justify-content: end;
-}
-
-@mixin rhc-logo__caption {
-  color: var(--rhc-logo-color, inherit);
-  grid-area: caption;
-  max-inline-size: calc(210 / 14 * var(--rhc-logo-font-size, 1em));
-}
-
-@mixin rhc-logo__title {
-  /* reset margin of HTML <h1> element */
-  margin-block-end: 0;
-  margin-block-start: 0;
-  white-space: pre-line;
-}
-
-@mixin rhc-logo__subtitle {
-  font-size: var(--rhc-logo-subtitle-font-size, 1em);
-  font-weight: var(--rhc-logo-subtitle-font-weight);
-  line-height: var(--rhc-logo-subtitle-line-height, 1);
-}

package/logo/index.scss

@@ -1,26 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-@import "./mixin";
-
-.rhc-logo {
-  @include rhc-logo;
-}
-
-.rhc-logo__img {
-  @include rhc-logo__img;
-}
-
-.rhc-logo__caption {
-  @include rhc-logo__caption;
-}
-
-.rhc-logo__title {
-  @include rhc-logo__title;
-}
-
-.rhc-logo__subtitle {
-  @include rhc-logo__subtitle;
-  @include rhc-logo__title;
-}

package/navbar/index.scss

@@ -1,55 +0,0 @@
-.rhc-nav-bar {
-  align-items: center;
-  background-color: var(--rhc-nav-bar-background-color);
-  border-block-end-width: var(--rhc-nav-bar-border-block-end-width);
-  color: var(--rhc-nav-bar-color);
-  column-gap: var(--rhc-nav-bar-content-column-gap);
-  display: flex;
-  font-family: var(--rhc-font-family-primary, inherit);
-  justify-content: space-between;
-  row-gap: var(--rhc-nav-bar-content-row-gap);
-}
-
-.rhc-nav-bar__list {
-  background-color: var(--rhc-nav-bar-background-color);
-  display: flex;
-  list-style: none;
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
-.rhc-nav-bar__list--end {
-  margin-inline-start: auto;
-}
-
-.rhc-nav-bar__heading {
-  font-weight: var(--rhc-nav-bar-heading-font-weight);
-}
-
-.rhc-nav-bar__link {
-  --utrecht-link-text-decoration: none;
-  --utrecht-link-visited-color: var(--rhc-nav-bar-color);
-
-  color: var(--rhc-nav-bar-color);
-  padding-block-end: var(--rhc-nav-bar-link-padding-block-end);
-  padding-block-start: var(--rhc-nav-bar-link-padding-block-start);
-  padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
-  padding-inline-start: var(--rhc-nav-bar-link-padding-inline-start);
-  text-decoration: none;
-
-  &:hover {
-    background-color: var(--rhc-nav-bar-link-hover-background-color);
-  }
-
-  &:focus {
-    background-color: var(--rhc-nav-bar-link-focus-background-color);
-    color: var(--rhc-nav-bar-link-focus-color);
-  }
-
-  &:active {
-    background-color: var(--rhc-nav-bar-link-active-background-color);
-    color: var(--rhc-nav-bar-link-active-color);
-  }
-}

package/navigation-list/_mixin.scss

@@ -1,88 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-@mixin rhc-navigation-list {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin-block: 0;
-  padding-inline: 0;
-  &:last-child {
-    border-block-start-color: var(--rhc-navigation-list-item-border-color, var(--rhc-color-grijs-300));
-    border-block-start-style: solid;
-    border-block-start-width: var(--rhc-navigation-list-item-border-width, var(--rhc-border-width-default));
-  }
-}
-@mixin rhc-navigation-list__item {
-  align-items: center;
-  background-color: var(--rhc-navigation-list-item-background-color, var(--rhc-color-canvas));
-  border-block-end-color: var(--rhc-navigation-list-item-border-color, var(--rhc-color-grijs-300));
-  border-block-end-style: solid;
-  border-block-end-width: var(--rhc-navigation-list-item-border-width, var(--rhc-border-width-default));
-  color: var(--rhc-navigation-list-item-color, var(--rhc-color-foreground-subdued));
-  column-gap: var(--rhc-navigation-list-item-column-gap, var(--rhc-space-100));
-  display: flex;
-  min-block-size: var(--rhc-navigation-list-item-min-height, var(--rhc-size-target));
-  padding-block: var(--rhc-navigation-list-item-padding-block, var(--rhc-space-100));
-  padding-inline: var(--rhc-navigation-list-item-padding-inline, var(--rhc-space-200));
-  position: relative;
-  text-decoration: none;
-  &:hover {
-    background-color: var(--rhc-navigation-list-item-hover-background-color, var(--rhc-color-grijs-50));
-  }
-
-  &:focus {
-    background-color: var(--rhc-navigation-list-item-focus-background-color, var(--rhc-color-lintblauw-50));
-    z-index: 999;
-  }
-
-  &:active {
-    background-color: var(--rhc-navigation-list-item-active-background-color, var(--rhc-color-grijs-100));
-  }
-}
-
-@mixin rhc-navigation-list__item__start-icon {
-  background-color: var(--rhc-navigation-list-icon-background-color, var(--rhc-color-wit));
-  block-size: var(--rhc-navigation-list-item-icon-size);
-  border-radius: var(--rhc-navigation-list-icon-border-radius, var(--rhc-border-radius-circle));
-  color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subdued));
-  grid-area: start-icon;
-  min-inline-size: var(--rhc-navigation-list-item-icon-size);
-  padding-block: var(--rhc-navigation-list-item-icon-padding-block);
-  padding-inline: var(--rhc-navigation-list-item-icon-padding-inline);
-}
-
-@mixin rhc-navigation-list__item-content {
-  align-items: center;
-  display: grid;
-  flex: 1;
-  grid-column-gap: var(--rhc-navigation-list-item-content-column-gap, var(--rhc-space-100));
-  grid-row-gap: var(--rhc-navigation-list-item-content-row-gap, var(--rhc-space-100));
-  grid-template-areas:
-    "label content content end-icon"
-    "label content content end-icon";
-  grid-template-columns: 1fr 1fr 1fr auto;
-}
-
-@mixin rhc-navigation-list__item__label {
-  color: var(--rhc-navigation-list-item-heading-color, var(--rhc-color-foreground-lint));
-  font-family: var(--rhc-navigation-list-item-label-font-family, var(--rhc-font-family-primary)), sans-serif;
-  font-size: var(--rhc-navigation-list-item-label-font-size, var(--rhc-font-size-md-desktop));
-  font-weight: var(--rhc-navigation-list-item-label-font-weight, var(--rhc-font-weight-bold));
-  grid-area: label;
-  line-height: var(--rhc-navigation-list-item-label-line-height, var(--rhc-line-height-md));
-}
-@mixin rhc-navigation-list__item__description {
-  color: inherit;
-  grid-area: content;
-  @media (width<= 768px) {
-    text-align: start;
-  }
-}
-
-@mixin rhc-navigation-list__item__end-icon {
-  align-self: center;
-  grid-area: end-icon;
-  justify-self: end;
-}

package/navigation-list/index.scss

@@ -1,43 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-@import "./mixin";
-
-.rhc-navigation-list {
-  @include rhc-navigation-list;
-  &__item {
-    @include rhc-navigation-list__item;
-    &-content {
-      @include rhc-navigation-list__item-content;
-    }
-    &__label {
-      @include rhc-navigation-list__item__label;
-    }
-    &__description {
-      @include rhc-navigation-list__item__description;
-    }
-    &__start-icon {
-      @include rhc-navigation-list__item__start-icon;
-    }
-    &__end-icon {
-      @include rhc-navigation-list__item__end-icon;
-    }
-  }
-}
-.rhc-navigation-list--container-small {
-  container-type: inline-size;
-}
-@container (width <= 768px) {
-  .rhc-navigation-list__item-content {
-    grid-template-areas:
-      "label label label end-icon"
-      "content content content end-icon";
-  }
-  .rhc-navigation-list__item__start-icon {
-    align-self: start;
-  }
-  .rhc-navigation-list__item__description {
-    text-align: start;
-  }
-}

package/ordered-list/index.scss

@@ -1,18 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-ordered-list {
-  color: var(--utrecht-ordered-list-color);
-  font-weight: var(--utrecht-ordered-list-font-weight);
-  line-height: var(--utrecht-ordered-list-line-height) !important;
-  margin-block-end: var(--utrecht-ordered-list-margin-block-end);
-  margin-block-start: var(--utrecht-ordered-list-margin-block-start);
-  margin-inline-start: var(--utrecht-ordered-list-margin-inline-start);
-  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start);
-}
-
-.utrecht-ordered-list__item {
-  padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start);
-}

package/radio/index.scss

@@ -1,27 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-radio-button {
-  --utrecht-radio-button-icon-size: calc(var(--utrecht-radio-button-dot-size) * 0.5);
-}
-
-.utrecht-radio-button:focus,
-.utrecht-radio-button--focus {
-  --utrecht-radio-button-checked-color: var(--utrecht-radio-button-checked-background-color, inherit);
-}
-
-.utrecht-radio-button:disabled,
-.utrecht-radio-button--disabled {
-  --utrecht-radio-button-checked-color: var(--utrecht-radio-button-disabled-color, inherit);
-}
-
-.utrecht-radio-button:invalid,
-.utrecht-radio-button--invalid {
-  --utrecht-radio-button-background-color: var(--utrecht-radio-button-invalid-background-color, inherit);
-  &:hover,
-  &:focus {
-    background-color: var(--utrecht-radio-button-background-color);
-  }
-}

package/radio-group/_mixin.scss

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-radio-group {
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-radio-group-padding-block-end, inherit);
-  padding-block-start: var(--rhc-radio-group-padding-block-start, inherit);
-  row-gap: var(--rhc-radio-group-row-gap, inherit);
-}

package/radio-group/index.scss

@@ -1,10 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "./mixin";
-
-.rhc-radio-group {
-  @include rhc-radio-group;
-}

package/select/index.scss

@@ -1,19 +0,0 @@
-.utrecht-select {
-  &--html-select {
-    // This is an svg of chevron down icon
-    --utrecht-select-background-image: url('data:image/svg+xml,<svg width="8" height="3" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" fill="%23154273"/></svg>');
-    --utrecht-select-image-background-position: right 0.5rem center;
-
-    // The same for the background-position but I made a token so it can be easily changed as in the next class
-    background-position: var(--utrecht-select-image-background-position) !important;
-
-    // the important is needed to overwrite the default background-size as set in the utrecht-select component to 1.4rem which is hardcoded
-    background-size: var(--utrecht-select-icon-size) !important;
-  }
-  &--html-select-rtl {
-    --utrecht-select-image-background-position: left 0.5rem center;
-  }
-  &:focus {
-    border-width: var(--utrecht-select-focus-border-width, var(--rhc-border-width-m, 2px)) !important;
-  }
-}

package/separator/index.scss

@@ -1,14 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-separator {
-  --utrecht-space-around: 1;
-
-  margin-inline-end: 0;
-  margin-inline-start: 0;
-  &--invisible {
-    --utrecht-separator-color: transparent;
-  }
-}