@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries


  #cd-cart {
	position: fixed;
	top: 0;
	height: 100%;
	width: 260px;

	/* header height */
	padding-top: 50px;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	box-shadow: 0 0 20px rgba(#000, .2);

	z-index: $sidebar-zindex;

	@include MQ(M) {
		width: 350px;
	}

	@include MQ(L) {
		width: 30%;

		/* header height has changed */
		padding-top: 80px;
	}
}



#cd-cart {
	right: -100%;
	background: #FFF;

	@include transition(right .3s);

	&.speed-in {
		right: 0;
	}

	> * {
		padding: 0 1em;
	}

	h2 {
		@include font-size(14px);
		font-weight: bold;
		text-transform: uppercase;
		margin: 1em 0;
	}

	.cd-cart-items {
		padding: 0;

		li {
			position: relative;
			padding: 1em;
			border-top: 1px solid $border;

			&:last-child {
				border-bottom: 1px solid $border;
			}
		}
	}

	.cd-qty, .cd-price {
		color: $light-text;
	}

	.cd-price {
		margin-top: .4em;
	}

	.cd-item-remove {
		position: absolute;
		right: 1em;
		@include center(y); // see mixin inside partials > _mixins.scss
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: url('../img/cd-remove-item.svg') no-repeat center center;

		.no-touch &:hover {
			background-color: $border;
		}
	}

	.cd-cart-total {
		padding-top: 1em;
		padding-bottom: 1em;

		span {
			float: right;
		}

		&::after { /* clearfix */
			content: '';
			display: table;
			clear: both;
		}
	}

	.checkout-btn {
		display: block;
		width: 100%;
		height: 60px;
		line-height: 60px;
		background: $green;
		color: #FFF;
		text-align: center;

		.no-touch &:hover {
			background: lighten($green, 10%);
		}
	}

	.cd-go-to-cart {
		text-align: center;
		margin: 1em 0;

		a {
			text-decoration: underline;
		}
	}

	@include MQ(L) {
		> * {
			padding: 0 2em;
		}

		.cd-cart-items li {
			padding: 1em 2em;
		}

		.cd-item-remove {
			right: 2em;
		}
	}
}