/*
	2020-06-28_19-10 - Notes: 
		
		- Things to consider doing:
			- Either removing the font-family styles all together from this file, or setting the 
				font-family to a css varialbe, which can get configured. 
*/

/* ************************************ */

/* 
	Example of intended markup structure:
	
		<div class="csn-heading-value-list">

			<div class="csn-heading-value-list-heading">
				About Us
			</div>
			<ul class="csn-heading-value-list-list">
				<li>
					Our Mission
				</li>
				<li>
					The Team
				</li>
				<li>
					Beliefs
				</li>
				<li>
					Locations
				</li>
			</ul>
		</div>
*/

	.csn-heading-value-list {
		margin: 0;
		padding: 0;
	}
		
		.csn-heading-value-list-heading { 
			font-size: 16px;
			/* font-family: 'Roboto', 'Arial', sans-serif; */

			font-weight: 500;
			color: var(--csn-transparent-black-0093);
		}

		.csn-heading-value-list-list { 
			color: var(--csn-transparent-black-0070);
			list-style: none;

			padding: 0;
			margin: 0;
		}

			.csn-heading-value-list-list li {
				margin-top: .8em;
			}

	/* 
	## Layout modifiers */
		
		/* inline */
		.csn-heading-value-list.csn-heading-value-list--inline .csn-heading-value-list-heading {
			display: inline;
		}
			.csn-heading-value-list.csn-heading-value-list--inline .csn-heading-value-list-list {
				display: inline;
			
			}

				.csn-heading-value-list.csn-heading-value-list--inline .csn-heading-value-list-list li {
					display: inline;
					margin-left: .8em;
				}

		/* inline value list */
		.csn-heading-value-list.csn-heading-value-list--inline-value-list .csn-heading-value-list-heading { 
			display: block;
		}

			.csn-heading-value-list.csn-heading-value-list--inline-value-list .csn-heading-value-list-list {
				display: block;
				margin-top: .8em;
			}

				.csn-heading-value-list.csn-heading-value-list--inline-value-list .csn-heading-value-list-list li { 
					display: inline;
					margin-left: .8em;
				}

				.csn-heading-value-list.csn-heading-value-list--inline-value-list .csn-heading-value-list-list li:first-of-type { 
					margin-left: 0;
				}


	/* 
	## Size modifiers */
		
		/* 
		### Small */
			.csn-heading-value-list.csn-heading-value-list--small {
				margin: 0;
				padding: 0;
			}

				.csn-heading-value-list--small .csn-heading-value-list-heading { 

					font-size: 14px;

					/* font-family: 'Roboto', 'Arial', sans-serif; */

					font-weight: 500;
					color: var(--csn-transparent-black-0093);
				}

				.csn-heading-value-list--small .csn-heading-value-list-list { 

					font-size: 14px;

					color: var(--csn-transparent-black-0070);
					list-style: none;
				}


		/* 
		### Tiny */
		.csn-heading-value-list.csn-heading-value-list--tiny {
			margin: 0;
			padding: 0;
		}

			.csn-heading-value-list--tiny .csn-heading-value-list-heading { 

				font-size: 12px;

				/* font-family: 'Roboto', 'Arial', sans-serif; */

				font-weight: 500;
				color: var(--csn-transparent-black-0093);
			}

			.csn-heading-value-list--tiny .csn-heading-value-list-list { 

				
				font-size: 12px;

				color: var(--csn-transparent-black-0070);
				list-style: none;
			}
		

/* 
*/