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

.commission-overview {
	.hosting-dashboard-layout__top-wrapper {
		padding-block: 24px 0;
	}

	.commission-overview__section-container {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-block: 32px 0;
	}

	.jetpack-logo {
		fill: var(--color-jetpack);
	}

	.woocommerce-logo {
		fill: var(--color-woocommerce);
	}

	.hosting-dashboard-layout__body-wrapper {
		max-width: 700px;
	}

	.foldable-card.card,
	.foldable-card.card.is-expanded {
		border: none;
		border-radius: 4px;
		margin-block-start: 0;
		margin-block-end: 24px;
	}

	.foldable-card__header,
	.foldable-card.is-expanded .foldable-card__content {
		border: none;
	}


	.foldable-card__header {
		padding: 24px 24px 16px;
		@include heading-large;
	}


	.foldable-card.foldable-card__content,
	.foldable-card.is-expanded .foldable-card__content {
		@include body-medium;
		color: var(--color-neutral-50);
		padding: 0 24px 24px;
	}

	.foldable-card__main {
		display: block;

		.a4a-overview-hosting__logo-container {
			display: flex;
			gap: 8px;
			margin-block-end: 4px;

			.pressable-icon {
				width: 24px;
				height: 24px;
			}
		}
	}
}

.commission-overview__section-heading {
	@include heading-x-large;
	margin-block-end: 8px;
}
.commission-overview__section-subtitle {
	@include body-medium;
	color: var(--color-neutral-50);
}

.a4a-overview-hosting__wp-logo {
	fill: var(--color-primary-50);
	margin: 0;
}
