// DO NOT WRITE THEME STYLINGS HERE
// --------------------------------

// Everything must be wrapped around this class.
// If you use it somewhere else in the site, make sure to 
// mention it here.
.dxnotes-styleguide {
	hr {
		margin: 40px 0;
	}

	// Wrapper around the color boxes.
	.theme-colors {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
	}

	.section-title {
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 40px;
		padding-bottom: 20px;
		margin-top: 100px;
	}

	.page-header {
		margin-top: 50px;
		font-size: 48px;
		color: black;
	}

	.colorbox {
		display: inline-block;
		margin: 10px;
		max-width: calc(10% - 20px);
		width: 100%;

		@media (max-width: 640px) { 
			max-width: calc(50% - 20px); 
		}
		
		// By default make them faded out.
		& > * { opacity: 0.2; }

		.color {
			padding-bottom: 100%;
		}

		.name {
			font-size: 13px;
		}
	}

	.label {
		text-transform: uppercase;
		margin: 20px 0;
		display: block;
	}
}


// Color settings
// Update with your variables if needed or add new ones.
.dxnotes-styleguide {
	$colors: (
		color-primary: $color-primary,
		color-primary-dark: $color-primary-dark,
		color-secondary: $color-secondary,
		color-accent: $color-accent,
	);

	// Create the list of variables depending on the settings above.
	@each $color-name, $color-variable in $colors {
		.#{$color-name} > * { opacity: 1; }

		.#{$color-name} .color {
			background-color: $color-variable;
		}
	}
}