Breadcrumb.test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Breadcrumb scss have to match snapshot 1`] = `
"/*
* DNB Breadcrumb
*
*/
/**
 * This file is only used to make components independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
/*
 * Scopes
 *
 */
/*
 * Document Reset
 *
 */
/*
* DNB Button
*
*/
/*
* DNB icon
*
*/
/*
* Icon component
*
*/
.dnb-icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1rem;
  color: inherit;
  width: 1em;
  height: 1em; }
  .dnb-icon img,
  .dnb-icon svg {
    width: inherit;
    height: inherit;
    shape-rendering: geometricPrecision;
    vertical-align: top; }
  .dnb-icon svg[width='100%'] {
    width: inherit; }
  .dnb-icon svg[height='100%'] {
    height: inherit; }
  .dnb-icon--inherit-color svg:not([fill]),
  .dnb-icon--inherit-color svg [fill] {
    fill: currentColor; }
  .dnb-icon--inherit-color svg [stroke] {
    stroke: currentColor; }
  .dnb-icon--small {
    font-size: 0.75rem; }
  .dnb-icon--default {
    font-size: 1rem; }
  .dnb-icon--medium {
    font-size: 1.5rem; }
  .dnb-icon--large {
    font-size: 2rem; }
  .dnb-icon--x-large {
    font-size: 2.5rem; }
  .dnb-icon--xx-large {
    font-size: 3rem; }
  .dnb-icon--custom-size {
    width: auto;
    height: auto; }
  .dnb-icon--auto {
    font-size: 1em; }
  .dnb-icon--auto > .dnb-icon--wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  h1 .dnb-icon,
  h2 .dnb-icon,
  h3 .dnb-icon,
  h4 .dnb-icon,
  h5 .dnb-icon,
  h6 .dnb-icon {
    vertical-align: middle; }
  .dnb-icon.dnb-skeleton {
    color: var(--skeleton-color) !important; }
    .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
      content: none !important; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-icon {
      flex: none; } }

/*
* DNB Tooltip
*
*/
.dnb-tooltip {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-tooltip *,
  .dnb-tooltip ::before,
  .dnb-tooltip ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-tooltip ::before,
  .dnb-tooltip ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Tooltip component
*
*/
.dnb-tooltip {
  position: absolute;
  z-index: 3100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--easing-default); }
  .dnb-tooltip--large {
    padding: 0.25rem 1rem; }
  .dnb-tooltip--animate_position {
    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
  .dnb-tooltip--active {
    visibility: visible;
    /*
      because of the first "show" we also use animation
      also, use forwards because of the usage of visibility
    */
    animation: show-tooltip 200ms var(--easing-default) forwards; }
  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
    animation: show-tooltip 1ms var(--easing-default) forwards; }
  .dnb-tooltip--hide {
    visibility: visible;
    animation: hide-tooltip 200ms var(--easing-default) forwards; }
  .dnb-tooltip--hide.dnb-tooltip--no-animation {
    animation: hide-tooltip 1ms linear forwards; }
  .dnb-tooltip--fixed {
    position: fixed; }
  html[data-visual-test] .dnb-tooltip--hide {
    animation: hide-tooltip 1ms linear 1s forwards; }
  .dnb-tooltip__portal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0; }
  .dnb-tooltip__content {
    min-width: 2rem;
    min-height: 1.5rem;
    padding: 0; }
  .dnb-tooltip__arrow {
    position: absolute;
    pointer-events: none;
    margin: 0;
    width: 1rem;
    height: 0.5rem;
    overflow: hidden; }
    .dnb-tooltip__arrow::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 1rem;
      height: 1rem;
      transform: translateY(70%) rotate(45deg); }
    .dnb-tooltip__arrow__position--bottom {
      top: -0.5rem; }
    .dnb-tooltip__arrow__position--top {
      bottom: -0.5rem;
      transform: rotate(180deg); }
    .dnb-tooltip__arrow__position--left {
      right: -0.75rem;
      margin-right: 3px;
      transform: rotate(90deg); }
    .dnb-tooltip__arrow__position--right {
      left: -0.75rem;
      margin-left: 3px;
      transform: rotate(270deg); }
    .dnb-tooltip__arrow__arrow--left {
      align-self: flex-start; }
    .dnb-tooltip__arrow__arrow--right {
      align-self: flex-end; }

@keyframes show-tooltip {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes hide-tooltip {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    visibility: hidden; } }

/*
* DNB FormStatus
*
*/
.dnb-form-status {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-form-status *,
  .dnb-form-status ::before,
  .dnb-form-status ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-form-status ::before,
  .dnb-form-status ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * FormStatus component
 *
 */
:root {
  --form-status-radius: 0.25rem; }

.dnb-form-status {
  display: flex;
  opacity: 1;
  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
  .dnb-form-status--hidden {
    will-change: height, opacity, margin, padding;
    width: 0;
    height: 0;
    opacity: 0; }
  .dnb-form-status--is-animating {
    overflow: hidden;
    width: auto; }
  .dnb-form-status--disappear, .dnb-form-status--hidden {
    margin: 0 !important;
    padding: 0 !important; }
  .dnb-form-status__shell {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: inherit;
    border-radius: var(--form-status-radius); }
  .dnb-form-status__text {
    padding: 0.625rem 1rem;
    cursor: text;
    color: inherit;
    line-height: var(--line-height-small);
    font-size: var(--font-size-small);
    white-space: normal; }
    button .dnb-form-status__text {
      cursor: inherit; }
    .dnb-form-status__text .dnb-anchor {
      font-size: inherit; }
  .dnb-icon + .dnb-form-status__text {
    padding-left: 0.5rem; }
  .dnb-form-status__shell > .dnb-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; }
  .dnb-form-status__size--large .dnb-form-status__text {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem; }
  .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon {
    margin-top: 0.6666666em;
    margin-bottom: 0.6666666em; }
  .dnb-form-status--stretch {
    flex-grow: 1; }
  .dnb-form-status--stretch .dnb-form-status__shell {
    width: 100%; }
  .dnb-form-status--stretch .dnb-form-status__text {
    max-width: 47rem; }
  .dnb-form-status[hidden] {
    display: none; }
  .dnb-form-status--no-animation,
  html[data-visual-test] .dnb-form-status {
    transition-duration: 1ms !important; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-form-status__shell > .dnb-icon {
      border-width: 1px; } }

.dnb-button {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-button *,
  .dnb-button ::before,
  .dnb-button ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-button ::before,
  .dnb-button ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Button component
*
*/
:root {
  --button-font-size: var(--font-size-basis);
  --button-font-size-small: var(--font-size-small);
  --button-width: 2.5rem;
  --button-height: 2.5rem;
  --button-width--small: 1.5rem;
  --button-height--small: 1.5rem;
  --button-width--medium: 2rem;
  --button-height--medium: 2rem;
  --button-width--large: 3rem;
  --button-height--large: 3rem;
  --button-icon-size: 1rem;
  --button-border-width: 0.0625rem;
  --button-border-width--hover: 0.1875rem;
  --button-border-radius: calc(var(--button-height) / 2);
  --button-border-radius--small: calc(var(--button-height--small) / 2);
  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
  --button-border-radius--large: calc(var(--button-height--large) / 2); }

.dnb-button {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  height: auto;
  padding: 0;
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-border-radius);
  text-decoration: none;
  font-size: var(--font-size-small);
  /* stylelint-disable-next-line */ }
  .dnb-button--wrap {
    overflow-wrap: break-word;
    white-space: normal; }
  .dnb-button,
  .dnb-core-style .dnb-button {
    line-height: var(--button-height); }
  .dnb-button__text {
    margin: 0.5rem 0;
    font-size: var(--button-font-size);
    line-height: var(--line-height-basis);
    color: inherit;
    transform: translateY(-0.03125rem); }
    .dnb-button__text [data-os='linux'] {
      transform: translateY(-0.035rem); }
  .dnb-button__alignment {
    display: inline-block;
    width: 0; }
  .dnb-button__bounding {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transform: scale(1.1, 1.4);
    background-color: transparent;
    border-radius: var(--button-border-radius); }
  .dnb-button--has-text {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
  .dnb-button--size-small {
    width: var(--button-width--small);
    font-size: var(--button-font-size-small);
    border-radius: var(--button-border-radius--small); }
    .dnb-button--size-small,
    .dnb-core-style .dnb-button--size-small {
      line-height: var(--button-height--small); }
  .dnb-button--size-small .dnb-button__text {
    margin: 0; }
  .dnb-button--has-text.dnb-button--size-small {
    padding-left: 1rem;
    padding-right: 1rem; }
  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
    padding-left: 0.5rem; }
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
    padding-right: 0.5rem; }
  .dnb-button--size-medium {
    width: var(--button-width--medium);
    border-radius: var(--button-border-radius--medium); }
    .dnb-button--size-medium,
    .dnb-core-style .dnb-button--size-medium {
      line-height: var(--button-height--medium); }
  .dnb-button--size-medium .dnb-button__text {
    margin: 0; }
  .dnb-button--has-text.dnb-button--size-medium {
    padding-left: 1rem;
    padding-right: 1rem; }
  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
    padding-left: 0.5rem; }
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
    padding-right: 0.5rem; }
  .dnb-button--size-large {
    width: var(--button-width--large);
    border-radius: var(--button-border-radius--large); }
    .dnb-button--size-large,
    .dnb-core-style .dnb-button--size-large {
      line-height: var(--button-height--large); }
  .dnb-button--has-text.dnb-button--size-large {
    padding-left: 2rem;
    padding-right: 2rem; }
  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large {
    padding-left: 1rem; }
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
    padding-right: 1rem; }
  .dnb-button--has-text {
    width: auto; }
  .dnb-button--has-text .dnb-button__icon {
    margin: 0 calc(var(--button-icon-size) / 2); }
  .dnb-button--has-text.dnb-button--icon-position-left {
    padding-left: 0.5rem; }
  .dnb-button--has-text.dnb-button--icon-position-right {
    padding-right: 0.5rem; }
  .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
    order: 2; }
  .dnb-button--has-text.dnb-button--has-icon .dnb-button__text {
    order: 1; }
  .dnb-button:not(.dnb-button--has-text) .dnb-button__icon {
    width: inherit; }
  .dnb-button__icon.dnb-icon svg:not([width]):not([height]) {
    width: var(--button-icon-size);
    height: var(--button-icon-size); }
  [href] > .dnb-button__icon.dnb-icon {
    line-height: var(--button-font-size); }
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
    order: 1; }
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *,
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *,
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
    order: 2; }
  .dnb-button--stretch {
    width: 100%; }
  .dnb-button--reset {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: visible;
    border: none;
    border-radius: 0;
    background-color: transparent;
    appearance: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    line-height: inherit; }
    html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] {
      cursor: not-allowed; }
    html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) {
      box-shadow: none;
      border: none; }
    .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
      outline: none; }
      html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
        --border-color: var(--color-emerald-green);
        box-shadow: 0 0 0 0.125rem var(--border-color);
        border-color: transparent; }
        @media screen and (-ms-high-contrast: none) {
          html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
    html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus,
    html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active {
      box-shadow: none;
      color: inherit;
      border: none; }
  .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none; }
  .dnb-button[disabled] {
    cursor: not-allowed;
    outline: none; }
  .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
    align-self: flex-start; }
  .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text {
    white-space: nowrap; }
  .dnb-button + .dnb-form-status {
    margin-top: 0.5rem; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-button {
      flex: none; }
      .dnb-button__icon, .dnb-button__text {
        transform: translateY(-0.0625rem); } }

/* Firefox includes a hidden border which messes up button dimensions */
button.dnb-button::-moz-focus-inner {
  border: none; }

/*
* DNB Section
*
*/
.dnb-section {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-section *,
  .dnb-section ::before,
  .dnb-section ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-section ::before,
  .dnb-section ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * Section component
 *
 */
.dnb-section {
  position: relative;
  display: flow-root; }
  .dnb-section::after {
    content: '';
    position: absolute;
    z-index: -15;
    left: -100vw;
    top: 0;
    width: 100vw;
    height: 100%;
    color: var(--color-mint-green-12);
    background-color: currentColor;
    box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; }
  .dnb-section .dnb-section::after {
    z-index: -14; }
  .dnb-section .dnb-section .dnb-section::after {
    z-index: -13; }
  .dnb-section .dnb-section .dnb-section .dnb-section::after {
    z-index: -12; }
  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
    z-index: -11; }
  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
    z-index: -10; }
  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
    z-index: -9; }
  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
    z-index: -8; }
  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
    z-index: -7; }
  .dnb-section--spacing-x-small {
    padding: var(--spacing-x-small) 0; }
  .dnb-section--spacing-small {
    padding: var(--spacing-small) 0; }
  .dnb-section--spacing-medium {
    padding: var(--spacing-medium) 0; }
  .dnb-section--spacing, .dnb-section--spacing-large {
    padding: var(--spacing-large) 0; }

.dnb-breadcrumb {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-breadcrumb *,
  .dnb-breadcrumb ::before,
  .dnb-breadcrumb ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-breadcrumb ::before,
  .dnb-breadcrumb ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Breadcrumb component
*
*/
.dnb-breadcrumb {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; }
  .dnb-breadcrumb__bar.dnb-section {
    display: flex; }
  .dnb-breadcrumb__list.dnb-section {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center; }
  .dnb-breadcrumb__item__span {
    display: flex;
    align-items: center;
    line-height: normal;
    padding: 0.5rem 0; }
    .dnb-breadcrumb__item__span__icon {
      margin-left: calc(var(--button-icon-size) / 2);
      margin-right: 0.5rem; }
  .dnb-breadcrumb__animation {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 400ms var(--easing-default); }
  .dnb-breadcrumb__animation .dnb-breadcrumb__item {
    transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
    transform: translateX(-1rem); }
  .dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
    transform: translateX(0); }
  .dnb-breadcrumb__collapse {
    display: flex;
    flex-direction: column; }
  .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
    flex-direction: column;
    align-items: flex-start;
    margin: 0.5rem 0;
    margin-left: 1.5rem; }
"
`;