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

.migrations-overview-v2 {
	.hosting-dashboard-layout__body {
		padding: 0;

		& > * {
			max-width: 100%;
			padding: 0;
			margin: 0;
		}
	}

	.page-section__header-description {
		@include heading-medium;
		color: var(--color-neutral-70);
		max-width: 600px;

		@include break-medium {
			@include heading-x-large;
		}

		@include break-large {
			padding-inline-end: 64px;
		}
	}
}

.migrations-overview-v2__button {
	.gridicon {
		margin-left: 6px;
		top: 2px;
		transition: transform 100ms ease-in-out;

		&.reverse {
			transform: rotate(180deg);
		}
	}
}

.popover.migrations-overview-v2__popover {
	animation: fadeIn 0.2s ease-out;
	margin-inline-start: 62px;

	.popover__inner {
		width: 280px;
		text-align: unset;

		@include break-large {
			width: 400px;
		}
	}
}

.migrations-overview-v2__popover-content {
	display: flex;
	flex-direction: column;
	padding: 28px 32px;
	gap: 32px;

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

.migrations-overview-v2__popover-column-heading {
	color: var(--color-accent-40);
	@include heading-small;
	margin-block-end: 8px;
}
