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

.button,
.download-jetpack {
	transition: all .1s ease-in-out;
}
.jp-button {
	display: inline-block;
	position: relative;
	padding: em(10px, 13px) em(19px, 13px);
	color: #efefef;
	font-weight: bold;
	font-size: 0.9285714286em; // 13/14
	line-height: 1;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	background: #6f7476;
	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;
		box-shadow:
			inset 0 2px 0 #365A1F,
			inset 0 1px 3px #3c6621;
	}
}
.download-jetpack {
	display: inline-block;
	position: relative;
	padding: em(18px, 28px) em(50px, 46px) em(15px, 28px);
	color: #fff;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	background: #518d2a;
	z-index: 3;
	border-radius: 6px;
	box-shadow:
		0 6px 0 #3e6c20,
		0 6px 3px rgba(0,0,0,.4);

	&:visited {
		color: #fff;
	}
	&:hover,
	&:focus {
		color: #fff;
		background: #57972d;
		box-shadow:
			0 6px 0 #3e6c20,
			0 6px 3px rgba(0,0,0,.4);
	}
	&:active {
		top: 6px;
		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('../images/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%;
	}
	@include breakpoint(large-desktop){
		font-size: em(18px);

		&:before {
			top: -1px;
			width: 23px;
			height: 23px;
		}
	};
	@include breakpoint(desktop){
		&:active {
			top: 0;
		}
	};
	@include breakpoint(large-phone){
		font-size: em(17px);
		font-weight: 600;

		&:before {
			width: 19px;
			height: 19px;
			margin-right: 9px;
		}
	};
}