// 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 @base-80;
				color: @base-20;
				background-color: @base-90;
				transition: @transition-background-quick, @transition-box-shadow-quick;
				.boxshadow(1);

				&:hover {
					background-color: @base-80;
					.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;
				}
			}
		}
	}
}

@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)';
	}
}

@media ( prefers-color-scheme: dark ) {
	#p-namespaces {
		ul li a {
			background-color: @dark-bg-10;
			border-color: @dark-bg-20;

			&:hover {
				background-color: @dark-bg-20;
			}

			&:after {
				filter: invert( 1 );
			}
		}
	}
}