// ==========================================================================
// Buttony button buttons
// ==========================================================================

.button,
.download-jetpack {
	@include transition(all .1s ease-in-out);
}
.jp-button {
	display: inline-block;
	position: relative;
	padding: em(10, 13) em(19, 13);
	color: #efefef;
	font: 800 0.9285714286em/1 'Open Sans', Helvetica, sans-serif; // 13/14
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	background: #6f7476;
	@include border-radius(3px);

	&:visited {
		color: #efefef;
	}
	&:hover,
	&:focus {
		color: #fff;
		background: #57972d;
	}
	&:active {
		background: #57972d;
		opacity: 0.8;
	}
}
.jp-button--settings {
	@extend .jp-button;
	background: #93b45f;
	color: #e8eedf;

	&:visited {
		color: #e8eedf
	}
	&:hover,
	&:focus {
		background: #9fbd72;
		color: #fff;
	}
	&.current {
		background: #3c6621;
		color: #fff;
	}
}
.download-jetpack {
	display: inline-block;
	position: relative;
	padding: em(18, 28) em(24, 28) em(15, 28);
	color: #fff;
	font: 400 2em/1 "proxima-nova", 'Open Sans', Helvetica, sans-serif; // 28/14
	background: #518d2a;
	z-index: 3;
	@include border-radius(6px);
	@include box-shadow(
		0 6px 0 #3e6c20,
		0 6px 3px rgba(0,0,0,.4)
	);

	&:visited {
		color: #fff;
	}
	&:hover,
	&:focus {
		color: #fff;
		background: #57972d;
		@include box-shadow(
			0 6px 0 #3e6c20,
			0 6px 3px rgba(0,0,0,.4)
		);
	}
	&:active {
		top: 6px;
		@include box-shadow(
			0 0px 0 #3e6c20,
			0 0 0 rgba(0,0,0,.4)
		);

		&:after {
			// fixes buggy clicks
			top: -6px;
		}
	}
	&:before {
		content: '';
		display: inline-block;
		position: relative;
		top: -2px;
		margin-right: 13px;
		width: 30px;
		height: 30px;
		vertical-align: middle;
		background: url('img/connect-plug.svg') center center no-repeat;
		background-size: 100%;
	}
	&:after {
		// fixes buggy clicks
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
#searchsubmit {
	display: inline-block;
	border: none;
	position: relative;
	padding: em(5, 7) em(9, 6);
	color: #efefef;
	font: 800 0.8em/1 'Open Sans', Helvetica, sans-serif; // 13/14
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	background: #6f7476;
	outline: none;
	@include border-radius(3px);

	&:visited {
		color: #efefef;
	}
	&:hover,
	&:focus {
		color: #fff;
		background: #2aa0d5;
	}
	&:active {
		opacity: 0.7;
	}
}