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

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

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

.sft-label-value-list {
	margin: 0;
	padding: 0;
}
	
	.sft-label-value-list-name { 
		font-size: var(--sft-h3-downshift-size);
		font-family: 'Roboto', 'Arial', sans-serif;
		font-weight: 400;
		color: var(--sft-transparent-black-0060);

		
	}

	.sft-label-value-list-list { 
		color: var(--sft-transparent-black-0093);
		list-style: none;

		padding: 0;
		margin: 0;

		font-weight: 500;
	}

		.sft-label-value-list-list li {
			margin-top: .8em;
		}

/* 
## Layout modifiers */
	
	/* inline */
	.sft-label-value-list.sft-label-value-list--inline .sft-label-value-list-name {
		display: inline;
	}
		.sft-label-value-list.sft-label-value-list--inline .sft-label-value-list-list {
			display: inline;
		
		}

			.sft-label-value-list.sft-label-value-list--inline .sft-label-value-list-list li {
				display: inline;
				margin-left: .8em;
			}

	/* inline value list */
	.sft-label-value-list.sft-label-value-list--inline-value-list .sft-label-value-list-name { 
		display: block;
	}

		.sft-label-value-list.sft-label-value-list--inline-value-list .sft-label-value-list-list {
			display: block;
			margin-top: .8em;
		}

			.sft-label-value-list.sft-label-value-list--inline-value-list .sft-label-value-list-list li { 
				display: inline;
				margin-left: .8em;
			}

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


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

			.sft-label-value-list--small .sft-label-value-list-name { 

				font-size: var(--sft-h4-downshift-size);

				font-family: 'Roboto', 'Arial', sans-serif;
				font-weight: 400;
				color: var(--sft-transparent-black-0060);
				
			}

			.sft-label-value-list--small .sft-label-value-list-list { 

				font-size: var(--sft-small-copy);

				font-weight: 500;
				color: var(--sft-transparent-black-0093);
				list-style: none;
			}

			/* 
			#### Layout modifiers */

				/* Note: These following two inline and inline value list modifiers I think can remove, since the properties get inherited from above. */
				/* inline */
				/*
				.sft-label-value-list--small.sft-label-value-list--inline .sft-label-value-list-name {
					display: inline;
					
				}
					.sft-label-value-list--small.sft-label-value-list--inline .sft-label-value-list-list {
						display: inline;
					}

						.sft-label-value-list--small.sft-label-value-list--inline .sft-label-value-list-list li {
							display: inline;
							
						}

				*/
				
				/* inline value list */
				/*
				.sft-label-value-list--small.sft-label-value-list--inline-value-list .sft-label-value-list-name { 
					display: block;
				}

					.sft-label-value-list--small.sft-label-value-list--inline-value-list .sft-label-value-list-list {
						display: block;
						margin-top: .8em;
					}
						.sft-label-value-list--small.sft-label-value-list--inline-value-list .sft-label-value-list-list li { 
							display: inline;
							
						}
						.sft-label-value-list--small.sft-label-value-list--inline-value-list .sft-label-value-list-list li:first-of-type { 
							
						}
				*/

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

		.sft-label-value-list--tiny .sft-label-value-list-name { 

			font-size: var(--sft-h5-downshift-size);

			font-family: 'Roboto', 'Arial', sans-serif;
			font-weight: 400;

			color: var(--sft-transparent-black-0060);
			
		}

		.sft-label-value-list--tiny .sft-label-value-list-list { 

			
			font-size: var(--sft-tiny-copy);

			font-weight: 500;
			color: var(--sft-transparent-black-0093);
			list-style: none;
		}



	/*
	.sft-micro-copy {
		font-size: var(--sft-micro-copy);
		color: var(--sft-transparent-black-0050);
	}
	
	.sft-tiny-copy {
		font-size: var(--sft-tiny-copy);
	
	}
	
	.sft-small-copy {
		font-size: var(--sft-small-copy);
	}
	
	.sft-regular-copy {
		font-size: var(--sft-regular-copy);
	}
	*/