@import 'mediawiki.ui/variables';

.category-suggestions {
	button {
		margin-right: 0.5em;
	}
}

// FIXME: code duplication with special watchlist, consolidate!
.category-header {
	margin-bottom: -1px;

	li {
		display: inline-block;
		margin: 0 0 0 -1px;
		border-width: 0 0 1px 1px;
		border-style: solid;
		border-color: @colorGray12;
		padding: 5px 0 0;
		line-height: 1.5;
		text-align: center;

		a {
			display: block;
			color: @colorGray5;
			margin: 0 1px 0 0;
			border-bottom: 3px solid transparent;
		}

		&.selected a {
			border-bottom-color: @colorProgressive;
			font-weight: bold;
		}
	}

	/* source: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ */
	/* width for two links */
	li:first-child:nth-last-child( 2 ),
	li:first-child:nth-last-child( 2 ) ~ li {
		width: 50%;
	}

	/* width for four links */
	/* stylelint-disable no-descending-specificity */
	li:first-child:nth-last-child( 4 ),
	li:first-child:nth-last-child( 4 ) ~ li {
		width: 25%;
	}
	/* stylelint-enable no-descending-specificity */
}