@import "edge/base";
@import "edge/helpers";


.custom-grid {
	@include grid-column($large:3);
}

.demo-grid {
	@include transition($g-transition);
	p {
		text-align : center;
		margin     : 0;
	}
	.column,
	.columns {
		p {
			margin-bottom  : em(15px);
			padding-top    : em(10px);
			padding-bottom : em(10px);
			background     : #eee;
			text-align     : center;
		}

		.column,
		.columns {
			p {
				background    : #ddd;
			}
			
			.column,
			.columns {
				p {
					background    : #ccc;
				}
		 	}
		}
	}
}

.demo-tile {
	p {
		background     : #eee;
		margin-bottom  : em(15px);
		padding-top    : em(10px);
		padding-bottom : em(10px);
		text-align     : center;
	}
}


/* Custom Grid */
.cgrid-1 {
	@include grid-column($large:5);
}
.cgrid-2 {
	@include grid-column($large:7);
}

.cgrid-a1 {
	@include grid-column($large:5, $small:10);
}
.cgrid-a2 {
	@include grid-column($large:7, $small:2);
}

.cgrid-b1 {
	@include grid-column($large:10, $small:8, $mini:6);
}
.cgrid-b2 {
	@include grid-column($large:2, $small:4, $mini:6);
}

.cgrid-c1 {
	@include grid-column($large:6, $large-offset:4, $small:6);
}
.cgrid-c2 {
	@include grid-column($large:2, $small:6);
}

.cgrid-d1 {
	@include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4);
}
.cgrid-d2 {
	@include grid-column($large:3, $small:4);
}

.cgrid-e1 {
	@include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:6);
}
.cgrid-e2 {
	@include grid-column($large:3, $small:4, $mini:6);
}

.cgrid-f1 {
	@include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:5, $mini-offset:1);
}
.cgrid-f2 {
	@include grid-column($large:3, $small:4, $mini:6);
}

.cgrid-g1 {
  @include grid-column($large:4, $push:8);
}
.cgrid-g2 {
  @include grid-column($large:8, $pull:4);
}

.cgrid-h1 {
	@include grid-column($large:8, $small:8);
}
	.cgrid-h1-1 {
		@include grid-column($large:5, $small:5);
	}
	.cgrid-h1-2 {
		@include grid-column($large:7, $small:7);
	}
.cgrid-h2 {
	@include grid-column($large:4, $small:4);
}
	.cgrid-h2-1 {
		@include grid-column($large:6, $small:6, $center:true);
	}

.cgrid-i0 {
	@include grid-row($gutter:50px);
}
.cgrid-i1 {
	@include grid-column($large:6, $gutter:50px);
}
.cgrid-i2 {
	@include grid-column($large:6, $gutter:50px);
}

/* Custom Tile */
.custom-tile1 {
	@include tile($large:7, $small:5);
}

.custom-tile2 {
	@include tile($large:5, $small:3, $collapse:true);
}

[data-page="form"] {
	input, textarea, select {
		margin-bottom: 20px;
	}
}

.blog-post {
	@include baseline();
	@include vertical-rhythm();
}

[data-page="triangle"] {
	.triangle1 {
		@include triangle($color:$main-color, $width:100px, $direction:right);
	}
}

// [data-page="typography"] {
// 	@mixin adjust-image-leading-to($lines, $font-size: $base-font-size) {
// 		height: rhythm($lines, $font-size);
// 	}

// 	h1 {
// 		@include adjust-leading-to(2, $h1-font-size);
// 	}

// 	blockquote {
// 		padding-left: 20px;
// 		background: #eee;
// 		@include trailer(1);
// 		@include leader(1);
// 		@include padding-trailer(0.5);
// 		@include padding-leader(0.5);
// 	}

// 	table {
// 		@include trailer(1);
// 	}

// 	td, th {
// 		@include adjust-leading-to(1);
		
// 		padding-left: 20px;
// 		padding-right: 20px;
		
// 		// @include box-shadow(inset 1px 1px black);

// 		// &:last-child {
// 		// 	@include box-shadow(
// 		// 		inset 1px 1px black,
// 		// 		inset -1px 0 black
// 		// 	);
// 		// }
// 	}

// 	// tr:last-child {
// 	// 	td {
// 	// 		@include box-shadow(
// 	// 			inset 1px 1px black,
// 	// 			inset 0 -1px black
// 	// 		);

// 	// 		&:last-child {
// 	// 			@include box-shadow(
// 	// 				inset 1px 1px black,
// 	// 				inset -1px -1px black
// 	// 			);
// 	// 		}
// 	// 	}
// 	// }

// 	.sidebar {
// 		h2 {
// 			@include trailing-border(5px, 1, $h2-font-size);
// 			@include trailer(1, $h2-font-size);
// 		}

// 		h3 {
// 			@include trailer(1, $h3-font-size);
// 		}
// 		li {
// 			cursor: pointer;

// 			&:hover {
// 				color: tomato;
// 			}
// 		}
// 	}
// }