// Menu cart.

// @import (reference) "../../../mixins.less";
// @import (reference) "../../../../buttons.less";
.elementor-widget-woocommerce-menu-cart {
	// Base Theme Widget Styles.
	&.vamtam-has-theme-widget-styles {
		.elementor-menu-cart__container.elementor-menu-cart--shown {
			background-color: rgba(0,0,0,.80);
		}

		.elementor-menu-cart__container:not(.elementor-menu-cart--shown) .elementor-menu-cart__main {
			opacity: 1;
		}

		.elementor-menu-cart__container .elementor-menu-cart__main {
			width: 30%;
			// Bijoux-after.
			min-width: 500px;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: min-content auto;
			overflow-y: auto;
			@top-padding: 2%;
			padding: var(--cart-padding, @top-padding 0 0 0); // put bottom padding in .widget_shopping_cart_content to negate how overflow: scroll works.
			font-size: 100%;

			// Ipad safari fix.
			body[data-elementor-device-mode="tablet"].e--ua-safari & {
				// On safari (Ipad) there seems to be an issue with applying the proper
				// intrinsic (1fr) parent height value.
				height: calc(100% - @top-padding);
			}

			.woocommerce-cart-form__contents {
				height: auto;
				max-height: unset;
				overflow: visible;
				overflow-x: hidden;
				grid-row: 1;
			}

			.product-thumbnail {
				max-width: 70px;
				max-height: fit-content;
				grid-row: 1/2;

				img {
					display: block;
				}
			}

			.product-remove {
				grid-column: 4;
				justify-self: flex-end;
				border: 0;
				width: auto;
				height: auto;
				position: relative;

				// Override some def Elementor styles.
				> a:not(.elementor_remove_from_cart_button) {
					display: inline;
					z-index: initial;
					overflow: hidden;
					opacity: 1;
					position: relative;
				}

				&::before,
				&::after {
					display: none;
				}
			}

			.product-price {
				grid-column: 3;
				align-self: flex-start;
				padding-left: 0;

				.quantity {
					display: flex;
					min-height: 30px;
					align-items: center;

					.vamtam-quantity {
						position: relative;
						margin-right: 15px;

						svg {
							fill: currentColor;
							stroke: currentColor;
							stroke-width: 0;
							width: 1em;
							height: 1em;
							position: absolute;
							top: calc(50% - .5em);
							left: 55%;
							right: 0;
							bottom: 0;
							font-weight: 500;
							font-size: 16px;
							pointer-events: none;
						}

						select {
							&:focus {
								outline: 0;
								box-shadow: none;
							}

							appearance: none;
							padding: 0 1rem 0 1.5rem !important;
							min-height: 45px;
							height: 2rem;
							min-width: 4.5rem;
							max-width: 100%;
							transition: border .3s cubic-bezier(0.39,0.575,0.565,1);
							text-overflow: ellipsis;
							color: inherit;
							line-height: inherit;
							font-family: inherit;
							option {
								background-color: var(--cart-background-color);
							}
							// Overrides
							background: none !important;
							margin: 0 !important;
							padding-bottom: 0 !important;
							border-bottom: 1px solid var(--vamtam-accent-color-1);
						}
					}

					.woocommerce-Price-amount {
						margin-left: auto;
					}
				}
			}

			.product-name {
				grid-column: 2 / 3;
				padding: .6em 25px 0 25px;

				> a {
					.vamtam-line-clamp-2();
				}
			}

			.cart_item {
				display: grid;
				grid-template-rows: auto auto;
				grid-template-columns: max-content 50% minmax(20%, auto) 40px;
				grid-row-gap: 10px;
				padding: 15px 0;

				&:not(:last-of-type),
				&:not(:first-of-type) {
					margin: 0;
				}
				&:last-of-type {
					border: none;
				}
			}

			.vamtam-close {
				display: inline-block;
				width: 1em;
				height: 1em;
				stroke-width: 0;
				stroke: currentColor;
				fill: currentColor;
				&:hover {
					stroke: currentColor;
					fill: currentColor;
				}
				vertical-align: middle;
				* {
					pointer-events: none;
				}
			}

			> .vamtam-elementor-menu-cart__header,
			> .widget_shopping_cart_content .cart_item,
			> .widget_shopping_cart_content > :not(.woocommerce-cart-form__contents):not(.elementor-menu-cart__footer-buttons) {
				padding-left: 7%; // Should also be replicated in Elementor selector (woocommerce-menu-cart.php->padding for footer btns).
				padding-right: 7%; // Should also be replicated in Elementor selector (woocommerce-menu-cart.php->padding for footer btns).
			}

			.widget_shopping_cart_content {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr min-content min-content;

				// Empty side cart
				.woocommerce-mini-cart__empty-message {
					text-align: var( --empty-message-alignment, center );
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 80%;
					text-align: center;
					&:extend(.vamtam-font-h4);

					&::before {
						content: var(--vamtam-icon-bag);
						display: block;
						font-family: 'theme-icons';

						font-size: 90px;
						font-weight: 400;
						font-style: normal;
						font-variant: normal;
						line-height: 1;
						text-rendering: auto;
						-webkit-font-smoothing: antialiased;
						color: var( --vamtam-accent-color-1);
						margin-bottom: 20px;
					}
				}
			}

			.vamtam-elementor-menu-cart__header {
				display: flex;
				align-items: center;
				font-size: 16px;
				font-weight: bold;
				padding-bottom: 20px;

				.font-h4 {
					color: var(--vamtam-accent-color-1);
				}

				.elementor-menu-cart__close-button {
					margin: 0;
					margin-inline-start: auto;
					align-self: center;
					width: auto;
					height: auto;
					display: flex;
					flex-direction: column;
					justify-items: center;

					&::before,
					&::after {
						display: none;
					}
				}

				.elementor-menu-cart__close-button-custom {
					margin-bottom: 0;
					margin-top: 0;
					align-self: center;
				}

				span.label {
					margin-inline-end: 15px;
				}

				.vamtam-theme-close::before {
					content: "\e918";
				}
			}

			.elementor-menu-cart__footer-buttons {
				padding-top: var(--product-divider-gap, 0px);
				grid-row: 3;

				.elementor-button--checkout {
					order: 1;
				}

				.elementor-button--view-cart {
					order: 2;
				}

				.elementor-button--checkout,
				.elementor-button--view-cart {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				> a {
					line-height: 30px;
					height: 100%;
				}
			}

			//base style overrides so mobile styles are always used for menu cart.
			.product-name,
			.product-remove {
				display: flex;
				align-items: stretch;
				border: none;
				border-radius: 0;
			}

			.product-remove {
				grid-row: 1;
				grid-column: 3;
				bottom: 0;

				a.remove_from_cart_button {
					display: flex;
					flex-wrap: nowrap;
				}
			}
			.product-price {
				grid-column: 1/4;
				color: inherit;

				&, .amount {
					font-weight: inherit;
				}
			}
			.product-name {
				flex-direction: column;
				padding-top: 0;
				padding-left: 20px;
				padding-right: 25px;
			}
			.product-thumbnail {
				grid-row: 1/3;
				> a, > a > img {
					display: block;
				}
			}
			.cart_item {
				grid-template-rows: auto;
				grid-template-columns: ~"min(25%, 70px)" auto auto;
				padding-top: 40px;
				padding-bottom: 40px;
			}
		}

		.elementor-menu-cart__container {
			background-color: e("color( from var(--vamtam-accent-color-6) srgb r g b / 0.3 )");
			height: 100vh;
			width: calc(100vw - var(--vamtam-scrollbar-width, 0) );

			.elementor-menu-cart__subtotal {
				grid-row: 2;
				display: flex;
				padding:  30px 0;
				font-size: 16px;
				justify-content: space-between;
			}
		}
		&:not([class*="vamtam-subtotal-align-"]) {
			.amount {
				margin-left: auto;
			}
			.tax_label {
				margin-left: 5px;
			}
		}
		&.vamtam-subtotal-align- {
			&left, &center, &right {
				.elementor-menu-cart__subtotal {
					gap: 10px;
				}
			}
			&left .elementor-menu-cart__subtotal {
				justify-content: start;
			}
			&center .elementor-menu-cart__subtotal {
				justify-content: center;
			}
			&right .elementor-menu-cart__subtotal {
				justify-content: end;
			}
		}

		.elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter] {
			letter-spacing: normal;
			font-size: 9px;
			top: -0.6em;
			min-width: 1.55em;
			height: 1.55em;
			line-height: 1.45em;
		}

		// This fixes an issue where the card icon flickers on page-load when the "Show Empty" option is used.
		&.elementor-menu-cart--empty-indicator-hide .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"] {
			&, :before {
				display: none !important;
			}
		}

		// This fixes a bug where the "Show Empty" option is set to true but the empty cart is still getting hidden from js.
		&.hidden:not(.elementor-menu-cart--empty-indicator-hide) {
			display: block;
			visibility: visible;
		}
		// Above rule should not apply to sticky-header spacer el.
		.elementor-sticky__spacer &.hidden:not(.elementor-menu-cart--empty-indicator-hide) {
			display: none;
			visibility: hidden;
		}

		// Remove btn - Increased specificity.
		&:not(.elementor-menu-cart--show-remove-button-yes) .elementor-menu-cart__product-remove {
			display: none;
		}

		// Divider - Increased specificity.
		&.elementor-menu-cart--show-divider-yes .elementor-menu-cart__product:not(:last-of-type),
		&.elementor-menu-cart--show-divider-yes .elementor-menu-cart__products,
		&.elementor-menu-cart--show-divider-yes .elementor-menu-cart__subtotal {
			border-bottom-width: 1px;
			border-bottom-style: solid;
		}

		.elementor-menu-cart__container {
			.elementor-menu-cart__main {
				 .vamtam-close-cart {
					font-size: var(--cart-close-icon-size, 40px);
					color: var(--cart-close-button-color);
					&:hover {
						color: var(--cart-close-button-hover-color);
					}
				}
			}
		}

		&.toggle-icon--vamtam-theme {
			.elementor-menu-cart__toggle .elementor-button-icon {
				i::before {
					font-family: 'theme-icons';
					content: var(--vamtam-icon-bag);
				}
			}
		}

		.elementor-menu-cart__toggle_button {
			flex-direction: row-reverse;

			.elementor-button-icon {
				margin-right: 10px;
			}
		}

		// This is to keep the items number vertically centered on the cart toggle (bubble).
		&.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter] {
			line-height: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		// This is to override the global button options (if set).
		.elementor-menu-cart__toggle .elementor-button:focus {
			background-color: var( --toggle-button-hover-background-color, transparent);
		}

		// Free Shipping Bar.
		.vamtam-free-shipping-progress-bar {
			grid-row: 3;
			+ .elementor-menu-cart__subtotal {
				// grid-row: 2;
				+ .elementor-menu-cart__footer-buttons {
					grid-row: 4;
				}
			}
		}

		input.vamtam-quantity-input {
			text-align: center;
			outline: none;
			min-height: 30px;
			background-color: transparent;
		}

		// Editor opts with vars.
		.elementor-menu-cart__wrapper {
			// Cart Toggle
			.elementor-menu-cart__toggle {
				.elementor-button:is(:hover, :focus) {
					border-style: var(--toggle-button-border-style, solid);
					border-width: var(--toggle-button-border-width, 1px);
					border-radius: var(--toggle-button-border-radius, 0);
				}
				&:hover {
					:is(i, svg) {
						color: var(--toggle-button-icon-hover-color, var(--vamtam-btn-hover-bg-color));
					}
				}
			}
			// Close Cart Btn.
			.elementor-menu-cart__close-button {
				.vamtam-close-cart {
					color: var(--cart-close-button-color, currentColor);
					font-size: var(--cart-close-icon-size, 20px);
				}
				&:hover .vamtam-close-cart {
					color: var(--cart-close-button-hover-color, currentColor);
				}
			}
			// Price
			.elementor-menu-cart__product-price.product-price .quantity .amount {
				color: var(--product-price-color, inherit);
			}
			// Remove Product
			.product-remove {
				.vamtam-close.vamtam-trash {
					font-size: var(--remove-item-button-size, calc(1em - 3px));
					color: var(--remove-item-button-color, var(--vamtam-accent-color-6, currentColor));
					&:hover {
						color: var(--remove-item-button-hover-color, var(--remove-item-button-color, var(--vamtam-accent-color-6, currentColor)));
					}
				}
			}
			// Divider
			.elementor-menu-cart__container .elementor-menu-cart__main {
				.elementor-menu-cart__product,
				.product-price::before {
					border-color: var(--divider-color, var(--vamtam-accent-color-7));
					border-style: var(--divider-style, solid);
					border-width: 0 0 var(--divider-width, 1px);
				}
				.elementor-menu-cart__product {
					&:not(:first-of-type){
						margin-top: var(--product-divider-gap, 20px);
					}
					&:not(:last-of-type){
						margin-bottom: var(--product-divider-gap, 20px);
					}
				}
			}
			// Footer Btns
			.elementor-menu-cart__footer-buttons {
				.elementor-button--checkout,
				.elementor-button--view-cart {
					align-content: center;
					border-radius: var(--cart-footer-buttons-border-radius, var(--vamtam-btn-border-radius, 0 ) );
					&:hover {
						border-radius: var(--cart-footer-buttons-border-radius, var(--vamtam-btn-hover-border-radius, var(--vamtam-btn-border-radius, 0 ) ) );
					}
				}
				// Checkout
				.elementor-button.elementor-button--checkout {
					background-color: var(--checkout-button-background-color, var(--vamtam-btn-bg-color));
					color: var(--checkout-button-text-color, var(--vamtam-btn-text-color));
					&:hover {
						background-color: var(--checkout-button-hover-background-color, var(--vamtam-btn-hover-bg-color));
						color: var(--checkout-button-hover-text-color, var(--vamtam-btn-hover-text-color));
					}
				}

				// View Cart
				.elementor-button.elementor-button--view-cart {
					background-color: var(--view-cart-button-background-color, var(--vamtam-btn-bg-color));
					color: var(--view-cart-button-text-color, var(--vamtam-btn-text-color));
					&:hover {
						background-color: var(--view-cart-button-hover-background-color, var(--vamtam-btn-hover-bg-color));
						color: var(--view-cart-button-hover-text-color, var(--vamtam-btn-hover-text-color));
					}
				}

			}
			// Subtotal
			.elementor-menu-cart__container .elementor-menu-cart__main .elementor-menu-cart__subtotal {
				color: var(--menu-cart-subtotal-color, var(--vamtam-accent-color-6));
				border-color: var(--subtotal-divider-color, var(--vamtam-accent-color-7));
				border-style: var(--subtotal-divider-style, solid);
				border-width: var(--subtotal-divider-top-width, 0) var(--subtotal-divider-right-width, 0) var(--subtotal-divider-bottom-width, 1px) var(--subtotal-divider-left-width, 0);
			}
		}
	}
}
.woocommerce {
	&.woocommerce-cart,
	&.woocommerce-checkout {
		.elementor-widget-woocommerce-menu-cart {
			&.vamtam-has-hide-cart-checkout {
				pointer-events: none;
			}
		}
	}
}