//  =================
//      Imports
//  =================

@import '../../../base/color_variables';    // Color Variables
@import '../../../base/fonticons';        // Fonticons Variables
@import '../../../base/urls';           // URLS Variables
@import '../../../base/utilities_variables';  // Utilities Variables

.spinner {
	display: inline-block;
	opacity: 0;
	width: 0;
	-webkit-transition: opacity 0.25s, width 0.25s;
	-moz-transition: opacity 0.25s, width 0.25s;
	-o-transition: opacity 0.25s, width 0.25s;
	transition: opacity 0.25s, width 0.25s;
}
.has-spinner.active {
	cursor: progress;
	.spinner {
		opacity: 1;
		width: auto;
	}
}
.has-spinner.btn.active {
	.spinner {
		min-width: 20px;
	}
}
.examples {
	.intro {
		margin-bottom: 3em;
		line-height: 1.4em;
		font-size: 16px;
		text-align: $align-left;
		h1 {
			margin-top: $m-0;
			font-size: 18px;
		}
	}
	.outro {
		display: block;
		text-align: $align-right;
		margin-top: 3em;
	}
	section {
		h3 {
			color: $color_287;
			font-weight: normal;
		}
	}
}
.sharing {
	float: $align-left;
}
.button-demo {
	background-color: $white;
}
.progress-demo {
	background-color: $white;
}
.button-checkbox {
	background-color: $white;
	.btn.active {
		border-top: 0px solid rgba(0, 0, 0, 0.3);
		border-color: $color_103;
		-webkit-box-shadow: $shadow-20;
		-moz-box-shadow: $shadow-20;
		box-shadow: $shadow-20;
	}
}
.btn-default.active {
	&:hover {
		border-top: 0px solid rgba(0, 0, 0, 0.3);
		border-color: $color_103;
		-webkit-box-shadow: $shadow-20;
		-moz-box-shadow: $shadow-20;
		box-shadow: $shadow-20;
	}
}
.ladda-button {
	font-size: 14px !important;
}
@media (max-width: 767px) {
	.examples {
		section {
			width: 12%;
			min-width: 130px;
		}
	}
}