@use "../variables" as *;
// Retro Breadcrumbs
.retro-breadcrumbs {
  display: flex;
  align-items: center;
  // A trail is arbitrarily deep; let it run onto a second line rather
  // than widen the page.
  flex-wrap: wrap;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size-lg);
  background: var(--retro-card-bg);
  padding: 6px 12px;
  border-radius: var(--retro-border-radius);
  border: 1px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  gap: 4px;
}
.retro-breadcrumb {
  color: var(--retro-primary-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: var(--retro-border-radius);
  transition: background 0.2s;
  &.active {
    color: var(--retro-card-content-text);
    font-weight: bold;
    background: var(--retro-card-content-bg);
  }
  &:hover:not(.active) {
    background: var(--retro-border-light);
    color: var(--retro-card-content-text);
  }
}
.retro-breadcrumb-icon {
  font-size: var(--retro-font-size-lg);
  margin-inline-end: 2px;
}
.retro-breadcrumb-sep {
  color: var(--retro-text-muted);
  margin: 0 2px;
  font-weight: bold;
}
// Remove duplicated badge styles as they're defined in _badge.scss