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

.migrations-hosting-options__container {
	display: grid;
	gap: 32px;
	margin-block-end: 32px;

	@include break-large {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.migrations-hosting-options-card__banner {
	width: 100%;
	height: auto;
}

.components-card.migrations-hosting-options-card {
	padding: 24px;
	box-shadow: none;
	border: 1px solid var(--color-primary-5);
	border-radius: 4px;

	> div {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
}


.migrations-hosting-options-card__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.migrations-hosting-options-card__title {
	@include heading-x-large;
}

.migrations-hosting-options-card__description {
	@include body-large;
	margin: 0;
}

.migrations-hosting-options-card__footnote {
	@include body-large;
	font-style: italic;
	margin-block-end: 8px;
}

.migrations-hosting-options-card__footer {
	margin-block-start: auto;
	display: flex;

	> * {
		flex-grow: 1;
	}

	@include break-large {
		> * {
			flex-grow: 0;
		}
	}
}

.migrations-hosting-options__footnote {
	@include body-large;

	a,
	a:hover,
	a:active,
	a:visited {
		color: var(--color-text);
		text-decoration: underline;
	}
}
