$o-cart-bp1: 650;
$o-cart-bp2: $bp-max;


.o-cart {
	@include template(item-name, item-quantity, item-price, item-remove);
	@include vspacing('margin-bottom' 1);
	max-width: $site-column-size * 8px;
	margin-left: auto;
	margin-right: auto;
}


.o-cart__title {
	@include font-size(xl);
	@include font-weight('bold');
	margin-bottom: space(3);
}

.o-cart__discount-description {
	@include font-size(xs);
	@include font-weight('bold');
	margin-bottom: space(3);
}


.o-cart__item {
	@include owl(space(2));
	@include border-radius(s);
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto;
	grid-row-gap: space(2);
	grid-column-gap: space(2);
	grid-template-areas:
		"item-name  item-remove"
		"item-quantity  item-price";
	align-items: center;
	padding: space(2.5);
	border: 2px solid palette(neutral, 900);

	@include mq($o-cart-bp1) {
		padding: space(2.5) space(3) space(2.5) space(5);
		grid-template-rows: auto;
		grid-template-columns: 3fr auto 1fr auto;
		grid-template-areas: "item-desc  item-quantity  item-price  item-remove";
	}

	@include mq($o-cart-bp2) {
		grid-template-columns: 5fr auto 128px auto; //Magic value for displaying numbers above a million
	}
}

.o-cart__item-desc {
}


.o-cart__item-name {
	@include font-size(m);
	@include font-weight('bold');
}


.o-cart__item-discount {
	@include font-size(s);
	color: palette(neutral, 500);
}


.o-cart__item-quantity {
	justify-self: start;
}


.o-cart__item-price {
	@include font-size(m);
	@include font-weight('bold');
	text-align: right;
}


.o-cart__item-price--sub {
	@include font-size(s);
	@include font-weight('regular');
	color: palette(neutral, 500);
	text-decoration: line-through;
}


.o-cart__item-remove {
	@include border-radius(s);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: space(3);
	height: space(3);
	margin-left: space(3);
	padding: 0;
	justify-self: end;
	transition: color 150ms linear,
	background-color 150ms linear;

	&:hover {
		background-color: palette(negative, 500);
		color: palette(neutral, 0);
	}
}


.o-cart__submit {
	text-align: right;
	margin-top: space(3);
}