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

.jetpack-search .formatted-header.is-left-align {
	margin-top: 20px;

	@include breakpoint-deprecated( ">660px" ) {
		margin-top: 4px;
		margin-bottom: 18px;
	}
}

.is-placeholder {
	.jetpack-search__header,
	.jetpack-search__content p,
	.jetpack-search__button,
	.upsell__header-text,
	.upsell__body-text {
		@include placeholder( --color-neutral-10 );
	}

	.jetpack-search__button {
		border: 0;

		&:hover {
			@include placeholder( --color-neutral-10 );
		}
	}
}

.theme-jetpack-cloud {
	.jetpack-search__disconnected {
		padding-top: 40px;
	}
}

.jetpack-search__logo {
	text-align: center;

	@include breakpoint-deprecated( ">660px" ) {
		text-align: left;
	}

	img {
		display: block;
		height: 48px;
		width: auto;
	}
}

.jetpack-search__header {
	font-size: $font-title-small;
	margin: 16px 0;

	@include breakpoint-deprecated( ">660px" ) {
		font-size: $font-title-medium;
		margin: 20px 0 24px;
	}
}

.jetpack-search__content {
	flex: 1 0 auto;

	p {
		font-size: $font-body;
		margin-bottom: 16px;
		line-height: 24px;

		@include breakpoint-deprecated( ">660px" ) {
			margin-bottom: 24px;
		}
	}
}

.jetpack-search__button {
	margin-top: 16px;
	width: 100%;
	text-align: center;

	@include breakpoint-deprecated( ">660px" ) {
		width: auto;
		text-align: left;
	}
}

.jetpack-search__wpcom-upsell {
	.action-panel__figure img {
		height: 120px;
	}

	.jetpack-search__wpcom-ctas {
		margin: 16px 0;
	}

	.jetpack-search__wpcom-cta {
		margin-top: 8px;
	}

	.jetpack-search__wpcom-realtime-cta {
		margin-right: 16px;
	}

	.jetpack-search__subheader {
		margin: 20px 16px 8px;

		@extend .wp-brand-font;
		font-size: $font-title-small;

		@include breakpoint-deprecated( ">660px" ) {
			margin: 36px 0 4px;
		}
	}

	.promo-section__promos {
		.promo-card {
			@include breakpoint-deprecated( ">1280px" ) {
				flex: 1 1 calc(50% - 1em);
			}
		}
	}
}
