// Namespace button
#p-namespaces {
	position: relative;
	float: right;
	margin: 0 @negative-margin;
	padding: @margin-side;

	ul {
		margin: 1.6rem 0 0 0;
		display: flex;
		justify-content: flex-end; // Right align

		li {
			list-style: none;

			a {
				display: flex;
				align-items: center;
				padding: 0.4rem 0.8rem;
				border: 1px solid var( --pagelinks-p-namespaces-ul-li-a-border-color );
				color: var( --pagelinks-p-namespaces-ul-li-a-color );
				background-color: var( --pagelinks-p-namespaces-ul-li-a-background-color );
				transition: @transition-background-quick, @transition-box-shadow-quick;
				.boxshadow(1);

				&:hover {
					background-color: var( --pagelinks-p-namespaces-ul-li-a-hover-background-color );
					.boxshadow(2);
				}

				&:after {
					order: -1;
					content: '';
					position: relative;
					width: 14px;
					height: 14px;
					margin-right: 8px;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					opacity: 0.5;
				}
			}
		}
	}
}

.skin-citizen-dark {
	#p-namespaces {
		ul li a {
			&:after {
				filter: invert( 1 );
			}
		}
	}
}

@media ( max-width: @screen1 ) {
	#p-namespaces {
		margin: 0 !important; // somehow got overrided
		padding: @margin-side 0;
	}
}

@media ( max-width: @screen2 ) {
	#p-namespaces {
		margin: 0 ~'calc((100vw - @{page-width}) / -2)';
	}
}