@import '@zendeskgarden/css-variables';

:root {
  --zd-breadcrumb__item-background:
    no-repeat center / 1em
    var(--zd-breadcrumb__item-background-image);
  --zd-breadcrumb__item-background-image: svg-load('12/chevron-right-stroke.svg', color: var(--zd-color-grey-600));
  --zd-breadcrumb__item-background-margin: 0 calc(8 / 14 * 1em);
  --zd-breadcrumb__item-background-width: 1em;
  --zd-breadcrumb__item-line-height: calc(20 / 14);
}

.c-breadcrumb__item {
  line-height: var(--zd-breadcrumb__item-line-height);
  white-space: nowrap;
  font-size: inherit;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  display: inline-block;
  margin: var(--zd-breadcrumb__item-background-margin);
  background: var(--zd-breadcrumb__item-background);
  width: var(--zd-breadcrumb__item-background-width);
  height: 100%;
  vertical-align: top;
  content: '';
}

.c-breadcrumb__item > :any-link {
  white-space: inherit;
}

.c-breadcrumb.is-rtl .c-breadcrumb__item::before {
  transform: rotate(180deg);
}