X style chooser in top menu bar

This is basically a copy of the Style Chooser section in the default footer with an added class for styling, and inserting its required css via: x_style_chooser_in_top_menu_bar.less

<xf:css src="x_style_chooser_in_top_menu_bar.less" />
<!-- START style chooser in top bar -->						
<div class="p-navgroup topStyleButton">
	<xf:if contentcheck="true">
		<xf:contentcheck>
			<xf:if is="$xf.visitor.canChangeStyle()">
				<a class="topStyleButtonBrush" href="{{ link('misc/style') }}" data-xf-click="overlay"
					data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
					<xf:fa icon="fa-paint-brush" /> 
				</a>
			</xf:if>
			<xf:if is="$xf.visitor.canChangeStyleVariation($xf.style)">
				<a class="topStyleButtonCog" href="{{ link('misc/style-variation') }}" rel="nofollow"
					class="js-styleVariationsLink"
					data-xf-init="tooltip" title="{{ phrase('style_variation') }}"
					data-xf-click="menu" data-z-index-ref=".u-bottomFixer" role="button" aria-expanded="false" aria-haspopup="true">
					<xf:fa icon="{{ $xf.style.getVariationIcon($xf.visitor.style_variation) }}" title="{{ phrase('style_variation') }}" />
				</a>
				<div class="menu" data-menu="menu" aria-hidden="true">
					<div class="menu-content js-styleVariationsMenu">
						<xf:macro name="style_variation_macros::variation_menu"
							arg-style="{$xf.style}"
							arg-live="{{ true }}" />
					</div>
				</div>
			</xf:if>
		</xf:contentcheck>
	</xf:if>						
</div>		
<!-- END style chooser in top bar -->