.wpspxbasket.is-fixed
	position: fixed
	top: 50%
	right: -70px
	transform: translateY(-50%)
	display: flex
	z-index: 45
	transition: right 0.3s linear

	&.shown
		right: 0

	spektrix-basket-summary

		.basket-icon
			background: #00d1b2
			border-radius: 5px 0 0 5px
			text-align: center
			color: white
			position: relative
			cursor: pointer
			z-index: 2

			.count
				font-size: 20px
				font-weight: 600
				padding: 15px 0
				line-height: 1
				height: 46px
				display: block

			.link
				color: white
				display: block
				padding: 0 15px 15px
				box-sizing: border-box

			svg
				width: 36px
				display: block
				height: auto


.wpspxbasket-side-panel
	position: fixed
	z-index: 99
	pointer-events: none
	top: 0
	right: 0
	width: 90vw
	transform: translate(90vw, 0)
	height: 100vh
	background: white
	padding: 40px
	box-sizing: border-box
	transition: transform 0.33s ease

	display: flex
	flex-flow: row wrap
	justify-content: flex-start

	@media (min-width: 768px)
		width: 60vw
		transform: translate(60vw, 0)

	@media (min-width: 1024px)
		width: 40vw
		transform: translate(40vw, 0)

	&.show
		transform: translate(0, 0)
		pointer-events: all
		box-shadow: 15px 0 35px 6px #000

	.wpspx-basket-close
		position: absolute
		right: 40px
		top: 45px
		z-index: 1
		line-height: 1
		font-size: 25px
		color: black

	.wpspx-basket-wrap
		overflow: scroll
		height: 100%

		display: flex
		flex-grow: 1
		flex-flow: column

		.wpspx-basket-title
			font-size: 30px
			font-weight: 600
			margin: 0 0 20px 0

		.wpspx-basket-contents
			max-height: 355px
			overflow: scroll

			.wpspx-total-items
				border-top: 1px solid #ddd
				border-bottom: 1px solid #ddd
				line-height: 2
				color: #777
				margin-bottom: 20px


			.wpspx-basket-items
				position: relative
				display: block

				.wpspx-basket-item
					position: relative
					display: flex
					flex-wrap: wrap
					flex: 0 0 100%
					align-items: flex-start
					margin-bottom: 15px
					padding-bottom: 15px
					border-bottom: 1px solid #eee

					&:last-of-type
						margin-bottom: 9
						padding-bottom: 0
						border-bottom: 0

					// .wpspx-remove
					// 	display: block
					//
					// 	.wpspx-remove-from-basket
					// 		color: black
					// 		width: 20px
					// 		height: 20px
					// 		display: block
					// 		font-size: 18px
					// 		line-height: 1
					// 		text-align: center
					//
					// 		&:hover
					// 			color: #FF4A53

					.wpspx-item-info
						flex-grow: 1
						max-width: 100%
						display: flex
						flex-flow: wrap
						padding: 0
						box-sizing: border-box
						position: relative

						.wpspx-title
							flex: 0 0 100%
							line-height: 1
							font-size: 20px
							font-weight: 600

						.amount
							flex: 0 0 100%
							line-height: 1
							font-size: 18px
							margin-top: 10px
							justify-content: space-between
							display: flex
							flex-flow: wrap

							.wpspx-price-symbol
								display: flex

						.view-additional-details
							cursor: pointer
							display: block
							position: absolute
							right: 0
							top: 3px
							line-height: 1
							color: #428BFF
							font-size: 18px
							text-rendering: auto

						.additional-details
							padding: 20px 0 0 0
							width: 100%
							display: none

							dl
								display: flex
								flex-flow: wrap
								width: 100%

								width: 100%
								font-size: 13px
								color: #888

								dt
									flex: 0 0 35%
									font-weight: 600

								dd
									flex: 0 0 65%


		#wpspx-basket-total
			padding-top: 15px
			border-top: 2px solid black
			line-height: 2
			margin-top: auto

			div
				display: flex
				flex-flow: wrap
				justify-content: space-between

				span, strong
					text-transform: uppercase
					font-size: 19px
					line-height: 1.6

			.wpspx-discount
				span, strong
					font-size: 16px
					color: #444



		.wpspx-basket-button
			background: transparent
			border: 2px solid #333
			justify-content: center
			text-align: center
			padding: 10px
			font-weight: 600
			font-size: 16px
			text-transform: uppercase
			margin-top: 30px



			#wpspx-basket-data
				display: flex
				flex-grow: 1
				flex-flow: column nowrap