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

.payment-method-add {
	&__wrapper {
		margin-inline: 0;
	}

	&__wrapper .card-heading {
		display: inline-block;
		margin-top: 1rem;
		margin-bottom: 2rem;
		color: var(--studio-gray-100);
	}

	&__content {
		@include break-large {
			display: flex;
		}
	}

	&__form,
	&__image {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	&__image {
		display: none;

		@include break-large {
			display: flex;
			align-items: center;
		}

		svg {
			max-width: 80%;
		}
	}

	&__navigation-buttons {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		margin-top: 1.5rem;
		gap: 16px;

		@include break-large {
			flex-direction: row;
		}
	}

	&__notice {
		margin: 1rem 0 0;
		font-size: 1rem;
	}

	&__back-button {
		width: 100%;
		font-size: 1rem;

		@include break-large {
			width: auto;
		}
	}

	&__submit-button {
		.checkout-steps__submit-button-wrapper {
			padding: 0;
		}

		button {
			&.checkout-button {
				border-radius: var(--jetpack-corners-soft);
			}
		}
	}

	.assign-license-step-progress {
		margin-bottom: 40px;
	}
}
