.breadcrumb {
  // scss-docs-start breadcrumb-css-vars
  // OUDS mod: no breadcrumb-color, breadcrumb-padding-x, breadcrumb-padding-y, breadcrumb-margin-bottom, breadcrumb-font-size, breadcrumb-font-weight, breadcrumb-bg, breadcrumb-border-radius, breadcrumb-divider-color, breadcrumb-item-padding-x, breadcrumb-item-active-color
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};

  // Additional OUDS variables
  --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider) "/* rtl:"escape-svg($breadcrumb-divider-flipped) "*/"};
  --#{$prefix}breadcrumb-item-padding-links: #{$ouds-breadcrumb-space-column-gap-links};
  --#{$prefix}breadcrumb-item-padding-icon: #{$ouds-breadcrumb-space-column-gap-icon};
  // End mod
  // scss-docs-end breadcrumb-css-vars

  display: flex;
  padding: 0;
  list-style: none;
  @include get-font-size("label-medium");

  .breadcrumb-item {
    display: none;
    align-items: center;
    min-width: 0; // overrides children links implied width see https://css-tricks.com/flexbox-truncated-text/
    padding-right: var(--#{$prefix}breadcrumb-item-padding-links);
    white-space: nowrap;

    // The separator between breadcrumbs
    &::after {
      display: inline-flex;
      flex-shrink: 0;
      width: $ouds-breadcrumb-size-icon;
      height: $ouds-breadcrumb-size-icon;
      margin-left: var(--#{$prefix}breadcrumb-item-padding-icon);
      color: var(--#{$prefix}breadcrumb-divider-color);
      content: "";
      background-color: currentcolor;
      mask-image: var(--#{$prefix}breadcrumb-divider);

      /* rtl:raw:
    transform: scaleX(-1);
    */
      // End mod
    }

    a {
      @extend %link-properties;
      display: inline-block;
      padding: $ouds-link-space-padding-block $ouds-link-space-padding-inline;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.active {
      font-weight: $ouds-font-weight-web-body-default;
      color: var(--#{$prefix}breadcrumb-item-active-color);

      span {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &:nth-last-child(-n + 2) {
      display: inline-flex;
    }

    &:nth-last-child(2) {
      flex-shrink: 0;
    }

    @include media-breakpoint-up(md) {
      &:nth-last-child(-n + 3) {
        display: inline-flex;
      }
    }

    @include media-breakpoint-up(lg) {
      &:nth-last-child(-n + 4) {
        display: inline-flex;
      }
    }

    @include media-breakpoint-up(xl) {
      display: inline-flex;
    }

    &:last-child {
      overflow: hidden;

      &::after {
        content: none;
      }
    }
  }
}