@use "@wordpress/base-styles/mixins";

.jp-idc__idc-screen {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	background: #fff;
	padding: 10px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	border-left: 4px solid #e68b28;
	max-width: 1128px;
	box-sizing: border-box;
	margin: 0 auto;

	&.jp-idc__idc-screen__success {
		border-color: #069e08;
	}

	@include mixins.break-small {
		padding: 48px;
	}

	.jp-idc__idc-screen__header {
		display: flex;
		align-items: center;

		.jp-idc__idc-screen__logo-image {
			max-width: 100px;
			max-height: 100px;
		}

		.jp-idc__idc-screen__logo-label {
			font-size: 14px;
			line-height: 22px;
			margin: -7px 0 0 8px;
		}
	}

	h2 {
		margin: 32px 0 0 0;
		font-weight: 600;
		font-size: 24px;
		line-height: 28px;
	}

	h3 {
		margin: 24px 0 0;
		font-weight: 600;
		font-size: 20px;
		line-height: 28px;
	}

	p {
		margin: 16px 0 0 0;
		max-width: 710px;
		font-size: 16px;
		line-height: 24px;
		color: #2c3338;
	}

	a {
		color: #2c3338;
		text-decoration-line: underline !important;
	}

	ul {
		font-size: 16px;
		padding-left: 20px;
		list-style-type: disc;
	}

	.jp-idc__idc-screen__cards {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;

		@media only screen and (min-width: 1403px) {
			flex-direction: row;
			align-items: normal;
		}

		.jp-idc__idc-screen__cards-separator {
			font-weight: 600;
			font-size: 20px;
			line-height: 28px;
			color: #23282d;
			margin: 0 24px;
			align-self: center;
		}

		.jp-idc__idc-screen__card-action-base {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			max-width: 100%;
			width: 480px;
			border: 1px solid #c3c4c7;
			border-radius: 4px;
			padding: 10px;
			margin: 24px 0;
			box-sizing: border-box;

			@include mixins.break-small {
				padding: 24px;
			}

			h4 {
				margin: 0 0 8px;
				font-weight: 400;
				font-size: 20px;
				line-height: 28px;
			}

			p {
				margin: 0 0 24px;
			}

			.jp-idc__idc-screen__card-action-sitename {
				width: 100%;
				background: #f9f9f6;
				border-radius: 33px;
				font-weight: 700;
				font-size: 16px;
				line-height: 24px;
				color: #2c3338;
				text-align: center;
				padding: 16px;
				overflow-wrap: anywhere;
				box-sizing: border-box;
			}

			.jp-idc__idc-screen__card-action-separator {
				margin: 12px auto;
				display: block;
			}

			.jp-idc__idc-screen__card-action-button,
			.jp-idc__idc-screen__card-action-button-secondary {
				width: 100%;
				padding: 8px 24px;
			}
		}
	}

	.jp-idc__idc-screen__card-action-button,
	.jp-idc__idc-screen__card-action-button-secondary {
		margin-top: 24px;
		padding: 8px;
		height: auto;
		min-height: 40px;
		background: #000;
		border-radius: 4px;
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		color: #fff;
		justify-content: center;
	}

	.jp-idc__idc-screen__card-action-button-secondary {
		background: var(--jp-white);
		color: var(--jp-black);
		box-shadow: inset 0 0 0 1.51px var(--jp-black);
	}

	.jp-idc__idc-screen__card-action-button-migrated {
		width: 141px;
		margin-top: 64px;
	}

	.jp-idc__idc-screen__card-migrated {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 24px;

		.jp-idc__idc-screen__card-migrated-hostname {
			border: 1px solid #c3c4c7;
			border-radius: 4px;
			padding: 24px;
			font-weight: 700;
			font-size: 16px;
			line-height: 24px;
			color: #2c3338;
			flex-grow: 1;
			width: 100%;
		}

		.jp-idc__idc-screen__card-migrated-separator-wide {
			display: none;
		}

		.jp-idc__idc-screen__card-migrated-separator {
			display: block;
		}

		.jp-idc__idc-screen__card-migrated-separator,
		.jp-idc__idc-screen__card-migrated-separator-wide {
			margin: 28px;
		}

		@media only screen and (min-width: 1400px) {
			flex-direction: row;
			width: auto;

			.jp-idc__idc-screen__card-migrated-separator {
				display: none;
			}

			.jp-idc__idc-screen__card-migrated-separator-wide {
				display: block;
			}

			.jp-idc__idc-screen__card-migrated-hostname {
				width: auto;
			}
		}
	}
}
