@import 'mediawiki.mixins';

// Colours; see https://design.wikimedia.org/style-guide/visual-style_colors.html

@base100: #fff;
@base90: #f8f9fa;
@base80: #eaecf0;
@base70: #c8ccd1;
@base30: #72777d;
@base20: #54595d;
@base0: #000;

@red: #d33;
@red-bright: #fee7e6;
@red-dark: #b32424;

@green: #00af89;
@green-bright: #d5fdf4;
@green-dark: #14866d;

@blue: #36c;
@blue-bright: #eaf3ff;
@blue-dark: #2a4b8d;

@background: @base100;
@text: @base0;

@link: @blue;
@link-visited: @blue-dark;

@link-red: @red;
@link-red-visited: @red-dark;

// Flair

// Fonts are chosen for consistent metrics, not necessarily overall prettiness.
@fonts: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
@fonts-secondary: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;

@border: 0.2em;
@radius: 0.2em;

@font-size: 0.95em;

// Widths

// Remember to also update skin.json (and possibly mobile.js) if you change these
// For some reason doing @mobile-width + 1px doesn't seem to actually work,
// so we need both for each thing
@mobile-width: 850px;
@desktop-small-floor: 851px;
@desktop-small-width: 1099px;
@desktop-mid-floor: 1100px;
@desktop-mid-width: 1339px;
@desktop-large-floor: 1340px;

// The max-width for the content
@content-width: 115em;

@content-padding: 2em;

@column-left-size: 14em;
@column-right-size: 16em;

@fixed-header-height: 3.125em;
@color-height: 0.35em;

// Miscellaneous functions

// To hide objects, but keep them accessible for screen-readers
.hidden() {
	position: absolute;
	top: -9999px;
	left: 0;
}

// Icons - hides labels, but keep them accessible for screen-readers
.icon() {
	text-indent: -99999px;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
}

.box() {
	background: @base90;
	border: solid @base80;
	border-width: 1px 1px @border;
	padding: 1.25em 1.75em;
	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}

.unbox() {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

// Icons for the page actions menus
.ca-icon() {
	.icon;
	display: inline-block;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	margin-bottom: -0.5em;
}

// Navigation column blocks

.nav-block() {
	.box();
	padding: 1.5em 1.5em 0;
	margin: 1em 0;
	line-height: 1.125;
	word-wrap: break-word;
	font-size: 0.95em;

	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	h3 {
		font-weight: normal;
		font-size: 1em;
		margin: 0.25em 0 0.75em 0;
		padding-bottom: 0.15em;
		border-bottom: solid 2px @base70;
	}

	ul {
		margin-bottom: 2em;
	}

	li {
		padding: 0.25em 0;
	}
}

.column-right() {
	padding-left: 1em;
	box-sizing: border-box;

	.sidebar-chunk {
		.nav-block();
	}
}

.column-left() {
	padding-right: 1em;
	box-sizing: border-box;

	.sidebar-chunk {
		.nav-block();
	}
}

// Dropdowns
.dropdown-header() {
	cursor: pointer;
	margin-bottom: -1em;
	padding-bottom: 1em;

	&:after {
		display: inline-block;
		content: '';
		width: 22px;
		height: 12px;
		.background-image-svg( 'images/arrow-down-grey.svg', 'images/arrow-down-grey.png' );
		background-position: center center;
		background-repeat: no-repeat;
	}
}

.dropdown-menu( @direction: right ) {
	.nav-block();
	background: @background;
	box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 );
	position: absolute;
	padding: 20px 2em 0;
	margin: 0;
	min-width: 9.153em;
	top: 2.95em;
	@{direction}: -1em;
	overflow: visible;
	z-index: 3;
}

// Categories on bottom of page

.categories-bottom() {
	#catlinks-sidebar {
		display: none;
	}

	#catlinks {
		margin: 0 @content-padding;
		padding: 1.5em 0 0.5em;

		li {
			border-left: 0;
		}

		div {
			margin: 0 0 0.35em;
		}
	}
}