/*------------------------------------*\
	# General
\*------------------------------------*/

.responsive-table {
	.responsive-table();
}
.tabular {
	.gray();
	.no-wrap();
	th,
	td:not(:last-child) {
		.width(5%);
	}
	th {
		.darkestGray();
		.font-weight(normal);
	}
}
.unstyled {
	.unstyled();
}





/*------------------------------------*\
	# Header
\*------------------------------------*/

.header {
	.container();
	.padding(vertical; 4; 2);
}
.logo {
	.inline-block(9);
	.spaced(.8);
	&__img {
		.width(9);
	}
}
.sections {
	.font(@headingFont; 1.3; 400);
	&__item {
		.inline();
		.margin(right; 1.8);
		.padding(bottom; .2);
	}
	&__link {
		&.-is-active {
			.darkestGray();
		}
	}
}





/*------------------------------------*\
	# Patterns
\*------------------------------------*/

.pattern {
	.margin(vertical; 4; 6);
	&__title {
		.font(@headingFont; 2.2);
		.spaced(0);
	}
	&__heading {
		.font-size(1.4);
		.gray();
		.spaced(0);
	}
	&__output {
		.margin(top; 2);
	}
	&__input {
		.background(none);
		.margin(vertical; 2; 0);
		.padding(0);
	}
}
code {
	&.hljs {
		.background(@lightestGray);
		.padding(@codeBlockPaddingVertical; @codeBlockPaddingHorizontal);
	}
}





/*------------------------------------*\
	# Colors
\*------------------------------------*/

.swatches {
	.max-width(80);
}
.swatch {
	.align(center);
	.background(@white);
	.font-size(1.2);
	.gray();
	.inline-block(13);
	.margin(right; 1);
	.rounded();
	.shadow(dark; 10%; 0; 1px; 1px);
	.spaced(1);
	&:before {
		.block();
		.color();
		.height(4.5);
		.line-height(45px);
		.rounded(top);
	}
	&.-primary {
		&:before {
			.background(@primary);
			.content(@primary);
			.white();
		}
	}
	&.-secondary {
		&:before {
			.background(@secondary);
			.content(@secondary);
			.white();
		}
	}
	&.-tertiary {
		&:before {
			.background(@tertiary);
			.content(@tertiary);
			.white();
		}
	}
	&.-info {
		&:before {
			.background(@info);
			.content(@info);
			.white();
		}
	}
	&.-success {
		&:before {
			.background(@success);
			.content(@success);
			.white();
		}
	}
	&.-warning {
		&:before {
			.background(@warning);
			.content(@warning);
			.white();
		}
	}
	&.-white {
		&:before {
			.background(@white);
			.content(@white);
		}
	}
	&.-lightest-gray {
		&:before {
			.background(@lightestGray);
			.content(@lightestGray);
		}
	}
	&.-lighter-gray {
		&:before {
			.background(@lighterGray);
			.content(@lighterGray);
		}
	}
	&.-light-gray {
		&:before {
			.background(@lightGray);
			.content(@lightGray);
		}
	}
	&.-gray {
		&:before {
			.background(@gray);
			.content(@gray);
			.white();
		}
	}
	&.-dark-gray {
		&:before {
			.background(@darkGray);
			.content(@darkGray);
			.white();
		}
	}
	&.-darker-gray {
		&:before {
			.background(@darkerGray);
			.content(@darkerGray);
			.white();
		}
	}
	&.-darkest-gray {
		&:before {
			.background(@darkestGray);
			.content(@darkestGray);
			.white();
		}
	}
	&.-black {
		&:before {
			.background(@black);
			.content(@black);
			.white();
		}
	}
}





/*------------------------------------*\
	# Breakpoints
\*------------------------------------*/

.breakpoints {
	&__size {
		&.-mobile-portrait {
			&:after {
				.content(--);
			}
		}
		&.-mobile-landscape {
			&:after {
				.content(@mobileLandscapeWidth);
			}
		}
		&.-tablet-portrait {
			&:after {
				.content(@tabletPortraitWidth);
			}
		}
		&.-desktop-small {
			&:after {
				.content(@desktopSmallWidth);
			}
		}
		&.-desktop-medium {
			&:after {
				.content(@desktopMediumWidth);
			}
		}
		&.-desktop-large {
			&:after {
				.content(@desktopLargeWidth);
			}
		}
	}
}





/*------------------------------------*\
	# Fonts
\*------------------------------------*/

.fonts {
	&__family {
		&.-base {
			&:after {
				.content(@baseFont);
				.font();
			}
		}
		&.-heading {
			&:after {
				.content(@headingFont);
				.font(@headingFont);
			}
		}
		&.-description-title {
			&:after {
				.content(@dtFont);
				.font(@dtFont);
			}
		}
		&.-description {
			&:after {
				.content(@ddFont);
				.font(@ddFont);
			}
		}
		&.-quote {
			&:after {
				.content(@quoteFont);
				.font(@quoteFont);
			}
		}
		&.-cite {
			&:after {
				.content(@citeFont);
				.font(@citeFont);
			}
		}
		&.-address {
			&:after {
				.content(@addressFont);
				.font(@addressFont);
			}
		}
		&.-code {
			&:after {
				.content(@codeFont);
				.font(@codeFont);
			}
		}
		&.-code-block {
			&:after {
				.content(@codeBlockFont);
				.font(@codeBlockFont);
			}
		}
		&.-input {
			&:after {
				.content(@inputFont);
				.font(@inputFont);
			}
		}
		&.-legend {
			&:after {
				.content(@legendFont);
				.font(@legendFont);
			}
		}
		&.-button {
			&:after {
				.content(@buttonFont);
				.font(@buttonFont);
			}
		}
	}
}





/*------------------------------------*\
	# Icons
\*------------------------------------*/

.load-font('icons');

.icons {
	&__icon {
		&:after {
			.darkerGray();
			.font('icons');
		}
		&.-wee {
			&:after {
				.content(@iconWee);
			}
		}
		&.-twitter {
			&:after {
				.content(@iconTwitter);
			}
		}
		&.-facebook {
			&:after {
				.content(@iconFacebook);
			}
		}
		&.-github {
			&:after {
				.content(@iconGitHub);
			}
		}
	}
}





/*------------------------------------*\
	# Headings
\*------------------------------------*/

.headings {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		&:after {
			.font(@baseFont; @baseFontSize);
			.font-size(1.4);
			.font-weight(normal);
			.gray();
			.margin(left; 1);
		}
		code {
			.font-size(1.4);
			.margin(left; 1);
		}
	}
	h1 {
		&:after {
			@fontSize: unit(@h1, @defaultUnit);
			.content('@{fontSize} (@{headingLineHeight})');
		}
	}
	h2 {
		&:after {
			@fontSize: unit(@h2, @defaultUnit);
			.content('@{fontSize} (@{headingLineHeight})');
		}
	}
	h3 {
		&:after {
			@fontSize: unit(@h3, @defaultUnit);
			.content('@{fontSize} (@{headingLineHeight})');
		}
	}
	h4 {
		&:after {
			@fontSize: unit(@h4, @defaultUnit);
			.content('@{fontSize} (@{headingLineHeight})');
		}
	}
	h5 {
		&:after {
			@fontSize: unit(@h5, @defaultUnit);
			.content('@{fontSize} (@{headingLineHeight})');
		}
	}
	h6 {
		&:after {
			@fontSize: unit(@h6, @defaultUnit);
			.content('@{fontSize} (@{headingLineHeight})');
		}
	}
}