<div class="site-top-section">
    <div class="container">
        <div class="grid__row">
            <ul class="top-section__list grid__column" data-gridspan="12">
                <li class="top-section__item top-section__item--user-action">
                    <a class="top_section__link top_section__link--user js-user-account-action" href="#">Login</a>
                </li>
                <li class="top-section__item top-section__item--location-action">
                    <button type="button" class="top_section__link top_section__link--current-loc js-location-action">Global</button>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="site-top-section">
	<div class="container">
		<div class="grid__row">
			<ul class="top-section__list grid__column" data-gridspan="12">
				<li class="top-section__item top-section__item--user-action">
					<a class="top_section__link top_section__link--user js-user-account-action" href="#">Login</a>
				</li>
				<li class="top-section__item top-section__item--location-action">
					<button type="button" class="top_section__link top_section__link--current-loc js-location-action">Global</button>
				</li>
			</ul>
		</div>
	</div>
</div>
/* No context defined for this component. */
.site-top-section {
	margin-bottom: 1em;
	text-align: right;
}
.top-section__list {
	flex-direction: row;
    justify-content: flex-end;
	@include clearfix();
}
.top-section__item {
	// float: flip(left,right);
	display: inline-block;
	vertical-align: middle;
	@include rem2px(font-size, 1.2);
	line-height: 3;
}
.top_section__link--user {
	text-decoration: none;
	margin-right: 3em;
	color:$grey--superdark;
}
.top_section__link--current-loc {
	@include rem2px(font-size, 1.2);
	&:focus, 
	&:active {
		outline: none;
	}
}

.top_section__link--user{
	background-image: url('/assets/icons/arrow-down-orange.png');
    background-image: url('/assets/icons/arrow-down-orange.svg');
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 2.5em;
    line-height: 3;
    background-position-x: 94%;
  	background-size: 18px;
}

.top_section__link--user--active{
	background-image: url('/assets/icons/arrow-up-orange.png');
    background-image: url('/assets/icons/arrow-up-orange.svg');
    background-position-x: 94%;
  	background-size: 18px;

}
.top_section__link--current-loc {
	background-image: url('/assets/icons/arrow-down-grey.png');
    background-image: url('/assets/icons/arrow-down-grey.svg');
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 3em;
    line-height: 3;
    background-position-x: 94%;
  	background-size: 18px;
  	padding-left: 0.5em;
}


.top_section__link--current-loc--active{
	background-image: url('/assets/icons/arrow-up-grey.png');
    background-image: url('/assets/icons/arrow-up-grey.svg');
    background-position-x: 94%;
  	background-size: 18px;
  	background-color: $grey--superlight;
}
$(document).ready(function() {
	var $locationPanelTrigger = $('.js-location-action'),
		$locationPanel = $('.country-location');
	$locationPanelTrigger.on('click', function() {
		var $this = $(this);
		$this.toggleClass('top_section__link--current-loc--active');
		$locationPanel.toggleClass('country-location--active');

	});
});

There are no notes for this item.