/**
 * @file
 * Breadcrumb region.
 */
.breadcrumb {
  font-size: var(--fs--1);
  font-weight: bold;
  /* Fadeout ellipsis on narrow screens. */
}
@media (width < 62.5rem) {
  .breadcrumb {
    position: relative;
  }
  .breadcrumb::after {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: var(--sp-2xl);
    height: 1em;
    content: "";
    background: linear-gradient(to left, var(--color--white) 0%, transparent 100%); /* LTR */
  }
  [dir=rtl] .breadcrumb::after {
    background: linear-gradient(to right, var(--color--white) 0%, transparent 100%);
  }
  .breadcrumb__item:last-child {
    margin-inline-end: var(--sp-xl);
  }
}

.breadcrumb__list {
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  padding-inline: unset;
  padding-block: 0.4em 0.48em;
  display: flex;
}

.breadcrumb__item:nth-child(n+2)::before {
  display: inline-block;
  width: 0.5em;
  aspect-ratio: 1;
  margin-inline: 1em;
  content: "";
  transform: rotate(45deg);
}
[dir=rtl] .breadcrumb__item:nth-child(n+2)::before {
  transform: rotate(-45deg);
}
.breadcrumb__item:nth-child(n+2)::before {
  border-block-start: 2px solid var(--color--gray-45);
  border-inline-end: 2px solid var(--color--gray-45);
}

.breadcrumb__link {
  text-decoration: none;
}
.breadcrumb__link:is(:hover, :focus) {
  text-decoration: underline;
}