@use "../_utilities/mixins/breakpoint";
@use "typography/functions" as typography-functions;

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

.button,
.download-jetpack {
	transition: all 0.1s ease-in-out;
}

.jp-button,
%jp-button {
	display: inline-block;
	position: relative;
	padding: typography-functions.em(10px, 13px) typography-functions.em(19px, 13px);
	color: #efefef;
	font-weight: 700;
	font-size: 0.9285714286em; // 13/14
	line-height: 1;
	text-shadow: 0 1px 1px rgba(0, 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: typography-functions.em(18px, 28px) typography-functions.em(50px, 46px) typography-functions.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, 0.4);

	&:visited {
		color: #fff;
	}

	&:hover,
	&:focus {
		color: #fff;
		background: #57972d;
		box-shadow:
			0 6px 0 #3e6c20,
			0 6px 3px rgba(0, 0, 0, 0.4);
	}

	&:active {
		top: 6px;
		box-shadow:
			0 0 0 #3e6c20,
			0 0 0 rgba(0, 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.breakpoint(large-desktop) {
		font-size: typography-functions.em(18px);

		&::before {
			top: -1px;
			width: 23px;
			height: 23px;
		}
	}

	@include breakpoint.breakpoint(desktop) {

		&:active {
			top: 0;
		}
	}

	@include breakpoint.breakpoint(large-phone) {
		font-size: typography-functions.em(17px);
		font-weight: 600;

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