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

.item-price .display-price {
	display: block;

	.display-price__prices {
		flex: 0 1 auto;
	}
	.display-price__details {
		flex: 1;
	}

	.plan-price__currency-symbol,
	.plan-price__integer,
	.plan-price__fraction {
		font-size: $font-body;
		line-height: normal;
		margin-top: 0;
	}

	.plan-price.is-original {
		.plan-price__currency-symbol,
		.plan-price__integer,
		.plan-price__fraction {
			font-weight: 600;
			margin: 0;
		}
	}

	.plan-price.is-discounted,
	.plan-price.is-original {
		margin-right: 0.1em;
	}

	.plan-price.is-original::before,
	.is-placeholder .plan-price::after {
		display: none;
	}

	&__billing-time-frame {
		margin-top: 0;

		@include break-mobile {
			margin-top: 3px;
		}
	}

	&__billing-time-frame,
	&__expiration-date {
		color: var(--studio-gray-50);
		font-size: 0.75rem;
		@include break-mobile {
			//Mimic line-height: 24px, but with padding instead, so that the text can wrap to a new line correctly.
			padding: 0.301rem 0 0.3rem;
		}
	}

	@include break-mobile {
		display: flex;
		align-items: center;
		min-height: 24px;
	}
}

.item-price .display-price:not(.is-placeholder) {
	@include break-mobile {
		max-height: 24px;
	}

	.plan-price {
		font-weight: 700;
	}

	.plan-price.is-original {
		color: var(--studio-gray-50);
		font-weight: 600;
		position: relative;
		white-space: nowrap;
	}

	// Price strike-through:
	// (`text-decoration: line-through;` is misaligned in Firefox, so using
	// pseudo-element is more compatible with all browsers.)
	.plan-price.is-original::after {
		border-top: 2px solid var(--studio-gray-50);
		position: absolute;
		content: "";
		right: 0;
		top: 44%;
		left: 0;
	}

	.plan-price.is-discounted {
		color: var(--studio-gray-100);
		font-weight: 700;
	}

	.plan-price.is-discounted .plan-price__fraction {
		font-weight: inherit;
	}

	.display-price__billing-time-frame {
		display: flex;
		align-items: center;
		margin: 0;
	}

	&.is-free .display-price__billing-time-frame {
		margin-left: 4px;
	}
}

.item-price .display-price.is-placeholder {
	display: inline-flex;
	align-items: center;
	max-height: 24px;

	.plan-price {
		max-height: 40px;
	}

	.display-price__billing-time-frame {
		max-height: 40px;
		margin-top: 0;
	}
}

.item-price.is-compact .display-price .display-price__billing-time-frame .normal {
	display: none;
}

.item-price.is-compact .display-price .display-price__billing-time-frame .compact {
	display: inline-block;
}

.item-price__message {
	font-size: $font-body-extra-small;
	color: var(--studio-gray-30);
	font-weight: 600;
	display: flex;
	align-items: center;

	.item-price__message--dot {
		background: var(--studio-gray-30);
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-inline-end: 4px;
	}

	&--active {
		color: var(--studio-jetpack-green-50);
		.item-price__message--dot {
			background: var(--studio-jetpack-green-50);
		}
	}

	&--error {
		color: var(--color-error-50);
		.item-price__message--dot {
			background: var(--color-error-50);
		}
	}
}

