/**
 * @file
 * Breadcrumb.
 */

.breadcrumb {
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-xs);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--2);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--text-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--border-strong);
}

.breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--me-magenta-300);
  text-decoration: underline;
}

.breadcrumb__item[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}