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

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

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

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

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

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

				a {
					display: block;
					padding: @margin-side / 4 @margin-side / 2;
					border: 1px solid var( --border-color-base--lighter );
					background-color: var( --background-color-framed );
					color: var( --color-base--subtle ) !important; // Override
					transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick;
					.boxshadow(1);

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

					&.new:hover {
						border-color: var( --color-destructive--hover );
						background-color: var( --color-destructive--hover );
					}
				}
			}
		}
	}
}

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

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