@conduction/components/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

.denhaag-breadcrumb {
  --denhaag-breadcrumb-chevron-display: none;
  --denhaag-breadcrumb-link-background-color: transparent;
  --denhaag-breadcrumb-link-icon-content: "";
  --denhaag-breadcrumb-link-pointer-events: bounding-box;
  --denhaag-breadcrumb-item-display: none;

  background-color: var(--denhaag-breadcrumb-background-color, transparent);
  color: var(--denhaag-breadcrumb-color, inherit);
  padding-block-end: var(--denhaag-breadcrumb-padding-block);
  padding-block-start: var(--denhaag-breadcrumb-padding-block);
  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
}

.denhaag-breadcrumb__list {
  block-size: 100%;
  display: flex;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: auto;
  margin-inline-start: auto;
  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
}

ol.denhaag-breadcrumb__list {
  list-style: none;
  padding-inline-start: 0;
}

.denhaag-breadcrumb__item {
  align-items: center;
  display: var(--denhaag-breadcrumb-item-display);
}

.denhaag-breadcrumb__item:nth-last-child(2) {
  --denhaag-breadcrumb-item-display: flex;
}

.denhaag-breadcrumb__item:nth-last-child(2)
  > .denhaag-breadcrumb__link::before {
  background: var(--denhaag-breadcrumb-link-color);
  clip-path: path(
    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
  );
  content: var(--denhaag-breadcrumb-link-icon-content);
  height: var(
    --denhaag-breadcrumb-link-icon-height,
    var(--denhaag-breadcrumb-link-icon-width)
  );
  margin-inline-end: var(
    --denhaag-breadcrumb-link-icon-margin-inline,
    var(--denhaag-breadcrumb-link-icon-width)
  );
  width: var(--denhaag-breadcrumb-link-icon-width);
}

.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
  --denhaag-breadcrumb-link-background-color: var(
    --denhaag-breadcrumb-dots-background-color,
    inherit
  );
}

.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
  --denhaag-breadcrumb-link-background-color: var(
    --denhaag-breadcrumb-dots-hover-background-color,
    inherit
  );
}

.denhaag-breadcrumb__link {
  align-items: center;
  color: var(--denhaag-breadcrumb-link-color, inherit);
  display: flex;
  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
  position: relative;
}

.denhaag-breadcrumb__link:hover,
.denhaag-breadcrumb__link--hover {
  --denhaag-breadcrumb-link-color: var(
    --denhaag-breadcrumb-link-hover-color,
    inherit
  );
}

.denhaag-breadcrumb__link:focus,
.denhaag-breadcrumb__link--focus {
  --denhaag-breadcrumb-link-color: var(
    --denhaag-breadcrumb-link-focus-color,
    inherit
  );

  outline: var(
    --denhaag-breadcrumb-link-focus-outline,
    var(--denhaag-link-focus-outline)
  );
}

.denhaag-breadcrumb__link--current,
.denhaag-breadcrumb__link.denhaag-link--current,
.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
  --denhaag-breadcrumb-link-color: var(
    --denhaag-breadcrumb-current-color,
    var(--denhaag-breadcrumb-color, inherit)
  );

  text-decoration: none;
}

.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
    > .denhaag-breadcrumb__link)
  > :first-child {
  pointer-events: bounding-box;
}

/* SVG for the separator */
.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
  color: initial;
  font-size: inherit;
  display: var(--denhaag-breadcrumb-chevron-display);
  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
}

[dir="rtl"]
  .denhaag-breadcrumb__link
  > .denhaag-breadcrumb__text
  + .denhaag-icon,
[dir="rtl"]
  .denhaag-breadcrumb__item:nth-last-child(2)
  > .denhaag-breadcrumb__link::before {
  transform: scaleX(-1);
}

.denhaag-breadcrumb__text {
  background-color: var(--denhaag-breadcrumb-link-background-color);
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
}

.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
  .denhaag-breadcrumb__text {
  aspect-ratio: 24/16;
  border-radius: var(
    --denhaag-breadcrumb-dots-border-radius,
    var(--denhaag-border-radius)
  );
  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
}

.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
  .denhaag-breadcrumb__text::before {
  color: var(--denhaag-breadcrumb-dots-color, inherit);
  content: "...";
  left: calc(50% - 7px);
  line-height: 0;
  position: absolute;
  text-indent: 0;
  top: calc(50% - 5px);
  vertical-align: baseline;
}

@media (min-width: 481px) {
  .denhaag-breadcrumb {
    --denhaag-breadcrumb-chevron-display: inline-block;
    --denhaag-breadcrumb-link-icon-content: unset;
    --denhaag-breadcrumb-link-pointer-events: none;
    --denhaag-breadcrumb-padding-block: var(
      --denhaag-breadcrumb-padding-block-md
    );
  }

  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
    --denhaag-breadcrumb-item-display: flex;
  }
}

@media (min-width: 1124px) {
  .denhaag-breadcrumb {
    --denhaag-breadcrumb-padding-inline: 0;
  }
}

:root {
  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
  --utrecht-breadcrumb-item-padding-inline-start: 14px;
  --utrecht-breadcrumb-item-padding-inline-end: 14px;
  --utrecht-breadcrumb-divider-inline-size: 24px;
  --utrecht-breadcrumb-divider-content: ›;
  --denhaag-breadcrumb-list-max-width: 67.5rem;
  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
  --denhaag-breadcrumb-link-icon-width: 0.875rem;
  --denhaag-breadcrumb-link-icon-height: 0.875rem;
  --denhaag-breadcrumb-padding-inline: 0.75rem;
  --denhaag-breadcrumb-padding-block-md: 0.75rem;
  --denhaag-breadcrumb-padding-block: 1rem;
  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
  --utrecht-breadcrumb-font-size: var(
    --denhaag-typography-scale-base-font-size
  );
}