.order-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;
	}
}

@mixin order-item-mobile() {

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

	dt.order-item-total, dt.order-item-date,dt.order-item-state {
		display: block;
		float: left;
		padding: 0 $spacing/2 $spacing/2 0;
		clear: left;
	}

	dd.order-item-total, dd.order-item-date,dd.order-item-state {
		float: left;
		padding-right: $spacing;
	}

	dd.order-item-total {
		color: $color-ok;
		font-weight: bold;
	}

}

@mixin order-item-desktop() {

	.order-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.order-item-image {  display: none;  }

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

	dt.order-item-id {  left: 12%;  }
	dd.order-item-id {  width: 35%;  }


	dt.order-item-state {  left: 46%;  }
	dd.order-item-state {  width: 15%;  }

	dt.order-item-date {	left: 64%; }
	.order-item-date {	width: 15%; }

	dt.order-item-total { left: 79%;  }
	.order-item-total { width: 15%;  }

	.order-item-total, .order-item-date, .order-item-state {
		text-align: right;
	}

}