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

.thank-you__product {
	margin: 20px 0 0;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	align-items: center;
	gap: 16px;
	padding: 24px;
	border-radius: 2px;
	border: 1px solid var(--color-border-subtle);
	flex-wrap: wrap;

	@media (min-width: 480px) {
		padding: 20px 25px;
	}

	.thank-you__product-icon {
		border-radius: 10px; /* stylelint-disable-line scales/radii */
		box-shadow: 0 15px 20px rgba(0, 0, 0, 0.04), 0 13px 10px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.02);
	}

	.thank-you__product-info {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-basis: 100%;
		text-align: left;

		@media (min-width: 480px) {
			flex-basis: initial;
		}

		.thank-you__product-name {
			font-size: $font-body;
			font-weight: 500;
			line-height: 24px;
			color: var(--studio-gray-100);
			flex-grow: 1;
		}

		.thank-you__product-details {
			font-size: $font-body-small;
			line-height: 20px;
			color: var(--studio-gray-60);
		}
	}

	.thank-you__product-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		min-width: auto;

		p {
			font-size: $font-body-small;
			margin: 0;
		}
	}

	&.is-free {
		.thank-you__product-actions p {
			color: var(--green-green-50, #008a20);
		}
	}
}
