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

.product-store__pricing-breakdown {
	padding: 2rem 0;

	@media ( max-width: $break-medium ) {
		padding: 1rem 0;
	}

	&--highlight {
		font-size: $font-body;
		font-weight: 700;
		line-height: 20px;
		color: var( --studio-gray-100 );
		padding: 1rem;
		background: #eaefef;
		border-radius: 8px;

		@media ( max-width: $break-medium ) {
			margin-top: -1rem;
		}
	}

	&--heading {
		font-weight: 600;
		margin-bottom: 0.5rem;
	}

	hr {
		margin-top: 1rem;
		margin-bottom: 1rem;

		@media ( max-width: $break-medium ) {
			margin-top: 0.5rem;
			margin-bottom: 0.5rem;
		}
	}

	.plan-price {
		font-size: inherit;
	}
	&--summary {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	&--details {
		margin-top: 1rem;
	}

	&--details--items {
		list-style-type: none;
		margin: 0;
	}

	&--summary--item,
	&--details--items li {
		display: flex;
		justify-content: space-between;
	}

	&--summary--item {
		font-size: $font-body;
		line-height: 24px;

		&:last-child {
			font-size: $font-body-large;
			/* stylelint-disable-next-line scales/font-weights */
			font-weight: 800;
			color: var( --studio-black );
		}
	}

	&--details--items li {
		background: url( ../../../../../assets/images/jetpack/jetpack-green-checkmark.svg ) no-repeat 0
			2px;
		background-size: 14px;
		padding-left: 20px;
		font-weight: 400;
		font-size: $font-body-small;
		color: var( --studio-gray-70 );
		background-position-y: 5px;
	}
}
