// Imports

@import "import/constants";
@import "import/helpers";
@import "import/reset";
@import "import/mediaqueries";

// Base styles

body.before-js .page-bg * {
	visibility: hidden;
}

body {
	font-family: @f-text;
	font-size: 62.5%;
	font-size-adjust: none;
	color: @text;
	padding: 0 0 (@fs * 2);
	height: 100%;
	background-color: @footer-bg;

	.page-bg {
		padding: 0 @page-gutter-small (@base * 12);
		background-color: @white;
	}

	@media @vp-small {
		padding-bottom: @fs * 2;
	}
}

p, li, td, th, dt, dd, cite, blockquote, label, legend, .text {
	font-size: @fs;
	line-height: @lh;
}

p + p {
	margin-top: @base;
}

h1, h2, h3, h4 {
	font-family: @f-subtitle;
	color: @text;
	margin: 0 0 (@base * 2);
}

h1 {
	font-family: @f-title;
	font-size: @fs-title;
	line-height: @lh-title;
	font-weight: 800;
}

h2 {
	font-size: @fs-title2;
	line-height: @lh-title2;
	font-weight: 200;
}

h3 {
	font-size: @fs-title3;
	line-height: @lh-title3;
	font-weight: 200;

	&.group {
		margin: (@base * 6) 0 (@base * 4);
		border-top: 1px solid @ui-border;
	}
}

h4 {
	font-size: @fs-title4;
	line-height: @lh-title4;
	font-weight: 200;
	margin: 0;
}

h5 {
	font-size: @fs-title5;
	line-height: @lh-title5;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: @text-light;
	margin-top: @base;
}

h6 {
	font-size: @fs-title6;
	line-height: @lh-title6;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: @text-light;
	margin-top: @base;
}

input, textarea, select {
	font-family: @f-meta;
	font-size: @fs;
}

strong, b {
	font-weight: normal;
}

em, i {
	font-style: italic;
}

figcaption {
	font-family: @f-meta;
	font-size: @fs-caption;
	line-height: @lh-caption;
}

a {
	color: @link;
	text-decoration: none;
}

.visually-hidden {
	display: none;
}

.nobr {
	white-space: nowrap;
}

body.api-docs {

	// Page
	
	.bg {
		background-color: @white;
		padding-bottom: @fs * 5;
	
		@media @vp-max-tablet-small {
			padding-bottom: @fs * 3;
		}
	}
	
	.page, .footer {
		position: relative;
		margin: 0 auto;
		.box-sizing;
		.cf;
	
		@media @vp-min-tablet-wide {
			max-width: @page-width;
		}
	}
	
	.page {
		padding-top: @base * 3;
	}

	.footer {
		@media @vp-max-tablet-wide {
			padding: 0 @page-gutter-small;
		}
	}
	
	// Header
	
	#header {
		padding-bottom: @base * 3;
	
		@media @vp-min-tablet-wide {
			padding-bottom: @base * 2;
		}
	}
	
	// Sidebar
	
	#sidebar {
		@media @vp-min-tablet-wide {
			float: left;
			.grid(6);
	
			nav {
				border-right: 1px solid @ui-border;
				.grid(5, 6);
			}
		}
	
		nav {
			ul {
				margin-bottom: @base * 4;
				
				ul {
					margin-bottom: 0;
				}
			}
		
			a {
				display: block;
				.subpixel(true);
			}
		
			.expandable {
				.endpoint {
					font-family: @f-subtitle;
					letter-spacing: 0;
					margin: (@base * 1.5) 0 (@base / 2);
					cursor: pointer;
	
					&:hover, &:active {
						color: @text;
					}
				}
		
				section {
					display: none;
				}
		
				div {
					padding-top: (@base / 2);
				}
		
				a {
					font-size: 14px;
					color: @text-light;
				}
			}
		}
	}
	
	// Footer
	
	#footer {
		margin: 0 auto;
		padding-top: @base * 4;
	
		.footer {
			/* padding: 0 @page-gutter-small; */
		}
	
		a {
			&:hover, &:active {
				text-decoration: none;
			}	
		}
	
		nav {
			margin-bottom: @base * 2;
	
			li {
				display: inline-block;
				margin-right: 1em;
			}
	
			a {
				color: @text-footer;
				font-family: @f-subtitle;
	
				&:hover, &:active {
					color: @text;
				}
			}
		}
	
		.copyright {
			p {
				color: @text-footer;
				font-size: 13px;
				line-height: 1.5;
			}
	
			a {
				color: @text-footer;
				border-bottom: 1px solid @ui-border;
	
				&:hover, &:active {
					color: @text;
					border-color: @text-footer;
				}
			}
		}
	}
}

@import "api";