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

$width-right-panel-card:  calc(45% - 110px);
$width-right-panel-card-expanded:  45%;
$width-left-panel-card: 55%;

.email-provider-stacked-features__whats-included {
	color: var(--studio-gray-50);
	display: block;
	font-size: 0.75rem;
}

.email-provider-stacked-features__feature {
	margin-left: 28px;
	margin-top: 8px;
	display: flex;
	align-items: center;

	&:first-child {
		margin-top: 0;
	}

	.gridicon {
		fill: var(--studio-gray-20);
		margin-left: -28px;
		margin-right: 5px;
		min-width: 24px;
	}
}

.email-provider-stacked-card__provider__action-panel.is-primary {
	flex-direction: column;

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

.email-provider-stacked-card__provider__provider-card.promo-card {
	flex-direction: row;
}

.email-provider-stacked-card__provider__providers {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.email-provider-stacked-card__provider__provider-card-main-details {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 1em;

	@include break-mobile {
		align-items: center;
		flex-direction: row;
	}

	p {
		margin-bottom: 0;
	}
}

.email-provider-stacked-card__provider-price-and-button {
	align-items: center;
	display: flex;
	justify-content: space-between;
	order: 3;

	.email-provider-stacked-features__toggle-button {
		display: flex;
		margin-top: 8px;
		overflow: visible;
		text-align: left;
		width: 100%;

		.gridicon {
			margin-left: auto;
			top: 0;
		}
	}
}

.email-provider-stacked-card__provider__provider-expand-cta {
	margin-top: 1em;
	overflow: visible;
	white-space: nowrap;

	@include break-mobile {
		margin-left: 2em;
		margin-top: 0;
	}
}

.email-provider-stacked-card__title-price-badge {
	font-size: $font-body-small;
	margin-top: 10px;
	width: 100%;

	@include break-xlarge {
		margin-left: 20px;
		margin-top: 0;
		width: $width-right-panel-card;
	}
}

.email-provider-stacked-card__provider-form-and-right-panel {
	display: none;
}

.email-providers-stacked-comparison__provider-card {
	&.action-panel {
		padding-bottom: 24px;
	}

	@include break-medium {
		padding-top: 36px;

		&.action-panel {
			padding-bottom: 36px;
		}
	}

	&.card.action-panel.promo-card {
		display: flex;
		flex-direction: column;

		@include breakpoint-deprecated( ">660px" ) {
			flex-direction: row;
		}

		.action-panel__body {
			color: var(--color-text);
			overflow: visible;

			p {
				margin-bottom: 0;
			}
		}

		.action-panel__figure {
			display: flex;
			flex-direction: row;
			margin-bottom: 0;
			margin-top: 0;
			padding-right: 12px;
			text-align: left;

			@include breakpoint-deprecated( "<660px" ) {
				max-width: 100%;
				padding-right: 0;
			}

			@include break-mobile {
				order: 1;

				&.align-left {
					order: -1;
				}
			}
		}
	}

	.action-panel__title {
		.promo-card__title-badge {
			width: 100%;
			display: flex;
			background-color: initial;
			margin: 0;
		}
	}

	.email-provider-stacked-card__header {
		display: flex;
		flex-direction: column;

		@include break-xlarge {
			align-items: center;
			flex-direction: row;
		}

		.email-provider-stacked-card__provider-card-main-details {
			margin-top: 12px;

			@include break-xlarge {
				margin-left: 10px;
				margin-top: 0;
			}

			.button {
				width: 100%;
			}
		}
	}

	&.is-expanded {
		.email-provider-stacked-card__header .email-provider-stacked-card__title-price-badge {
			@include break-xlarge {
				width: $width-right-panel-card-expanded;
			}
		}

		.email-provider-stacked-card__provider-expand-cta {
			display: none;
		}

		.email-provider-stacked-card__provider-form-and-right-panel {
			display: flex;
			flex-direction: column;
			justify-content: start;
			margin-top: 1em;
			line-height: 1.5;

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

		.email-provider-stacked-card__provider-form {
			@include break-xlarge {
				min-width: $width-left-panel-card;
				max-width: $width-left-panel-card;
			}

			> .form-fieldset {
				margin-bottom: 0;
			}

			.email-providers-stacked-comparison__titan-mailbox-action-skip {
				@include break-mobile {
					margin-left: 1em;
				}
			}
		}
	}
}

.email-provider-stacked-card__provider-right-panel {
	@include break-xlarge {
		margin-left: 30px;
	}

	img {
		margin-top: 1em;
	}
}

.email-provider-stacked-card__title {
	font-size: $font-title-small;
	color: var(--color-neutral-70);

	@extend .wp-brand-font;
}

.email-provider-stacked-card__title-container {
	align-self: flex-start;

	@include break-xlarge {
		margin-right: 10px;
		min-width: $width-left-panel-card;
		max-width: $width-left-panel-card;
	}

	p {
		margin-bottom: 0;
		margin-top: 10px;
	}
}

.email-provider-stacked-card__provider-form > * .form-text-input-with-affixes {
	flex-direction: column;

	.form-text-input-with-affixes__suffix {
		border-top-width: 0;
		border-left: 1px solid var(--color-neutral-10);
		display: inline-block;
		white-space: normal;
		word-break: break-all;
	}

	@include break-wide {
		flex-direction: row;

		.form-text-input-with-affixes__suffix {
			border-left-width: 0;
			border-top-width: 1px;
			max-width: 65%;
		}
	}
}

.email-provider-stacked-features__logos {
	column-gap: 6px;
	display: flex;
	flex-wrap: wrap;
	margin-left: 28px;

	img {
		width: 32px;
	}
}

