.wcpay-progressive-onboarding-eligibility-modal {
	&.components-modal__frame {
		border-radius: 2px !important;
		overflow: visible;
	}

	.components-modal__content {
		box-sizing: border-box;
		max-width: 700px;
		margin: 0;
		padding: $gap-larger;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.components-modal__header {
		height: 0;

		.components-button {
			position: absolute;
			left: initial;
			top: $gap-smaller;
			right: $gap-smaller;

			svg {
				width: 32px;
				height: 32px;
			}
		}
	}

	&__heading {
		font-size: 40px;
		font-weight: 400;
		line-height: 60px;
		margin-bottom: $gap-smallest;
	}

	&__subheading {
		@include wc-body-large;
		text-align: center;
		font-weight: normal;
		color: $gray-60;
		max-width: 480px;
		margin: 0 0 $gap-large 0;
	}

	&__benefits {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		column-gap: $gap-largest;
		padding: 0 $gap;
		fill: $studio-woocommerce-purple-50;
		font-size: 14px;
		line-height: 20px;
		color: $gray-60;

		svg {
			display: block;
			margin: $gap-smaller auto;
		}

		&__subtitle {
			@include wp-subtitle;
			margin: $gap-large 0 $gap-smallest;
		}

		@media screen and ( max-width: $break-small ) {
			grid-template-columns: 1fr;
			row-gap: $gap-large;
		}
	}

	&__footer {
		text-align: center;
		margin: $gap-large 0;

		& :first-child {
			margin-right: $gap;
		}

		button {
			margin-top: $gap-large;
			padding: $gap-small $gap-large;
			font-size: 14px;
			line-height: 20px;
			height: 40px;
		}
	}

	&__confetti {
		position: absolute;
		top: -28px;
		left: -8px;
		pointer-events: none;
	}
}
