@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/variables";

.signup-success {
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 0 40px;
	gap: 41px;

	@include breakpoint-deprecated( ">660px" ) {
		width: 535px;
	}

	@include breakpoint-deprecated( "<660px" ) {
		width: 90%;
	}

	h1 {
		font-size: $font-headline-small;
	}

	h2 {
		font-size: $font-title-small;
	}

	.signup-success__header {
		margin-top: var(--masterbar-height);
		text-align: center;
		min-height: 270px;

		img {
			max-width: 130px;
			margin-bottom: 20px;
		}
	}

	.signup-success__body {
		margin-bottom: 40px;
		padding-left: 60px;
	}
	.signup-success__row {
		align-items: flex-start;
		display: flex;
		padding: 0;
		position: relative;
	}

	.signup-success__row-icon {
		position: absolute;
		top: 5px;
		left: -48px;
		max-width: 20px;
	}

	.signup-success__row-wrapper {
		@include breakpoint-deprecated( ">660px" ) {
			align-items: center;
			display: flex;
			width: 100%;
		}
	}

	.signup-success__row-content {
		flex: 1;
		p {
			color: var(--studio-gray-60);
			font-size: $font-body-small;
			margin-top: 5px;
			padding-right: 10px;
		}
	}

	a {
		font-size: $font-body-small;
		padding: 10px 24px;
		font-weight: 500;
	}

	hr {
		background-color: var(--studio-gray-5);
		margin: 30px 0;
	}
}

.signup-success__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	p {
		color: var(--studio-gray-60);
		font-size: $font-body-small;
		margin-bottom: 0;
	}
	.signup-success__footer-contact {
		font-weight: 500;
		margin-bottom: 30px;

		a {
			color: var(--studio-gray-100);
			border-bottom: 1px solid #000;
		}
	}
}
