.catlinks {
	display: flex;
	flex-direction: column;
	clear: both;
	gap: var( --space-lg );
	line-height: var( --line-height-xs );

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

	.mw-hidden-catlinks {
		color: var( --color-base--subtle );
		font-size: @ui-menu-text;
		letter-spacing: 0.05em;
	}

	.mw-normal-catlinks,
	.mw-hidden-catlinks {
		> a {
			display: block;
			color: var( --color-base--subtle );
			font-size: @ui-menu-text;
			letter-spacing: 0.05em;
		}

		> ul {
			display: flex;
			flex-wrap: wrap;
			padding-top: 0.5rem;
			margin: 0;
			/* Reset font */
			font-size: @content-caption-size;
			gap: 0.375rem;
			letter-spacing: 0; // hidden-catlink title does not have a selector

			> li {
				display: block;

				> a {
					display: inline-block;
					padding: 0.5rem 1rem;
					border: 1px solid var( --border-color-base--darker );
					border-radius: 100px;
					color: var( --color-base--subtle );
					transition: @transition-background;

					&:hover {
						background-color: var( --color-primary--hover );
						color: #fff;
					}

					&.new {
						border-style: dashed;

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

	.mw-hidden-cats-hidden {
		display: none;
	}
}