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

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

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

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

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

			padding: 0;
			margin: 0;
		}

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

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

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

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

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

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

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


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

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

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

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

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

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

					color: var(--sft-transparent-black-0060);
					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-name-value-list--small.sft-name-value-list--inline .sft-name-value-list-name {
						display: inline;
						
					}
						.sft-name-value-list--small.sft-name-value-list--inline .sft-name-value-list-list {
							display: inline;
						}

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

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

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

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

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

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

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

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

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

				color: var(--sft-transparent-black-0060);
				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);
		}
		*/