// =============================================================================
// Quotes
// =============================================================================

/*
 * Sets consistent quote types
 */
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Blockquotes
 */
blockquote {
	.quote-box(30px 50px);
	clear: both;

	// Blockquotes within blockquotes
	blockquote {
		background: #eef7f9;
		color: #33505c;
	}

	// Quote content
	p {
		position: relative;
		margin-top: 5px;
	}

	em, cite {
		font-style: italic;
	}

	p:last-of-type {
		margin-bottom: 0;
	}

	// The author of the quote
	cite, span {
		display: block;
		margin-top: 20px;
		.font-size(@baseFontSize - 1);
		color: #91acbe;
	}

	span cite {
		display: inline;
	}

	// Aligned quotes
	&.alignleft,
	&.alignright {
		clear: none;
		width: 33%;
		padding: 30px @smallGutterWidth;
	}

	&.aligncenter {
		width: 66%;
		text-align: center;
	}

	&.alignleft {
		margin-right: @smallGutterWidth;
	}

	&.alignright {
		margin-left: @smallGutterWidth;
	}

	// The quote before the blockquote
	&:before {
		content: "\201C";
		position: absolute;
		top: -45px;
		left: -25px;
		#font > .alternative(170, normal, normal);
		color: rgb(94, 141, 181);
		opacity: 0.35;
	}

	// The quote after the blockquote
	p:first-of-type:after {
		content: "\201E";
		position: absolute;
		bottom: -10px;
		margin-left: 10px;
		#font > .alternative(70, normal, normal);
		color: rgb(94, 141, 181);
		opacity: 0.25;
	}

	// Hide the quote if there's only one <p>
	p:only-of-type:after {
		display: none;
	}
}

/* Hide the quote for embedded tweets */
.twt-tweet:before {
	display: none;
}

/* Pull quotes */
.pull {
	.font-size(19);
	/* Reset styles inherited from 'blockquote' */
	background: none;
	border: none;
	text-shadow: none;
	box-shadow: none;

	// Aligned pull quotes
	&.alignleft {
		padding-right: 0;
		margin: 0 @smallGutterWidth 0 0;
	}

	&.alignright {
		margin: 0 0 0 @smallGutterWidth;
	}

	// The pullquote quotes
	&:before {
		top: -22px;
		left: -12px;
		.font-size(120);
		opacity: 0.25;
	}

	&:after,
	p:first-of-type:after {
		.font-size(56);
		opacity: 0.2;
	}
}