@import 'mixins.less';

.cart-tab {
	width:22em;
	position: fixed;
	top:5em;
	z-index: 9999999;
	a.cart-parent {
		position: absolute;
		top:0;
		display: block;
		.borderbox;
		padding:1.618em;
		text-decoration: none;
		span.contents {
			display: block;
			color: #666;
			font-size:.8em;
		}
		&:hover {
			text-decoration: none;
		}
	}
	.widget {
		padding:1.618em;
		margin:0;
		max-height: 600px;
		overflow: auto;
	}

	// The light colour scheme
	&.light {
		background: #fff;
		a.cart-parent, .widget {
			.box_shadow(0,2px,1em,0,rgba(0,0,0,0.2));
		}
		a.cart-parent {
			background: #fff;
			&:after {
				content: "";
				display: block;
				width:10px;
				height:100%;
				background: #fff;
				position: absolute;
				top:0;
				right:-10px;
			}
		}
	}

	// The dark colour scheme
	&.dark {
		background: #333;
		a.cart-parent, .widget {
			.box_shadow(0,2px,1em,0,rgba(0,0,0,0.2));
		}
		a.cart-parent {
			background: #333;
			&:after {
				content: "";
				display: block;
				width:10px;
				height:100%;
				background: #333;
				position: absolute;
				top:0;
				right:-10px;
			}
		}
	}

	// If the cart tab is positioned to the right
	&.right {
		right:-22em;
		.transition(right,ease,.5s);
		a.cart-parent {
			left:-8.402328em;
			width:8.402328em;
			.transition(left,ease,.5s);
			.border_radius_left(3px);
			&.hidden {
				left:0;
			}
			&.visible {
				left:-8.402328em;
			}
		}
		&:hover {
			right:0;
		}
		.widget {
			.border_radius_bottom(3px);
			.border_radius_right(0);
		}
	}

	// If the cart tab is positioned to the left
	&.left {
		left:-22em;
		.transition(left,ease,.5s);
		a.cart-parent {
			right:-8.402328em;
			width:8.402328em;
			.transition(right,ease,.5s);
			.border_radius_right(3px);
			&.hidden {
				right:0;
			}
			&.visible {
				right:-8.402328em;
			}
		}
		&:hover {
			left:0;
		}
		.widget {
			.border_radius_bottom(3px);
			.border_radius_left(0);
		}
		&.light, &.dark {
			a.cart-parent:after {
				right:auto;
				left:-10px;
			}
		}
	}

	&.no-animation {
		&.right:hover {
			right:-22em;
		}
		&.left:hover {
			left:-22em;
		}
	}
	&.hidden {
		display: none;
	}
}

// Retina
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1) {


}