%cart-item {
	& {
		display: block;
		width: 100%;
		overflow: hidden;
		background: rgba($color-background, .5);
		margin: 0 0 $spacing/8 0;
		padding: $spacing/2;
	}
	dt {
		display: none;
		opacity: .5;
	}
	dd {
		padding-bottom: $spacing/2;
	}
}

.cart-item {
	@extend %cart-item;
}


@mixin cart-item-mobile() {

	.cart-item-image {
		float: right;
		img {
			max-width: 100px;
		}
	}

	dt.cart-item-price, dt.cart-item-total, dt.cart-item-units {
		display: block;
		float: left;
		padding-right: $spacing/2;
	}

	.cart-item-price, .cart-item-total {
		float: left;
		padding-right: $spacing;
	}

	.cart-item-units {
		& {
			max-width: 80px;
			overflow: hidden;
		}
	}

	.cart-item-remove {
		& {
			clear: both;
			width: 100%;
		}
		a {
			width: 100%;
		}
	}

}



@mixin cart-item-desktop() {
	.cart-item {
		& {
			position: relative;
			overflow: visible;
			min-height: 120px;
		}
		dt {
			display: block;
			position: absolute;
			top: $spacing/2;
			padding: 0 $spacing/2;
		}
		dd {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			padding-bottom: 0;
		}

		.product-thumbnail {
			margin-bottom: 0;
			min-height: 80px;
			width: 100%;
		}

		dt.cart-item-image, dt.cart-item-remove {  display: none;  }

		dd.cart-item-image {
			width: 12%;
			box-sizing: border-box;
			padding-right: $spacing/2;
		}

		dt.cart-item-name {  left: 12%;  }
		dd.cart-item-name {  width: 50%;  }

		dt.cart-item-units {  left: 62%;  }
		dd.cart-item-units {
			& {
				width: 5%;
			}
			input {
				padding-left: 0;
				padding-right: 0;
			}
		}

		dt.cart-item-price {	left: 69%; }
		.cart-item-price {	width: 10%; }

		dt.cart-item-total { left: 79%;  }
		.cart-item-total { width: 10%;  }

		dd.cart-item-remove {  width: 9%;  }

		.cart-item-units, .cart-item-price, .cart-item-total, .cart-item-remove {
			text-align: right;
		}
	}

}