table.shop_table {
	--table-padding: 1em 0.7em;
	--table-border-width: 0;
	--table-font-size: 15px;

	tr {
		--table-border-width: 1px 0 0 0;
		--table-border-style: dashed;

		> * {
			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}
	}

	th {
		vertical-align: top;
	}

	thead th {
		--table-border-width: 0 0 2px 0;
		--table-border-style: solid;
		color: var(--headings-color);
	}

	tfoot td {
		font-weight: 600;
	}

	a {
		font-weight: 500;
		--linkInitialColor: var(--color);
	}
}


// responsive table
@include media-breakpoint-down (sm) {
	table.shop_table_responsive {
		--table-padding: 1em 0;

		thead {
			display: none;
		}

		tbody {

			th {
				display: none;
			}

			td {
				display: block;
				text-align: right;

				&:before {
					content: attr(data-title) ": ";
					display: table;
					float: left;
					font-size: 14px;
					font-weight: 600;
				}
			}
		}
	}

	table.woocommerce-orders-table {

		tbody {
			tr:first-child td:first-child {
				--table-border-width: 0;
			}

			tr td:first-child {
				--table-border-width: 2px 0 0 0;
				--table-border-style: solid;	
			}
		}
	}
}


// common items in table
.shop_table {

	// pruduct thumbnail
	[class*="product-thumbnail"] {
		@include media-breakpoint-down (md) {
			width: 120px;
		}

		@include media-breakpoint-up (lg) {
			width: 100px;
		}

		img {
			border-radius: 2px;
		}
	}


	// product name
	[class*="product-name"] {
		@include media-breakpoint-down (md) {
			padding-right: 0;
		}

		.price {
			--fontSize: 15px;
			--fontWeight: normal;
			margin-top: 5px;
			margin-bottom: 0;
		}
	}


	// product mobile actions
	.product-mobile-actions {
		display: flex;
		align-items: center;
		margin-top: 1em;

		.remove {
			margin-left: auto;
			padding-left: 10px;
		}
	}


	// product quantity
	.quantity {
		font-size: 14px;
		--quantity-height: 40px;
	}

	.quantity[data-type="type-1"] {
		--quantity-width: 70px;
	}

	.quantity[data-type="type-2"] {
		--quantity-width: 100px;
	}
	

	// product remove button
	[class*="product-remove"] {
		width: 20px;
		text-align: right;
	}

	.remove {
		--icon-size: 12px;

		&:hover svg {
			fill: #d83428;
		}
	}
}