@import "@automattic/typography/styles/fonts";
@import "@automattic/onboarding/styles/mixins";

$wpcom-modal-breakpoint: 660px;

$wpcom-modal-padding-v: 40px;
$wpcom-modal-padding-h: 50px;
$wpcom-modal-content-min-height: 350px;
$wpcom-modal-footer-padding-v: 20px;
$wpcom-modal-footer-height: 30px + ( $wpcom-modal-footer-padding-v * 2 );

// Core modal style overrides
.wpcom-block-editor-nux {
	&.components-modal__frame {
		overflow: visible;
		height: 65vh;
		top: calc(17.5vh - #{$wpcom-modal-footer-height * 0.5});

		@media (max-width: $wpcom-modal-breakpoint) {
			width: 90vw;
			min-width: 90vw;
			left: 5vw;
			right: 5vw;
		}

		@media (min-width: $wpcom-modal-breakpoint) {
			width: 720px;
			height: $wpcom-modal-content-min-height;
			top: calc(50% - #{$wpcom-modal-footer-height * 0.5});
		}
	}

	.components-modal__header {
		position: absolute;
		max-width: 90%;
		left: 5%;
		@media (min-width: $wpcom-modal-breakpoint) {
			display: none;
		}
	}

	.components-guide__container {
		margin-top: 0;
	}

	.components-guide__footer {
		position: absolute;
		width: 100%;
		height: $wpcom-modal-footer-height;
		bottom: $wpcom-modal-footer-height * -1;
		left: 0;
		padding: $wpcom-modal-footer-padding-v 0;
		margin: 0;
		display: flex;
		justify-content: center;
		background: var(--studio-white);
		border-top: 1px solid #dcdcde;

		@media (min-width: $wpcom-modal-breakpoint) {
			border-top: none;
		}
	}

	.components-guide__page {
		position: absolute;
		width: 100%;
		max-width: 90vw;
		height: 100%;
		justify-content: start;

		@media (min-width: $wpcom-modal-breakpoint) {
			max-width: 100%;
		}
	}

	.components-guide__page-control {
		position: relative;
		height: 0;
		top: 100%;
		overflow: visible;
		margin: 0 auto;
		z-index: 2;

		&::before {
			display: inline-block;
			content: "";
			height: $wpcom-modal-footer-height;
			vertical-align: middle;
		}

		li {
			vertical-align: middle;
			margin-bottom: 0;
		}

		// Temporarily disable dots on mobile as alignment is wonky.
		display: none;
		@media (min-width: $wpcom-modal-breakpoint) {
			display: block;
		}
	}
}

.wpcom-block-editor-nux__page {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	background: var(--studio-white);
	width: 100%;
	height: 90%;
	max-width: 90vw;

	@media (min-width: $wpcom-modal-breakpoint) {
		flex-direction: row;
		justify-content: flex-start;
		position: absolute;
		max-width: 100%;
		min-height: $wpcom-modal-content-min-height;
		bottom: 0;
	}
}

.wpcom-block-editor-nux__text,
.wpcom-block-editor-nux__visual {
	@media (min-width: $wpcom-modal-breakpoint) {
		flex: 1 0 50%;
		min-width: 290px;
	}
}

.wpcom-block-editor-nux__text {
	padding: 0 25px 25px;
	height: 60%;

	@media (min-width: $wpcom-modal-breakpoint) {
		height: auto;
		padding: $wpcom-modal-padding-v $wpcom-modal-padding-h;
	}
}
.wpcom-block-editor-nux__visual {
	height: 40%;
	background: #1381d8;
	text-align: center;

	@media (min-width: $wpcom-modal-breakpoint) {
		height: auto;
	}
}

.wpcom-block-editor-nux__heading {
	@include onboarding-font-recoleta;
	/* Gray / Gray 90 */
	color: #1d2327;

	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	font-size: 32px;
	line-height: 1.19;

	@media (min-width: $wpcom-modal-breakpoint) {
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 42px;
	}

	// TODO: remove this hack once the welcome editor deals better with
	// overflowing text
	body.locale-de & {
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 24px;

		@media (min-width: $wpcom-modal-breakpoint) {
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			font-size: 28px;
		}
	}
}

.wpcom-block-editor-nux__description {
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	font-size: 15px;
	line-height: 22px;

	/* Gray / Gray 60 */
	color: #50575e;

	@media (min-width: $wpcom-modal-breakpoint) {
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 17px;
		line-height: 26px;
	}
}

.wpcom-block-editor-nux__image {
	max-width: 100%;
	height: auto;
	flex: 1;
	align-self: center;

	&.align-bottom {
		align-self: flex-end;
	}

	max-height: 100%;

	@media (min-width: $wpcom-modal-breakpoint) {
		max-height: none;
	}
}