.about {
	padding: 25px;
	background: hsl(0, 0%, 22%);
	color: hsl(0, 0%, 92%);
	border-radius: 0 0 3px 3px;

	a {
		color: hsl(210, 100%, 60%);

		&:hover,
		&:focus {
			color: hsl(240, 90%, 80%);
		}
	}
	h1 {
		text-align: center;
	}
}

.example {
	@extend %clearfix;
	clear: both;
	margin: 30px 0;
	padding: 10px 5px;
	@media screen and (min-width: 50rem) {
		padding: 25px;
		// box-shadow: 1px 1px 7px rgba(0, 0, 0, .3);
	}
	background: white;
	border-radius: 3px;
}
.example-figure {
	width: -moz-min-content;
	width: min-content;
	margin: auto;
	@media screen and (min-width: 50rem) {
		float: left;
		padding-top: 2.4rem;
		padding-right: 80px;
	}
}

[class^="progress"],
[class*=" progress"] {
	> svg {
		width: 300px;
		height: 300px;
	}
}

.controls {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;

	input {
		display: block;
		width: 4em;
		padding: .3em .6em;
		text-align: left;
		background: hsl(0, 0%, 85%);
		border: 0;
		font-size: .85em;
		&:focus {
			background: hsl(0, 0%, 70%);
			outline: none;
			// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
		}
	}
	label {
		font-weight: bold;
		color: hsl(0, 0%, 40%);
	}
	label:nth-child(2) {
		text-align: center;
	}
	label:last-child {
		text-align: right;
	}
}

.example h3 {
	font-size: 1.1rem;
	line-height: 1.4rem;
	margin: 1rem 0 0;
	color: hsl(14, 80%, 50%);
}
.slash {
	color: gray;
}
.select-variant {
	text-decoration: none;
	color: inherit;
}
.select-variant[data-variant=jquery] {
	color: gray;
}
.variant-jquery {
	display: none;
}
body.show-variant-jquery {
	.select-variant[data-variant=vanilla] {
		color: gray;
	}
	.select-variant[data-variant=jquery] {
		color: inherit;
	}
	.variant-jquery {
		display: block;
	}
	.variant-vanilla {
		display: none;
	}
}

.code {
	background: hsl(0, 0%, 22%);
	-moz-tab-size: 4;
	tab-size: 4;
}




.progress-1 {
	.circle-progress-value {
		stroke-width: 6px;
		stroke: hsl(39, 100%, 50%);
	}
	.circle-progress-circle {
		stroke-width: 6px;
		stroke: hsl(39, 100%, 85%);
	}
	.circle-progress-text {
		fill: hsl(39, 100%, 50%);
	}
}

.progress-2 {
	.circle-progress-value {
		stroke-width: 6px;
		stroke: hsl(320, 80%, 60%);
		stroke-dasharray: 4 1;
	}
	.circle-progress-circle {
		stroke-width: 6px;
		stroke: #eee;
	}
	.circle-progress-text {
		font-weight: bold;
		fill: hsl(180, 80%, 47%);
	}
}

.progress-3 {
	.circle-progress-value {
		stroke-width: 6px;
		stroke: hsl(280, 90%, 50%);
		stroke-linecap: round;
	}
	.circle-progress-circle {
		stroke-width: 2px;
	}
}

.progress-4 {
	.circle-progress-value {
		stroke-width: 50px;
		stroke: hsl(160, 63%, 55%);
	}
	.circle-progress-circle {
		stroke-width: 50px;
		stroke: #999;
	}
	.circle-progress-text {
		fill: white;
	}
}

.progress-5 {
	.circle-progress-value {
		stroke-width: 6px;
		stroke: white;
		stroke-linecap: round;
	}
	.circle-progress-circle {
		stroke-width: 8px;
		stroke: #888;
	}
	.circle-progress-text {
		fill: #888;
	}
}

.progress-6 {
	.circle-progress-value {
		stroke-width: 50px;
		stroke: hsl(100, 90%, 70%);
	}
	.circle-progress-circle {
		stroke-width: 40px;
		stroke: hsl(100, 15%, 60%);
		fill: hsl(100, 15%, 60%);
	}
	.circle-progress-text {
		fill: white;
		font-weight: bold;
	}
}

.progress-7 {
	.circle-progress-value {
		stroke-width: 11px;
		stroke: aqua;
		stroke-dasharray: 0 23.3;
		stroke-linecap: round;
	}
	&[aria-valuenow="0"] .circle-progress-value {
		display: none;
	}
	.circle-progress-circle {
		stroke: transparent;
	}
	.circle-progress-text {
		font-family: "Varela Round", "Gotham rounded", sans-serif;
		font-size: 13px;
		font-weight: bold;
		fill: fuchsia;
	}
}

.progress-9 {
	.circle-progress-value {
		stroke-width: 12px;
		stroke: hsl(210, 100%, 45%);
	}
	.circle-progress-circle {
		stroke: white;
		stroke-width: 22px;
		fill: #666;
	}
	.circle-progress-text {
		font-family: "Georgia", serif;
		font-size: 13px;
		fill: white;
	}
}

.progress-10 {
	.circle-progress-value {
		stroke-width: 2px;
		stroke: aquamarine;
	}
	.circle-progress-circle {
		stroke: #ddd;
		stroke-width: 2px;
	}
	.circle-progress-text {
		font-family: "Georgia", serif;
		font-size: 13px;
	}
}

.progress-11 {
	.circle-progress-value {
		stroke-width: 6px;
		stroke: hsl(100, 100%, 60%);
		stroke-dasharray: 0.6 3;
	}
	.circle-progress-circle {
		stroke-width: 6px;
		stroke: #ddd;
		stroke-dasharray: 0.6 3;
		stroke-dashoffset: 1.6;
	}
	.circle-progress-text {
		font-family: "Dosis", "Varela Round", "Gotham Rounded Light", sans-serif;
		fill: hsl(100, 81%, 55%);
		font-size: 26px;
	}
}

.progress-12 {
	.circle-progress-value {
		stroke-width: 12px;
		stroke: darkmagenta;
	}
	.circle-progress-circle {
		stroke: white;
		stroke-width: 11px;
		fill: #666;
	}
	.circle-progress-text {
		font-family: "Georgia", serif;
		font-size: 13px;
		fill: white;
	}
}

.progress-13 {
	.circle-progress-value {
		stroke-width: 25px;
		stroke: hsl(210, 100%, 45%);
		stroke-dasharray: 58 1;
	}
	.circle-progress-circle {
		stroke: hsl(210, 100%, 85%);
		stroke-width: 25px;
		fill: hsl(210, 100%, 85%);
	}
	.circle-progress-text {
		font-family: "Montserrat", "Gotham", sans-serif;
		font-size: 16px;
		fill: hsl(210, 100%, 45%);
	}
}