.catlinks {
	margin: 0 @negative-margin;
	padding: @margin-side;
	line-height: 1.2;

	.mw-normal-catlinks {
		font-size: 0; // Hide colon

		> a {
			display: block;
			color: @color-content-caption;
			font-size: @content-caption-size;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		> ul {
			margin: 0;
			padding-top: @content-margin-top;
			display: flex;
			flex-wrap: wrap;
			font-size: @content-caption-size; // Reset font

			li {
				display: block;
				margin: 0 @margin-side / 2 @margin-side / 2 0;
				padding: 0;
				border: 0;

				&:first-of-type {
					margin-left: 0;
				}

				a {
					padding: @margin-side / 4 @margin-side / 2;
					display: block;
					border: 1px solid @base-90;
					background-color: @base-90;
					color: @color-content-caption !important; // Override other styles
					.boxshadow(1);
					transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick;

					&:hover {
						background-color: @color-link-active;
						border-color: @color-link-active;
						color: @base-100 !important;
						transform: translateY( -2px );
						.boxshadow(2);
					}

					&.new:hover {
						background-color: @color-link-new-active;
						border-color: @color-link-new-active;
					}
				}
			}
		}
	}
}

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

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

@media ( prefers-color-scheme: dark ) {
	.catlinks .mw-normal-catlinks > ul li a {
		background-color: @dark-bg-10;
		border-color: @dark-bg-10;
	}
}