/*
Breadcrumbs

A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.

.x-breadcrumbs                              - The breadcrumbs container
.x-breadcrumbs-major                          (for major navigation)
.x-breadcrumbs--list                        - The list element as the container
.x-breadcrumbs-major--list                    (for major navigation)
.x-breadcrumbs__list                        - The list element as a child of the container
.x-breadcrumbs-major__list                    (for major navigation)
.x-breadcrumbs__list-item                   - All list items
.x-breadcrumbs-major__list-item               (for major navigation)
.x-breadcrumbs__list-item--suffix-separator - Add spearator after list items
.x-breadcrumbs__list-item--prefix-separator - Add spearator before list items

Styleguide Tools.Mixins.Breadcrumbs
*/



/* Container */

@define-mixin x-breadcrumbs {}
@define-mixin x-breadcrumbs-major {
  padding-top: var(--global-space--above-breadcrumbs, 45px);
  margin-bottom: var(--global-space--under-breadcrumbs, 40px);
  font-size: var(--global-font-size--x-small, 1.4rem);
}

/* Content */

@define-mixin x-breadcrumbs--list {
  /* To remove whitespace between items (but still allow text wrap) */
  display: flex;
  flex-wrap: wrap;

  /* To undo default browser list (`<ol>`, `<ul>`) styles */
  list-style: none;
  padding-left: unset;
  margin-top: unset;
}
@define-mixin x-breadcrumbs-major--list {
  font-weight: var(--medium, 500);
}

@define-mixin x-breadcrumbs__list {
  @mixin x-breadcrumbs--list;

  /* To undo default browser list (`<ol>`, `<ul>`) styles */
  margin-bottom: unset;
}
@define-mixin x-breadcrumbs-major__list {
  @mixin x-breadcrumbs-major--list;
}

@define-mixin x-breadcrumbs__list-item {
  /* To remove whitespace around text */
  display: inline-flex;
}
@define-mixin x-breadcrumbs-major__list-item {
  &:last-child {
    font-weight: var(--bold, 700);
  }
}

@define-mixin x-breadcrumbs__list-item--separator {
  &::after,
  &::before {
    padding-inline: 0.5ch;
  }
}
@define-mixin x-breadcrumbs__list-item--suffix-separator {
  @mixin x-breadcrumbs__list-item--separator;

  &::after { content: ">"; }
}
@define-mixin x-breadcrumbs__list-item--prefix-separator {
  @mixin x-breadcrumbs__list-item--separator;

  &::before { content: ">"; }
}