@layer components {
  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);

    .breadcrumbs__item {
      color: var(--color-text-muted);
      text-decoration: underline;
      text-decoration-color: var(--color-gray-400);
      text-underline-offset: 0.2em;

      &:hover {
        color: var(--color-text);
        text-decoration-color: currentColor;
      }

      &.is-current {
        color: var(--color-text);
        font-weight: var(--font-medium);
        text-decoration: none;
      }
    }

    .breadcrumbs__separator {
      color: var(--color-gray-500);
    }
  }
}