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

.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;
		font-size: 1.25rem;

		@include break-xlarge() {

			grid-template-columns: 1fr 150px 150px 150px;
			grid-template-areas: "product assigned unassigned subtotal";
		}

		&--summary {
			grid-template-areas: none;
			grid-gap: 8px 24px;
		}

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

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

	&__header {
		display: none;

		* {
			font-weight: 400;
			font-size: 0.875rem;
			color: var(--studio-gray-70);
		}

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

	&__product {
		grid-area: product;
	}

	&__assigned {
		grid-area: assigned;
	}

	&__unassigned {
		grid-area: unassigned;
	}

	&__subtotal {
		grid-area: subtotal;
	}

	&__total-label {
		text-align: right;

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

	&__cost-label {
		margin-bottom: 8px;
		font-size: 1rem;
	}

	&__cost-amount {
		margin-bottom: 8px;
		font-size: 1.25rem;

		@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.
			font-size: 1rem;
		}
	}

	&__line-item-meta {
		display: block;
		font-size: 0.875rem;
		color: var(--studio-gray-70);

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

	&__placeholder {
		@include placeholder( --color-neutral-10 );

		display: block;
	}
}
