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

$woocommerce-purple-50: #720EEC;

.overview__featured-woopayments {
	background: $woocommerce-purple-50 url( calypso/assets/images/a8c-for-agencies/woo-product-card-bg.svg ) no-repeat bottom right;
	border-color: $woocommerce-purple-50;
	border-radius: 4px;
	color: var(--color-text-inverted);
	padding: 24px;
}

.overview__featured-woopayments-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 16px;
}

.theme-a8c-for-agencies .components-button.overview__featured-dismiss-button {
	svg {
		fill: var(--color-text-inverted);
	}

	&:focus {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--color-text-inverted);
	}

	&:active {
		background-color: $woocommerce-purple-50;
	}
}

.theme-a8c-for-agencies .overview__featured-woopayments .components-button.is-primary:not(:disabled) {
	&,
	&:hover,
	&:focus,
	&:focus-visible {
		color: $woocommerce-purple-50;
		background-color: var(--color-surface);
		border: none;
		outline: none;
		box-shadow: none;
	}
}

.badge.overview__featured-woopayments-badge {
	display: inline-block;
	background-color: var(--color-surface);
	color: $woocommerce-purple-50;
	text-transform: uppercase;
}

.overview__featured-woopayments-logo {
	margin-block-end: 16px;
	display: block;
	width: 200px;
}

.overview__featured-woopayments-title {
	@include heading-x-large;
	margin-block-end: 12px;
}

.overview__featured-woopayments-description {
	@include body-large;
	margin-block-end: 12px;
}
