@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

@mixin jetpack-primary-button() {
	background-color: var(--studio-black);
	border-color: var(--studio-black);
	color: var(--studio-white);

	&:hover,
	&:focus {
		background-color: var(--studio-jetpack-green-60);
		border-color: var(--studio-jetpack-green-60);
		color: var(--color-text-inverted);
	}

	&[disabled],
	&:disabled,
	&.disabled {
		color: var(--color-neutral-20);
		background-color: var(--color-surface);
		border-color: var(--color-neutral-5);
	}
}

.licensing-activation .button.is-primary,
.licensing-activation .button.is-primary:visited {
	font-size: $font-body;
	font-weight: 400;

	border-radius: 2px;
	margin-top: 58px;

	min-width: 140px;

	@include jetpack-primary-button;

	&.is-busy {
		background-image: linear-gradient(-45deg, var(--studio-jetpack-green-40) 28%, var(--studio-jetpack-green-50) 28%, var(--studio-jetpack-green-50) 72%, var(--studio-jetpack-green-40) 72%);
	}
	&[disabled] {
		color: var(--color-text-inverted);
		background-color: var(--color-neutral-10);
		border-color: var(--color-neutral-10);
	}
}

.licensing-activation p {
	font-size: $font-body;
}

.licensing-activation__card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-radius: 4px;
	box-shadow: 0 0 40px 0 #00000014;
	width: 100%;
	max-width: none;
	margin-top: var(--masterbar-checkout-height);

	@include break-large {
		flex-direction: row;
		width: auto;
		max-width: 1200px;
		margin-top: calc(var(--masterbar-checkout-height) + 24px);
	}
}

.licensing-activation__card a:not(.button) {
	text-decoration: underline;
	color: var(--color-studio-black);
	&:hover {
		text-decoration: none;
	}
}

.licensing-activation__card-main {
	@include break-large {
		flex: 1 1 648px;
	}
}

.licensing-activation__card-main,
.licensing-activation__card-footer {
	box-sizing: border-box;
	padding: 26px;
	@include break-mobile {
		padding: 76px;
	}
}

.licensing-activation__card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 45px;
}

.licensing-activation__progress-bar.progress-bar {
	width: 60px;

	.progress-bar__progress {
		background-color: var(--studio-jetpack-green-40);
	}
}

.licensing-activation__title {
	font-style: normal;
	font-weight: bold;
	font-size: 44px;
	line-height: 52px;

	margin-bottom: 24px;
}

.licensing-activation__title.is-loading {
	@include placeholder( --color-neutral-20 );
}

.licensing-activation__card-footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	// background image is applied inline in the html
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	@include break-large {
		flex: 1 1 552px;
	}
}

.licensing-activation__card-footer-text {
	color: var(--color-neutral-60);
	font-size: rem(14px);
	line-height: rem(21px);

	> a {
		color: var(--color-neutral-60);
	}
}

:is(.licensing-activation__card-footer) .licensing-activation__card-footer-text {
	position: absolute;
	font-size: inherit;
	line-height: inherit;
	width: 100%;
	text-align: center;
	left: 0;
	bottom: 7%;
}
