/** @format */

.woocommerce-table {
	.woocommerce-card__body {
		padding: 0;
		padding-bottom: $gap;
	}

	.woocommerce-card__action,
	.woocommerce-card__menu {
		justify-self: flex-end;
	}
}

.woocommerce-table__caption {
	@include font-size( 24 );
	text-align: left;
}

.woocommerce-table__table {
	overflow-x: auto;
	margin-bottom: $gap;

	table {
		border-collapse: collapse;
		width: 100%;
	}

	tr:hover,
	tr:focus-within {
		background-color: $core-grey-light-200;
	}
}

.woocommerce-table__header,
.woocommerce-table__item {
	padding: $gap $gap-large;
	border-bottom: 1px solid $core-grey-light-500;
	text-align: left;

	a {
		display: block;
		margin: ($gap*-1) ($gap-large*-1);
		padding: $gap $gap-large;

		&:hover,
		&:focus {
			color: $woocommerce-700;
		}

		&:focus {
			box-shadow: none;
		}
	}

	.is-placeholder {
		@include placeholder();
		display: inline-block;
		height: 16px;
		max-width: 120px;
		width: 80%;
	}

	&.is-numeric {
		text-align: right;

		button {
			justify-content: flex-end;
		}

		.is-placeholder {
			max-width: 40px;
		}
	}
}

.woocommerce-table__header,
th.woocommerce-table__item {
	font-weight: bold;
	white-space: nowrap;
}

.woocommerce-table__header {
	padding: $gap-smaller $gap-large;
	background-color: #f8f9fa;
	border-bottom: 1px solid $core-grey-light-700;

	& + .woocommerce-table__header {
		border-left: 1px solid $core-grey-light-700;
	}

	.components-button.is-button {
		height: auto;
		width: 100%;
		padding: $gap-smaller $gap-large $gap-smaller 0;
		vertical-align: middle;
		line-height: 1;
		border: none;
		background: transparent;
		box-shadow: none !important;

		// @todo Add interactive styles
		&:hover {
			box-shadow: none !important;
		}

		&:active {
			box-shadow: none !important;
		}
	}

	&.is-sortable {
		padding: 0;

		.gridicon {
			visibility: hidden;
			margin-left: $gap-smallest;
		}

		&.is-sorted .components-button,
		.components-button:hover,
		.components-button:focus {
			.gridicon {
				visibility: visible;
			}
		}
	}
}

.woocommerce-table__summary {
	margin: $gap 0;
	text-align: center;
}

.woocommerce-table__summary-item {
	display: inline-block;
	margin-bottom: 0;

	.woocommerce-table__summary-label,
	.woocommerce-table__summary-value {
		display: inline-block;
	}

	.woocommerce-table__summary-label {
		margin-left: $gap-smallest;
	}

	.woocommerce-table__summary-value {
		font-weight: 600;
	}

	& + .woocommerce-table__summary-item:before {
		content: '/';
		margin: 0 $gap-smallest;
	}
}