// ======================================
// Chapter 3: Nesting, @extend, Placeholders and Mixins.
// ======================================

// Nesting Example: links
// ======================================


a {
	color: $color7;
	&:hover,&:focus {
		color: $color5;
	}
	&:visited,&:active {
		color: $color4;
	}
}


// Nesting example using parent selector
.main {
	.content {
		width: 70%;
	}
	.content & {
		width: 100%;
	}
	.content & {
		.two & {
			color: pink;
		}
	}
}

// Chaining selectors
.selector-one {
	&.selector-two {
		color: green;
	}
}

// Nesting example with class, ID and pseudo classes (too deep)
// ====================================================================

.nesting {
	.class {
		width: 100%;
	}
	#id {
		width: 100%;
	}
	&:hover {
		color: $color7;
	}
	.multi-nesting {
		.class-within {
			width: 90%;
			#id_within {
				width: 90%;
				&:hover {
					color: $color4;
				}
			}
		}
	}
}

// instead only nest as deep as you need to

#id_within {
	width: 90%;
	&:hover {
		color: $color4;
	}
}

// Nested namespace properties
// ====================================================================

.nesting-namespace-properties {
	border: {
		top: 1px dashed $color7;
		right: 1px dotted $color5;
		bottom: 2px solid $color8;
		left: 1px solid $color4;
	}
}

/* CSS standard margin and padding shorthand */

.margin {
	margin: 0 0 1em 0;
}

// Placeholder example
%box {
	padding: 2em;
	color: $color10;
	background-color: $color11;
}
.warning-box {
	@extend %box;
	border: 2px dotted $color1;
}
.success-box {
	@extend %box;
	border: 2px dotted $color4;
}
.info-box {
	@extend %box;
	border: 2px dotted $color7;
}
