@import "./app.scss";

.accent-100 { background-color: $accent-100; }
.success-100 { background-color: $success-100; }
.gray-100 { background-color: $gray-100; }
.alert-100 { background-color: $alert-100; }
.primary-100 { background-color: $primary-100; }
.accent-200 { background-color: $accent-200; }
.success-200 { background-color: $success-200; }
.gray-200 { background-color: $gray-200; }
.alert-200 { background-color: $alert-200; }
.primary-200 { background-color: $primary-200; }
.accent-300 { background-color: $accent-300; }
.success-300 { background-color: $success-300; }
.gray-300 { background-color: $gray-300; }
.alert-300 { background-color: $alert-300; }
.primary-300 { background-color: $primary-300; }
.accent-400 { background-color: $accent-400; }
.success-400 { background-color: $success-400; }
.gray-400 { background-color: $gray-400; }
.alert-400 { background-color: $alert-400; }
.primary-400 { background-color: $primary-400; }
.accent-500 { background-color: $accent-500; }
.success-500 { background-color: $success-500; }
.gray-500 { background-color: $gray-500; }
.alert-500 { background-color: $alert-500; }
.primary-500 { background-color: $primary-500; }
.accent-600 { background-color: $accent-600; }
.success-600 { background-color: $success-600; }
.gray-600 { background-color: $gray-600; }
.alert-600 { background-color: $alert-600; }
.primary-600 { background-color: $primary-600; }
.accent-700 { background-color: $accent-700; }
.success-700 { background-color: $success-700; }
.gray-700 { background-color: $gray-700; }
.alert-700 { background-color: $alert-700; }
.primary-700 { background-color: $primary-700; }
.accent-800 { background-color: $accent-800; }
.success-800 { background-color: $success-800; }
.gray-800 { background-color: $gray-800; }
.alert-800 { background-color: $alert-800; }
.primary-800 { background-color: $primary-800; }
.accent-900 { background-color: $accent-900; }
.success-900 { background-color: $success-900; }
.gray-900 { background-color: $gray-900; }
.alert-900 { background-color: $alert-900; }
.primary-900 { background-color: $primary-900; }

div.samplerow {
	display: flex;
	align-items: center;
	background: white;
	color: black;
}

div.samplerow.dark {
	background: black;
	color: white;
}

div.samplehead {
	flex: 1 0 auto;
	padding: 8px;
}

div.samplebox {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	// border: 1px solid $gray-900;
	border-radius: 3px;
	margin: 8px;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5);
}

div.samplerow.dark div.samplebox {
	//border: 1px solid $gray-100;
}

body {
	max-width: 60em;
	margin-left: auto;
	margin-right: auto;
}

div.demo-columns {
	display: flex;
}

div.demo-column {
	flex: 1 1 1px;
	margin: 0 $w-l1;
}

div.demo-column:first-child {
	margin-left: 0;
}

div.demo-column:last-child {
	margin-right: 0;
}

body {
	background:
		url('../img/line.png'),
		$gray-900;
	background-size: 1.5em 1.5em;
	background-position: 0em -0.3em;
}

body:target {
	background: $gray-900;
}

body #enable-lines {
	display: none;
}

body:target #disable-lines {
	display: none;
}

body:target #enable-lines {
	display: inline;
}

@media screen and (max-width: 40rem) {
	div.demo-columns, div.demo-column {
		display: block;
		margin: 0;
	}
}


/* dark mode */

@media (prefers-color-scheme: dark) {
	body {
		background:
			url('../img/line.png'),
			$gray-100;
	}

	body:target {
		background: $gray-100;
	}
}