@use "main/variables";

.jb-setup-banner {
	border: 1px solid variables.$gray_5;
	box-shadow: 0 2px 6px rgb(0 0 0 / 3%), 0 1px 2px rgb(0 0 0 / 3%);
	display: block;
	margin: 3rem 1.25rem 1.25rem 0;
	position: relative;
	overflow: hidden;

	&__content-top-text {
		align-items: baseline;
		background-color: variables.$jetpack_green_40;
		color: #fff;
		display: flex;
		padding: 1rem 2.25rem 1.5rem 1rem;
		width: 100%;

		svg {
			height: 24px;
			margin-right: 0.625rem;
			position: relative;
			top: 7px;
			width: 24px;
			color: #fff;
			fill: #fff;
		}
	}

	&__inner {
		display: flex;
		grid-template-columns: minmax(auto, 750px) 500px;
		justify-content: space-between;
		min-height: 300px;
		background: #fff;
		overflow: hidden;
	}

	&__logo {
		width: 180px;
		margin: 0 0 1.25rem;
	}

	&__content {
		display: inline-flex;
		flex-direction: column;
		padding: 2rem 3rem 2rem 2rem;
		text-align: left;
		align-items: flex-start;
		max-width: 750px;
	}

	&__title {
		font-size: 1.8rem;
		margin: 0 0 2rem;
		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
		line-height: 2.1rem;
	}

	&__image-container {
		position: relative;
		background-image: url(\$images/jetpack-colors.svg);
		background-size: cover;
		max-width: 40%;
		overflow: hidden;
	}

	&__image-container img {
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

	&__text {
		font-size: 1rem;
		line-height: 1.5;
		margin: 1rem 0 2rem;
	}

	&__cta-button {
		background: #000;
		border: 1px solid #000;
		border-radius: 4px;
		box-sizing: border-box;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 0.875rem;
		font-weight: 600;
		margin: 0;
		outline: 0;
		overflow: hidden;
		padding: 0.625rem 1.5rem;
		text-decoration: none;
		text-overflow: ellipsis;
		transition: all 0.15s ease-in-out;
		vertical-align: top;

		&:hover {
			color: #fff;
			background-color: variables.$gray_80;
		}

		&:focus {
			color: #fff;
			box-shadow: none;
			outline: solid 1px variables.$primary-black;
			outline-offset: 1px;
		}
	}

	.notice-dismiss {
		position: absolute;
		top: 0;
		right: 1px;
		border: none;
		margin: 0;
		padding: 9px;
		background: 0 0;
		cursor: pointer;

		&::before {
			color: #fff;
		}
	}

	@media (max-width: 1152px) {
		margin: 4rem 1.25rem 1.25rem 0;

		&__image-container {
			display: none;
		}
	}
}
