/**
 * @name 	STypographyComponent Classes
 * This file provide the mixins to generate typography classes
 */

/**
 * Provide all the classes of the typography component like titles, paragraphs, lists, etc..
 * @param 		{Color} 	[$color=primary] 		The main color used to generate the texts styles
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
 @mixin s-typography-classes(
	$color : primary
) {
	// titles
	@include s-typography-title-classes();
	// paragraphs
	@include s-typography-paragraph-classes();
	// links
	@include s-typography-link-classes($color);
	// inline texts
	@include s-typography-inline-text-classes($color);
	// lists
	@include s-typography-list-classes($color);
	// captions
	@include s-typography-caption-classes();
	// quotes
	@include s-typography-quote-classes();
}

/**
 * Provide the styling for the titles classes:
 * - ```.h1-h6```
 * - ```.tf h1-h6```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-title-classes() {
	@include s-typography-title-classes-bare();
	@include s-typography-title-classes-style();
}

/**
 * Provide the bare styling for the titles classes
 * - ```.h1-h6```
 * - ```.tf h1-h6```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-title-classes-bare() {
	/**
	 * @name 	```.h1```
	 * h1 title styling
	 * @styleguide 	Typography / Titles
	 * @example 	html
	 * <h1 class="h1">Hello World</h1>
	 * <div class="#{s-text-format-class()}">
	 * 	<h1>Hello World</h1>
	 * </div>
	 */
	.h1,
	.#{s-text-format-class()} h1 {
		@include s-typography-title-bare(3.5em);
	}
	/**
	 * @name 	```.h2```
	 * h2 title styling
	 * @styleguide 	Typography / Titles
	 * @example 	html
	 * <h2 class="h2">Hello World</h2>
	 * <div class="#{s-text-format-class()}">
	 * 	<h2>Hello World</h2>
	 * </div>
	 */
	.h2,
	.#{s-text-format-class()} h2 {
		@include s-typography-title-bare(3em);
	}
	/**
	 * @name 	```.h3```
	 * h3 title styling
	 * @styleguide 	Typography / Titles
	 * @example 	html
	 * <h3 class="h3">Hello World</h3>
	 * <div class="#{s-text-format-class()}">
	 * 	<h3>Hello World</h3>
	 * </div>
	 */
	.h3,
	.#{s-text-format-class()} h3 {
		@include s-typography-title-bare(2.5em);
	}
	/**
	 * @name 	```.h4```
	 * h4 title styling
	 * @styleguide 	Typography / Titles
	 * @example 	html
	 * <h4 class="h4">Hello World</h4>
	 * <div class="#{s-text-format-class()}">
	 * 	<h4>Hello World</h4>
	 * </div>
	 */
	.h4,
	.#{s-text-format-class()} h4 {
		@include s-typography-title-bare(2em);
	}
	/**
	 * @name 	```.h5```
	 * h5 title styling
	 * @styleguide 	Typography / Titles
	 * @example 	html
	 * <h5 class="h5">Hello World</h5>
	 * <div class="#{s-text-format-class()}">
	 * 	<h5>Hello World</h5>
	 * </div>
	 */
	.h5,
	.#{s-text-format-class()} h5 {
		@include s-typography-title-bare(1.5em);
	}
	/**
	 * @name 	```.h6```
	 * h6 title styling
	 * @styleguide 	Typography / Titles
	 * @example 	html
	 * <h6 class="h6">Hello World</h6>
	 * <div class="#{s-text-format-class()}">
	 * 	<h6>Hello World</h6>
	 * </div>
	 */
	.h6,
	.#{s-text-format-class()} h6 {
		@include s-typography-title-bare(1em);
	}
	// vertical rhythme
	h1,h2,h3,h4,h5,h6,
	.h1,.h2,.h3,.h4,.h5,.h6 {
		@include s-vertical-rhythme() {
			margin-bottom:s-space(default);
			&:last-child {
				margin-bottom:0;
			}
		}
	}
}

/**
 * Provide the style styling for the titles classes
 * - ```.h1-h6```
 * - ```.tf h1-h6```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-title-classes-style() {
	.h1,
	.#{s-text-format-class()} h1 {
		@include s-typography-title-style(3.5em);
	}
	.h2,
	.#{s-text-format-class()} h2 {
		@include s-typography-title-style(3em);
	}
	.h3,
	.#{s-text-format-class()} h3 {
		@include s-typography-title-style(2.5em);
	}
	.h4,
	.#{s-text-format-class()} h4 {
		@include s-typography-title-style(2em);
	}
	.h5,
	.#{s-text-format-class()} h5 {
		@include s-typography-title-style(1.5em);
	}
	.h6,
	.#{s-text-format-class()} h6 {
		@include s-typography-title-style(1em);
	}
}

/**
 * Provide the styling for the paragraphs classes
 * - ```.p```, ```.tf p```
 * - ```.p--lead```, ```.tf p.p--lead```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-paragraph-classes() {
	@include s-typography-paragraph-classes-bare();
	@include s-typography-paragraph-classes-style();
}

/**
 * Provide the bare styling for the ```.p``` and ```.p--lead``` classes
 * - ```.p```, ```.tf p```
 * - ```.p--lead```, ```.tf p.p--lead```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-paragraph-classes-bare() {
	/**
	 * @name 	```.p```
	 * Default paragraph styling
	 * @styleguide 	Typography / Paragraphs
	 * @example 	html
	 * <p class="p #{s-setting('vertical-rhythme.scope-class')}">
	 * 	Duis gravida justo at urna interdum blandit. Sed venenatis, eros dictum gravida dictum, mauris sapien feugiat libero, at fermentum quam tellus dignissim nunc. Donec eu rutrum dui, in rhoncus lacus.
	 * </p>
	 * <div class="#{s-text-format-class()} #{s-setting('vertical-rhythme.scope-class')}">
	 * 	<p>
	 * 		Duis gravida justo at urna interdum blandit. Sed venenatis, eros dictum gravida dictum, mauris sapien feugiat libero, at fermentum quam tellus dignissim nunc. Donec eu rutrum dui, in rhoncus lacus.
	 *   </p>
	 * </div>
	 */
	.p,
	.#{s-text-format-class()} p {
		@include s-typography-paragraph-bare(1em);
	}
	/**
	 * @name 	```.p--lead```
	 * Lead paragraph styling
	 * @styleguide 	Typography / Paragraphs
	 * @example 	html
	 * <p class="p p--lead #{s-setting('vertical-rhythme.scope-class')}">
	 * 	Duis gravida justo at urna interdum blandit. Sed venenatis, eros dictum gravida dictum, mauris sapien feugiat libero, at fermentum quam tellus dignissim nunc. Donec eu rutrum dui, in rhoncus lacus.
	 * </p>
	 * <div class="#{s-text-format-class()} #{s-setting('vertical-rhythme.scope-class')}">
	 * 	<p class="lead">
	 * 		Duis gravida justo at urna interdum blandit. Sed venenatis, eros dictum gravida dictum, mauris sapien feugiat libero, at fermentum quam tellus dignissim nunc. Donec eu rutrum dui, in rhoncus lacus.
	 *   </p>
	 * </div>
	 */
	.p--lead,
	.#{s-text-format-class()} p.lead {
		font-size:1.3em !important;
		font-weight: lighter;
	}
	// vertical rhythme
	p,.p {
		@include s-vertical-rhythme() {
			margin-bottom:s-space(default);
			&:last-child {
				margin-bottom:0;
			}
		}
	}
}

/**
 * Provide the bare styling for the ```.p``` class
 * - ```.p```, ```.tf p```
 * - ```.p--lead```, ```.tf p.p--lead```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-paragraph-classes-style() {
	.p,
	.#{s-text-format-class()} p {
		@include s-typography-paragraph-style();
	}
}

/**
 * Provide the styling for the links classes
 * - ```.link```, ```.tf a```
 * @param 		{Color} 		[$color=primary] 		The color used to style links
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-link-classes(
	$color : primary
) {
	@include s-typography-link-classes-bare();
	@include s-typography-link-classes-style($color);
}

/**
 * Provide the bare styling for the links classes
 * - ```.link```, ```.tf a```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-link-classes-bare() {
	.link,
	.#{s-text-format-class()} a {
		@include s-typography-link-bare();
	}
}
/**
 * Provide the style styling for the links classes
 * - ```.link```, ```.tf a```
 * @param 		{Color} 		[$color=primary] 		The color used to style links
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-link-classes-style(
	$color : primary
) {
	.link,
	.#{s-text-format-class()} a:not(.btn) {
		@include s-typography-link-style($color);
	}
}

/**
 * Provide the styling for the inline-text classes
 * - ```.mark```, ```.tf mark```
 * - ```.del```, ```.tf del```
 * - ```.s```, ```.tf s```
 * - ```.ins```, ```.tf ins```
 * - ```.u```, ```.tf u```
 * - ```.small```, ```.tf small```
 * - ```.strong```, ```.tf strong```
 * - ```.em```, ```.tf em```
 * @param 		{Color} 		[$color=primary] 		The color used to style different inline text elements
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-inline-text-classes(
	$color : primary
) {
	@include s-typography-inline-text-classes-bare();
	@include s-typography-inline-text-classes-style($color);
}

/**
 * Provide the bare styling for the inline-text classes
 * - ```.mark```, ```.tf mark```
 * - ```.del```, ```.tf del```
 * - ```.s```, ```.tf s```
 * - ```.ins```, ```.tf ins```
 * - ```.u```, ```.tf u```
 * - ```.small```, ```.tf small```
 * - ```.strong```, ```.tf strong```
 * - ```.em```, ```.tf em```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-inline-text-classes-bare() {
	/**
	 * @name 		Marked text ```.mark```
	 * For highlighting a run of text due to its relevance in another context, use the ```mark``` tag.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="mark">marked text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <mark>marked text</mark>
	 * </div>
	 */
	.mark,
	.#{s-text-format-class()} mark {
		@include s-typography-inline-text-bare(mark);
	}
	/**
	 * @name 		Deleted text ```.del```
	 * For indicating blocks of text that have been deleted use the ```del``` tag.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="del">deleted text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <del>deleted text</del>
	 * </div>
	 */
	.del,
	.#{s-text-format-class()} del {
		@include s-typography-inline-text-bare(del);
	}
	/**
	 * @name 		Strikethrough text ```.s```
	 * For indicating blocks of text that are no longer relevant use the ```s``` tag.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="s">striked through text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <s>striked through text</s>
	 * </div>
	 */
	.s,
	.#{s-text-format-class()} s {
		@include s-typography-inline-text-bare(s);
	}
	/**
	 * @name 		Inserted text ```.ins```
	 * For indicating additions to the document use the ```ins``` tag.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="ins">inserted text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <ins>inserted text</ins>
	 * </div>
	 */
	.ins,
	.#{s-text-format-class()} ins {
		@include s-typography-inline-text-bare(ins);
	}
	/**
	 * @name 		Underlined text ```.u```
	 * To underline text use the ```u``` tag.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="u">underlined text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <u>underlined text</u>
	 * </div>
	 */
	.u,
	.#{s-text-format-class()} u {
		@include s-typography-inline-text-bare(u);
	}
	/**
	 * @name 		Small text ```.small```
	 * For de-emphasizing inline or blocks of text, use the ```small``` tag to set text at 85% the size of the parent.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="small">small text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <small>small text</small>
	 * </div>
	 */
	.small,
	.#{s-text-format-class()} small {
		@include s-typography-inline-text-bare(small);
	}
	/**
	 * @name 		Bold ```.strong```
	 * For emphasizing a snippet of text with a heavier font-weight.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is a <span class="strong">strong text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <strong>strong text</strong>
	 * </div>
	 */
	.strong,
	.#{s-text-format-class()} strong {
		@include s-typography-inline-text-bare(strong);
	}
	/**
	 * @name 		Italics ```.em```
	 * For emphasizing a snippet of text with italics.
	 * @styleguide 		Typography / Inline texts
	 * @example 		html
	 * This is an <span class="em">italic text</span>
	 * <div class="#{s-text-format-class()}">
	 * 	This is another <em>italic text</em>
	 * </div>
	 */
	.em,
	.#{s-text-format-class()} em {
		@include s-typography-inline-text-bare(em);
	}
}
/**
 * Provide the style styling for the inline-text classes
 * - ```.mark```, ```.tf mark```
 * - ```.del```, ```.tf del```
 * - ```.s```, ```.tf s```
 * - ```.ins```, ```.tf ins```
 * - ```.u```, ```.tf u```
 * - ```.small```, ```.tf small```
 * - ```.strong```, ```.tf strong```
 * - ```.em```, ```.tf em```
 * @param 		{Color} 		[$color=primary] 		The color used to style different inline text elements
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-inline-text-classes-style(
	$color : primary
) {
	.mark,
	.#{s-text-format-class()} mark {
		@include s-typography-inline-text-style(mark, $color);
	}
	.del,
	.#{s-text-format-class()} del {
		@include s-typography-inline-text-style(del, $color);
	}
	.s,
	.#{s-text-format-class()} s {
		@include s-typography-inline-text-style(s, $color);
	}
	.ins,
	.#{s-text-format-class()} ins {
		@include s-typography-inline-text-style(ins, $color);
	}
	.u,
	.#{s-text-format-class()} u {
		@include s-typography-inline-text-style(u, $color);
	}
	.small,
	.#{s-text-format-class()} small {
		@include s-typography-inline-text-style(small, $color);
	}
	.strong,
	.#{s-text-format-class()} strong {
		@include s-typography-inline-text-style(strong, $color);
	}
	.em,
	.#{s-text-format-class()} em {
		@include s-typography-inline-text-style(em, $color);
	}
}

/**
 * Provide the styling for the lists classes
 * - ```.dl```, ```.tf dl```
 * 	- ```.dt```, ```.tf dt```
 * 	- ```.dd```, ```.tf dd```
 * - ```.ul```, ```.tf ul```
 * 	- ```.li```, ```.tf li```
 * - ```.ol```, ```.tf ol```
 * 	- ```.li```, ```.tf li```
 * @param 		{Color} 		[$color=primary] 		The color used to style bullets
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-list-classes(
	$color : primary
) {
	@include s-typography-list-classes-bare();
	@include s-typography-list-classes-style($color);
}

/**
 * Provide the bare styling for the lists classes
 * - ```.dl```, ```.tf dl```
 * 	- ```.dt```, ```.tf dt```
 * 	- ```.dd```, ```.tf dd```
 * - ```.ul```, ```.tf ul```
 * 	- ```.li```, ```.tf li```
 * - ```.ol```, ```.tf ol```
 * 	- ```.li```, ```.tf li```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-list-classes-bare() {
	/**
	 * @name 	Description list ```.dl .dt .dd```
	 * A list of terms with their associated descriptions.
	 * @styleguide 		Typography / Lists
	 * @example 	html
	 * <div class="#{s-text-format-class()}">
	 * 	<dl>
	 *  	<dt>List item 1</dt>
	 *  	<dd>Mauris sit amet erat vitae mi pellentesque placerat. Vestibulum dapibus.</dd>
	 *  	<dt>List item 1</dt>
	 *  	<dd>Mauris sit amet erat vitae mi pellentesque placerat. Vestibulum dapibus.</dd>
	 *  	<dt>List item 1</dt>
	 *  	<dd>Mauris sit amet erat vitae mi pellentesque placerat. Vestibulum dapibus.</dd>
	 * 	</dl>
	 * </div>
	 */
	.dl,
	.#{s-text-format-class()} dl {
		@include s-typography-list-bare(dl);
	}
	.dt,
	.#{s-text-format-class()} dl > dt {
		@include s-typography-list-bare(dl dt);
	}
	.dd,
	.#{s-text-format-class()} dl > dd {
		@include s-typography-list-bare(dl dd);
	}
	/**
	 * @name 	Unordered list ```.ul .li```
	 * A list of items in which the order does not explicitly matter.
	 * @styleguide 		Typography / Lists
	 * @example 	html
	 * <div class="#{s-text-format-class()}">
	 * 	<ul>
	 *  	<li>List item 1</li>
	 *  	<li>List item 2</li>
	 *  	<li>List item 3</li>
	 *  	<li>List item 4</li>
	 * 	</ul>
	 * </div>
	 */
	.ul,
	.#{s-text-format-class()} ul {
		@include s-typography-list-bare(ul);
	}
	.ul > .li,
	.ul > li,
	.#{s-text-format-class()} ul > li {
		@include s-typography-list-bare(ul li);
	}
	/**
	 * @name 	Ordered list ```.ol .li```
	 * A list of items in which the order does explicitly matter.
	 * @styleguide 		Typography / Lists
	 * @example 	html
	 * <div class="#{s-text-format-class()}">
	 * 	<ol>
	 *  	<li>List item 1</li>
	 *  	<li>List item 2</li>
	 *  	<li>List item 3</li>
	 *  	<li>List item 4</li>
	 * 	</ol>
	 * </div>
	 */
	.ol,
	.#{s-text-format-class()} ol {
		@include s-typography-list-bare(ol);
	}
	.ol > .li,
	.ol > li,
	.#{s-text-format-class()} ol > li {
		@include s-typography-list-bare(ol li);
	}

	// vertucal rhythme
	dl, ul, ol,
	.dl, .ul, .ol {
		@include s-vertical-rhythme() {
			margin-bottom:s-space(default);
			&:last-child {
				margin-bottom:0;
			}
			dl, ul, ol,
			.dl, .ul, .ol {
				margin-top:.5em;
				margin-bottom:.5em;
			}
		}
	}
}
/**
 * Provide the style styling for the lists classes
 * - ```.dl```, ```.tf dl```
 * 	- ```.dt```, ```.tf dt```
 * 	- ```.dd```, ```.tf dd```
 * - ```.ul```, ```.tf ul```
 * 	- ```.li```, ```.tf li```
 * - ```.ol```, ```.tf ol```
 * 	- ```.li```, ```.tf li```
 * @param 		{Color} 		[$color=primary] 		The color used to style bullets
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-list-classes-style(
	$color : primary
) {
	.dl,
	.#{s-text-format-class()} dl {
		@include s-typography-list-style(dl, $color);
	}
	.dt,
	.#{s-text-format-class()} dl > dt {
		@include s-typography-list-style(dl dt, $color);
	}
	.dd,
	.#{s-text-format-class()} dl > dd {
		@include s-typography-list-style(dl dd, $color);
	}
	.ul,
	.#{s-text-format-class()} ul {
		@include s-typography-list-style(ul, $color);
	}
	.ul > .li,
	.ul > li,
	.#{s-text-format-class()} ul > li {
		@include s-typography-list-style(ul li, $color);
	}
	.ol,
	.#{s-text-format-class()} ol {
		@include s-typography-list-style(ol, $color);
	}
	.ol > .li,
	.ol > li,
	.#{s-text-format-class()} ol > li {
		@include s-typography-list-style(ol li, $color);
	}
}

/**
 * Provide the styling for the captions classes
 * - ```.caption```, ```.figcaption```, ```.tf caption```, ```.tf figcaption```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-caption-classes() {
	@include s-typography-caption-classes-bare();
	@include s-typography-caption-classes-style();
}

/**
 * Provide the bare styling for the captions classes
 * - ```.caption```, ```.figcaption```, ```.tf caption```, ```.tf figcaption```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-caption-classes-bare() {
	/**
	 * @name 		Default caption ```.caption```
	 * Display a caption styled text
	 * @styleguide 	Typography / Caption
	 * @example 	html
	 * <div class="#{s-text-format-class()}">
	 * 	<div class="caption">
	 * 		Nunc venenatis, odio at porta egestas, tortor eros mollis sapien.
	 * 	</div>
	 * </div>
	 */
	.caption,
	.#{s-text-format-class()} caption,
	.#{s-text-format-class()} figcaption {
		@include s-typography-caption-bare();
	}
}
/**
 * Provide the style styling for the captions classes
 * - ```.caption```, ```.figcaption```, ```.tf caption```, ```.tf figcaption```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-caption-classes-style() {
	.caption,
	.figcaption
	.#{s-text-format-class()} caption,
	.#{s-text-format-class()} figcaption {
		@include s-typography-caption-style();
	}
}

/**
 * Provide the styling for the quotes classes
 * - ```.quote```, ```.tf quote```
 * - ```.blockquote```, ```.tf blockquote```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-quote-classes() {
	@include s-typography-quote-classes-bare();
	@include s-typography-quote-classes-style();
}

/**
 * Provide the bare styling for the quotes classes
 * - ```.quote```, ```.tf quote```
 * - ```.blockquote```, ```.tf blockquote```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-quote-classes-bare() {
	/**
	 * @name 		Default quote ```.blockquote```
	 * Display a quote styled text
	 * @styleguide 	Typography / Quote
	 * @example 	html
	 * <div class="#{s-text-format-class()}">
	 * 	<quote>
	 * 		Nunc venenatis, odio at porta egestas, tortor eros mollis sapien.
	 * 	</quote>
	 * 	<div class="caption pull-right">
	 *  	John Doe
	 * 	</div>
	 * </div>
	 */
	.quote,
	.blockquote,
	.#{s-text-format-class()} quote,
	.#{s-text-format-class()} blockquote {
		@include s-typography-quote-bare();
	}
	// vertucal rhythme
	.quote,
	.blockquote,
	quote,
	blockquote {
		@include s-vertical-rhythme() {
			margin-bottom:s-space(default);
			&:last-child {
				margin-bottom:0;
			}
		}
	}
}
/**
 * Provide the style styling for the quotes classes
 * - ```.quote```, ```.tf quote```
 * - ```.blockquote```, ```.tf blockquote```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-typography-quote-classes-style() {
	.quote,
	.blockquote,
	.#{s-text-format-class()} blockquote,
	.#{s-text-format-class()} quote {
		@include s-typography-quote-style();
	}
}