@import "compass/reset";
@import "typography";
@import "icons";

/******************************************************
* Style Guide
******************************************************/

* {
	box-sizing: border-box;
}

body {
	background-color: #EFEFEF;
}

nav {
	margin-bottom: $normal-margin * 4;
	a {
		display: inline-block;
		margin-right: 15px;
	}
}

.section {
	width: 100%;
	padding: 30px 24px;
	@media (min-width: 768px) {
		padding: 60px;
	}
}

.narrow-wrapper {
	width: 100%;
	max-width: 575px;
}

.font-comparison  {
	width: 100%;
	table-layout: fixed;
	background-color: #FFFFFF;
}

.font-comparison td, th {
	padding: 12px 15px 15px 20px; 
	vertical-align: top;
	position: relative;
	width: 100%;
	display: block;
	border-right: none;

	@media screen and (min-width: 768px) {
		width: auto;
		display: table-cell;
		border-right: 1px solid #ededed;
	}
}

.font-comparison th {
	@include td-set-responsive-font-size($font-heading, 0);
	@extend .text-secondary;
	border-bottom: 1px solid #ededed;
}

.font-comparison tr {
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	width: 100%;
}

.font-comparison thead {
	display: none;

	@media screen and (min-width: 768px) {
		display: table-header-group;
	}	
}

.font-comparison td p {
	max-height: 160px;
	overflow: hidden;
	margin-bottom: $normal-margin * 1.5;
	position: relative;
	@media screen and (min-width: 768px) {
	    max-height: 300px;
	}
	
	&:after {
		content: "";
		height: 40px;
		background-color: white;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: -moz-linear-gradient(top, 		rgba(255,255,255,0), 	rgba(255,255,255,1)); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, 	rgba(255,255,255,0), 	rgba(255,255,255,1)); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, 		rgba(255,255,255,0), 	rgba(255,255,255,1)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.font-comparison th:first-child {
	border-right: 1px solid #ededed;
	text-align: left;

	@media screen and (min-width: 768px) {
		width: 8%;
		display: table-cell;
		text-align: right;
	}
}

.font-comparison th:last-child {
	@media screen and (min-width: 768px) {
		width: 18%;
	}
}

.metrics {
	@include td-set-responsive-font-size($font-heading, 0);
}


// Copy

.copy-larger4 { 
	@include td-set-responsive-font-size($font-copy, 4);
} 
 
.copy-larger3 { 
	@include td-set-responsive-font-size($font-copy, 3);
}

.copy-larger2 { 
	@include td-set-responsive-font-size($font-copy, 2); 
}

// Icons

.icon-larger4 { 
	@include td-set-responsive-font-size($font-icon, 4);
} 
 
.icon-larger3 { 
	@include td-set-responsive-font-size($font-icon, 3);
}

.icon-larger2 { 
	@include td-set-responsive-font-size($font-icon, 2); 
}

.icon-larger1 { 
	@include td-set-responsive-font-size($font-icon, 1);
} 
 
.icon-base { 
	@include td-set-responsive-font-size($font-icon, 0);
}

.icon-smaller { 
	@include td-set-responsive-font-size($font-copy, -1); 
}