/** @format */

.woocommerce-card {
	margin-bottom: $gap-large;
	background: white;
	border: 1px solid $core-grey-light-700;

	@include breakpoint( '<782px' ) {
		margin-left: -16px;
		margin-right: -16px;
		margin-bottom: $gap-small;
		border-left: none;
		border-right: none;
		width: auto;
	}
}

.woocommerce-card__header {
	padding: ($gap - 3) $gap;
	border-bottom: 1px solid $core-grey-light-700;
	display: grid;
	align-items: center;

	.has-action & {
		grid-template-columns: 1fr 1fr;
	}

	.has-menu & {
		grid-template-columns: 1fr 24px;
	}

	.has-menu.has-action & {
		grid-template-columns: 1fr 1fr 48px;
	}
}

.woocommerce-card__action,
.woocommerce-card__menu {
	text-align: right;
}

.woocommerce-card__body {
	padding: $gap;
}

.woocommerce-ellipsis-menu__toggle {
	padding: 0;
}

.woocommerce-card__title {
	margin: 0;
	// EllipsisMenu is 24px, so to match we add 6px padding around the
	// heading text, which we know is 18px from line-height.
	padding: 3px 0;
	@include font-size( 15 );
	line-height: 1.2;
	font-weight: 600;
}