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

.theme-upgrade-modal {
	display: flex;
	flex-direction: column;
	gap: 24px;

	&.dialog__content {
		padding: 0;
	}

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

	@include break-medium() {

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

	.theme-upgrade-modal__features {
		background-color: var(--studio-gray-0);
	}
	

	.theme-upgrade-modal__price-value {
		font-family: Inter, $sans;
	}

	.theme-upgrade-modal__price-item {
		display: flex;
		justify-content: space-between;
		padding: 24px 0;
		font-size: $font-body-small;

		&:not(:first-child) {
			border-top: 1px solid var(--studio-gray-5);
		}
		&:last-child {
			padding-bottom: 0;
		}
	}

	.theme-upgrade-modal__theme-price {
		display: flex;
		margin-bottom: 5px;
		align-items: baseline;
		justify-content: flex-start;

		span {
			@extend .wp-brand-font;
			font-size: $font-headline-small;
			margin-right: 10px;
		}
	}

	.theme-upgrade-modal__subscription-interval {
		display: flex;
		margin-bottom: 15px;

		.form-label {
			margin-right: 15px;

			&:last-of-type {
				margin-right: 0;
			}
		}
	}

	.theme-upgrade-modal__plan-nudge {
		color: var(--color-text-subtle);
		font-size: $font-body-small;

		button {
			color: var(--wp-admin-theme-color);
			cursor: pointer;
		}
	}

	.theme-upgrade-modal__subscription-savings {
		color: var(--studio-green-50);
		margin-left: 4px;
	}

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

		&.externally-managed {
			font-size: $font-title-large;
		}
	}

	.theme-upgrade-modal__logo {
		border-radius: 7px; /* stylelint-disable-line scales/radii */
		color: #fff;

		&,
		svg {
			height: 70px;
			width: 70px;
		}
	}

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

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

	.theme-upgrade-modal__actions.bundle {
		gap: 8px;
		display: flex;

		@include break-medium {
			flex-direction: row;
			justify-content: flex-end;
		}

		button {
			flex-grow: 1;
			justify-content: center;

			@include break-medium {
				flex-grow: 0;
				justify-content: flex-start;
			}
		}
		
	}

	.theme-upgrade-modal__included {
		padding: 24px;

		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;

			> div {
				display: flex;
			}
		}

		button {
			margin-top: 8px;
		}

		.wpicon {
			fill: var(--studio-green-50);
			flex-shrink: 0;
			margin-inline-end: 4px;
		}

		.components-popover.components-tooltip .components-popover__content {
			border-radius: 4px;
			margin: 8px;
			max-width: 210px;
			background-color: var(--studio-gray-100);
			padding: 8px 10px;
			text-align: start;
			white-space: pre-line;
			width: max-content;
		}
	}

	.theme-features__features-wrap {
		margin-top: 25px;
	}

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

	.theme-upgrade-modal__product-list {
		width: 100%;
		font-size: 0.875rem;

		tr {
			td {
				padding: 15px 0;
			}

			&:first-child td {
				border-bottom: 1px solid #ddd;
			}

			td:first-child {
				width: 60%;
			}
		}
	}
}
