// Cart Popup

@mixin hover-active() {

	&:active,
	&:hover {
		@content;
	}
}

.show-sidebar-cart {
	overflow: hidden !important;
	height: 100% !important;

	#sidebar-cart {
		right: 0;
		visibility: visible;
	}
}

#sidebar-cart,
#sidebar-wishlist {
	background: $white;
	position: fixed;
	display: block;
	width: 560px;
	height: 100vh;
	z-index: 5000;
	top: 0;
	right: -101%;
	transition: right 0.5s ease-in-out;

	@include media-query(1499px) {
		width: 444px;
	}

	@include media-query(1024px) {
		width: 410px;
	}

	@include media-query(575px) {
		width: 350px;
	}

	.close-button {
		height: 16px;
		width: 16px;
		text-decoration: none;
		display: flex;

		.close-icon {
			width: 16px;
			height: 16px;
			background-color: $light-black;
			text-indent: -9999px;
			overflow: hidden;
			font-size: 0;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M30.3 32c-.5 0-.9-.2-1.2-.5L16 18.4 3 31.5c-.4.3-.8.5-1.3.5s-.9-.2-1.2-.5c-.7-.7-.7-1.8 0-2.4L13.6 16 .5 2.9C-.2 2.2-.2 1.2.5.5.8.2 1.2 0 1.7 0s.9.2 1.2.5l13.1 13 13-13c.7-.7 1.7-.7 2.4 0 .4.3.6.7.6 1.2s-.2.9-.5 1.2L18.4 16l13.1 13.1c.7.7.7 1.8 0 2.4-.3.3-.8.5-1.2.5z'/%3E%3C/svg%3E");
			transition: all 0.5s linear;
		}

		@include hover-active() {
			span.close-icon {
				background: $accent-1;
			}
		}
	}

	.title-cart-block {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 24px;

	}

	.product-list {
		margin: 0;
		list-style: none;
		height: calc(100vh - 320px);
		overflow-x: hidden;
		overflow-y: auto;
		display: block;
		position: relative;
		z-index: 0;

		@include media-query(1399px) {
			height: calc(100vh - 244px);
		}

		.product-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-image {
				display: grid;
				align-items: center;
				justify-content: center;
				width: clamp(64px, 4.167vw, 120px);
				height: clamp(64px, 4.167vw, 120px);
				background: $lightest-gray;
				border-radius: 5px;
				padding: 4px;
			}

			.product-text {
				.prod-title {
					display: flex;

					.cancel {
						padding-left: 11.146vw;
					}
				}
				
			}

			.prod-desc {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quantity {
					@include media-query(490px) {
						padding: 6px 8px;
					}
				}
			}
			.text-end{
				display: flex;
				flex-direction: column;
				gap: $gap-10;
			}
		}
	}

	.price-total {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: $gap-32;
		width: 100%;

		a {
			text-align: center;
			width: 45%;
		}
	}

}

#sidebar-cart-curtain,
#sidebar-wishlist-curtain {
	background: rgba(black, 0.5);
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	right: 0;
	z-index: 4999;
	display: none;
	transition: opacity 0.2s ease-in-out;
}