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

.premium-global-styles-upgrade-modal.upgrade-modal {
	display: flex;
	flex-direction: column;

	&.dialog__content {
		padding: 0;
	}

	&.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 775px;
	}

	@include break-medium() {
		flex-direction: row;
		max-width: 775px;

		&.loading {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 775px;
			height: 430px;
		}
	}

	.upgrade-modal__col {
		position: relative;
		padding: 45px 25px;

		@include break-medium {
			padding: 45px;

			&:nth-of-type(1) {
				width: 62%;
			}

			&:nth-of-type(2) {
				width: 38%;
			}
		}

		&:nth-of-type(1) {
			.upgrade-modal__included {
				display: block;
				margin-bottom: 36px;

				@include break-medium {
					display: none;
				}
			}
		}

		&:nth-of-type(2) {
			display: none;
			background-color: var(--studio-gray-0);
			padding-left: 25px;
			padding-right: 25px;

			@include break-medium {
				display: block;
			}
		}
	}

	.upgrade-modal__plan {
		margin-bottom: 12px;

		.upgrade-modal__plan-heading {
			margin-bottom: 8px;
			font-size: $font-title-small;
			font-weight: 500;
			line-height: 26px;
			color: var(--studio-gray-100, #101517);
		}

		.upgrade-modal__plan-price {
			.plan-price__integer {
				font-size: $font-title-large;
				font-weight: 500;
				color: var(--studio-gray-100, #101517);
			}

			.plan-price__currency-symbol {
				margin-top: 2px;
				font-size: $font-body;
				font-weight: 500;
				color: var(--studio-gray-100, #101517);
			}
		}

		.upgrade-modal__plan-billing-time-frame {
			font-size: $font-body-extra-small;
			color: var(--studio-gray-70, #3c434a);
		}
	}

	h1.upgrade-modal__heading {
		@extend .wp-brand-font;
		font-size: $font-title-large;
		line-height: 1.1;
		margin-bottom: 15px;
		&.bundle {
			margin-top: 15px;
		}
	}

	p {
		margin-bottom: 20px;
	}

	.upgrade-modal__close {
		color: var(--color-text-subtle);
		position: absolute;
		top: 0;
		right: 8px;

		.gridicon {
			fill: var(--color-text-subtle);
		}
	}

	.upgrade-modal__actions.bundle {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;

		.button {
			padding: 9px 25px;
			border-radius: 4px;
			font-weight: 500;
			margin-bottom: 0;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

			&.is-primary {
				width: 100%;
			}
		}

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

	.upgrade-modal__included {
		ul,
		li {
			font-size: $font-body-small;
			line-height: 1.7;
			list-style: none;
			margin-left: 0;
			padding-left: 0;
			margin-top: 0;
			margin-bottom: 0;
		}

		li {
			display: flex;
			align-items: flex-start;
		}

		.gridicon {
			fill: var(--studio-green-50);
			flex-shrink: 0;
			margin-right: 10px;
			margin-top: 4px;
		}
	}

	h2 {
		font-size: $font-body-small;
		font-weight: 500;
		margin-bottom: 5px;
	}
}
