:root {
  --font-size-breadcrumb: var(--font-size-base);
}

nav.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1.0;

  li::before {
    content: "\f054";
    font: var(--fa-font-regular);
    font-size: 10px;
    color: var(--color-text-muted);
    margin: 0 0.25rem;
    bottom: 1px;
    position: relative;
  }

  li:first-child::before {
    content: "";
    margin-right: 0;
  }
}

.breadcrumb-item {
  font-size: var(--font-size-breadcrumb);
  /* font-weight: var(--font-weight-medium); */
  color: var(--gray-7);
  padding: var(--space-1) 0;
}

.breadcrumb-item span {
  display: inline-block;
  padding: var(--space-2) var(--space-2);  
}

.breadcrumb-item a {
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--gray-7);

  &:hover {
    color: black;
  }
}