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

.billing-details__row {
	display: grid;
	grid-template-columns: calc(66% - 12px) calc(34% - 12px);
	grid-template-areas:
		"product assigned"
		"subtotal unassigned";
	align-items: center;
	grid-gap: 24px;
	@include body-x-large;

	> :nth-child(even) {
		text-align: right;

		@include break-xlarge() {
			text-align: left;
		}
	}

	@include break-xlarge() {
		grid-template-columns: 1fr 150px 150px 150px;
		grid-template-areas: "product assigned unassigned subtotal";
	}
}

.billing-details--summary {
	grid-template-areas: none;
	grid-gap: 8px 24px;
}

.billing-details__header {
	display: none;

	* {
		@include body-medium;
		color: var(--color-accent-70);
	}

	@include break-xlarge() {
		display: block;
	}
}

.billing-details__product {
	grid-area: product;
}

.billing-details__assigned {
	grid-area: assigned;
}

.billing-details__unassigned {
	grid-area: unassigned;
}

.billing-details__subtotal {
	grid-area: subtotal;
}

.billing-details__total-label {
	text-align: right;

	@include break-xlarge() {
		grid-column: 1 / span 3;
	}
}

.billing-details__cost-label {
	margin-block-end: 8px;
	@include body-large;
}

.billing-details__cost-amount {
	margin-block-end: 8px;
	@include body-x-large;

	@media (min-width: 661px) and (max-width: 781px) {
		// Accounts for unbreakable long cost numbers breaking the layout due to the sidebar taking up
		// a lot of the available space.
		@include body-large;
	}
}

.billing-details__line-item-meta {
	display: block;
	@include body-medium;
	color: var(--color-neutral-70);

	&--is-mobile {
		@include break-xlarge() {
			display: none;
		}
	}
}

.billing-details__placeholder {
	@include placeholder( --color-neutral-10 );

	display: block;
}
