Divide menu.pcss.css file into components

Some notes:

- .toolbar-menu__wrapper cannot be outside of .toolbar-menu. same as .toolbar-menu__heading in terms of valid BEM tree

- From design https://www.figma.com/file/fn52micITi1fCNtU0fWcPC/Prototype?type=design&... i see that should be yet another entity between. I suggested approach it was https://storied-pixie-3d54e7.netlify.app/?path=/story/toolbar-block--basic which has title and any content inside.

Updating new menu classes after a discussion with @finnsky.

Thanks @finnsky for the suggestions! Let's move to follow-up things I might have missed because this is big enough already.

• I've divided menu.pcss.css and icons.pcss.css into toolbar-block.pcss.css, toolbar-menu.pcss and toolbar-link.pcss.css.
• I've added documentation to the CSS to make it easier to understand.
• I've refactored classes to be BEM compliant for each component and converted a few of them into utilities,
• I've cleanup unused code.
• I've fixed a few small spacing that was clearly wrong, but left pixel-perfect styling for when we have the final designs.

Automatically closed - issue fixed for 2 weeks with no activity.