// Figures. Note: we use the blockquote element to wrap figures and their captions in valid XHTML. 
// Use the .figure class for the blockquote wrapping an image and a caption. 
// Add .fixed, .small and/or .large for layout and size options. 

blockquote.figure {
	clear: both;
	float: top; // By default all figures float to the tops of their pages
	page-break-inside: avoid;
	background-color: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0 0 $line-height-default 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}

// Experimental. Effectively overrides 'unless-fit' to reduce ugly instances
// of indented images in lists beside floated, non-indented images.
ol li blockquote.figure, ul li blockquote.figure {
	display: inline-block;
}

// Fix figures in place, for when they must keep their position in the text flow,
// and not float to the top of the page.
.figure.fixed {
	clear: both;
	float: none;
	margin-top: $line-height-default;
}

// The p (some with child img) elements inside the figure
.figure p {
	clear: both;
	page-break-inside: avoid;
	page-break-before: avoid;
	text-align: center;
	text-indent: 0;
}

// The image(s) in the figure
.figure p img {
	width: auto;
	max-width: 100%;
	max-height: 100%; // Prevents image from expanding below a parent p set to a specific height
	margin: 0 auto 0 auto;
}

// The caption (always the last paragraph in the figure)
// Note doesn't allow for multi-para captions – have to use line breaks :(
.figure p:last-of-type {
	padding: ($line-height-default / 2) 0 ($line-height-default / 2) 0;
	margin: 0;
	text-align: center;
	text-indent: 0;
	font-style: italic;
}

// Emphasis inside the italic caption
.figure p:last-of-type em {
	font-style: initial;
}

// Image size options
// These need to be deprecated in favour of a multiple-based system.
.figure.x-small p img {
	width: auto;
	max-height: 30mm;
}
.figure.small p img {
	width: auto;
	max-height: 45mm;
}
.figure.medium p img {
	width: auto;
	max-height: 65mm;
}
.figure.large {
	float: none;
	page-break-before: always;
}
.figure.large img {
	max-height: 150mm;
	max-width: 100%;
	width: auto;
}

// Paragraphs that follow figures should:
// have an indent when following floated figures
// not have an indent when following fixed figures.
blockquote.figure + p {
	text-indent: $line-height-default;
}
blockquote.figure.fixed + p {
	text-indent: 0;
}