@import "../../../../../css/_mixins.scss";
@import "../../../../../css/_trx_addons.vars.scss";

.sc_layouts_cart {
	position:relative;
	z-index:2000;
}
.sc_layouts_cart_icon,
.sc_layouts_cart_details {
	cursor:pointer;
}
.sc_layouts_cart_items_short {
	display:none;
	font-size:9px;
	background-color:#333;
	color: #fff;
	/*
	Old way: don't fit big numbers
	@include square(15px);
	@include border-round;
	@include abs-rt(-5px, -5px);
	*/
	/* New way: stretch to fit any number */
	min-width: 15px;
	min-height: 15px;
	line-height: 15px;
	text-align: center;
	padding: 0 2px;
	@include border-box;
	@include border-radius(8px);
	@include abs-rt;
	@include translate(50%,-33%);

	pointer-events: none;
}

.sc_layouts_row_type_compact {
	.sc_layouts_cart_details {
		display:none;
	}
	.sc_layouts_cart_items_short {
		display:block;
	}
}

/* Widget: Cart */
.sc_layouts_cart_widget {
	display:none;
	text-align:left;
	@include abs-rt(-2em, 4em, 2);
	width: 280px;
	padding: 1em;
	border: 1px solid #ddd;
	background-color: #fff;
	color: #888;
	@include border-box;
}
.sc_layouts_cart_widget:after {
	content: ' ';
	display:block;
	@include abs-rt(2.5em, 0);
	@include box(8px, 8px);
	margin: -5px 0 0 -4px;
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
	background-color:#fff;
	@include rotate(45deg);
}
.sc_layouts_cart_widget .widget_shopping_cart {
	text-align: left !important;
	@include font(0.9333em, 1.5em);
	
}
.sc_layouts_cart_widget .cart_list {
	max-height: 215px;
	overflow-y:auto;
	overflow-x:hidden;
}
.sc_layouts_cart_widget p {
	margin-bottom:0;
}
.sc_layouts_cart_widget p+p {
	margin-top:0.75em;
}
.sc_layouts_cart_widget .variation {
	display: none;
}

.sc_layouts_cart_panel {

	--sc_layouts-cart-panel-padding: 1.5em;
	--sc_layouts-cart-panel-padding-half: calc( var(--sc_layouts-cart-panel-padding) / 2 );
	--sc_layouts-cart-panel-padding-double: calc( var(--sc_layouts-cart-panel-padding) * 2 );
	--sc_layouts-cart-panel-padding-triple: calc( var(--sc_layouts-cart-panel-padding) * 2.5 );

	.sc_layouts_panel_inner {
		padding: var(--sc_layouts-cart-panel-padding);
	}
	.sc_layouts_cart_panel_header {
		@include abs-lt;
		width: 100%;
		@include border-box;
		padding: var(--sc_layouts-cart-panel-padding-half) var(--sc_layouts-cart-panel-padding);
		background-color: #eee;
	}
	.sc_layouts_cart_panel_title {
		margin:  0;
	}
	.sc_layouts_cart_items_short {
		display: inline-block;
		vertical-align: top;
		margin-left: 0.3em;
		font-size: 0.5em;
		@include border-round;
		position: static;
		@include transform-none;
	}
	.sc_layouts_cart_panel_widget {
		padding-top: var(--sc_layouts-cart-panel-padding-triple);

		.widget_shopping_cart {
			overflow: hidden;

			.widget_shopping_cart_content {
				overflow-x: hidden;
				overflow-y: scroll;
				max-height: calc( 100vh - 15em );
				margin-right: -16px;
			}

			ul.cart_list li {
				padding: 0 1.5em 1em 0;

				a:not(.remove) {
					font-size: 1.15em;
				}
				a.remove {
					left: auto;
					right: 0;
					margin-top: 0;
					text-align: center;
				}
				img {
					@include border-sharp;
					width: 5em;
					margin-right: 1em;
				}
				.variation {
					display: none;
				}
			}
			.woocommerce-mini-cart__total,
			.woocommerce-mini-cart__buttons {
				@include abs-lb(var(--sc_layouts-cart-panel-padding), var(--sc_layouts-cart-panel-padding));
				right: var(--sc_layouts-cart-panel-padding);
			}
			.woocommerce-mini-cart__total {
				bottom: calc( var(--sc_layouts-cart-panel-padding) + 4em );
				width: calc( 100% - var(--sc_layouts-cart-panel-padding-double) );
				text-align: right;
			}
			.woocommerce-mini-cart__buttons {
				@include flex;
				@include flex-justify-content(space-between);
				.button {
					width: 49%;
					text-align: center;
				}
			}
		}
	}
}

.sc_layouts_cart_link {
	display: block;
}

.sc_layouts_cart_button_wrap {
	@include fixed-rb(2em, 2em, 100100);
	@include transition-properties(bottom,opacity,transform);
	@include translateY(100px);
	opacity: 0;
	pointer-events: none;

	&.sc_layouts_cart_button_showed {
		@include translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.trx_addons_scroll_to_top_show & {
		bottom: 6em;
	}

	.sc_layouts_cart_items_short {
		display: block;
		@include transform-none;
	}
	.sc_layouts_cart_widget {
		display: none;
	}
	&.sc_layouts_cart_button_preview .sc_layouts_cart_widget {
		display: none !important;
	}
	.sc_layouts_cart_button_icon {
		display: block;
		@include font(1.5em, 1em);
		@include square(2em);
		@include border-round;
		@include box-shadow(0 0 3px rgba(0,0,0,.15));
		background-color: #efa752;
		color: #fff;
		position: relative;
		z-index: 1;
		@include transition-colors;
	}

	.sc_layouts_cart_button_sonar {
		display: block;
		background-color: #efa752;
		@include abs-pos(-10px, -10px, -10px, -10px);
		@include border-round;
		@include backface-hidden;
		@include perspective(800px);
		@include animation(sc-cart-button-sonar 2s ease infinite);
	}
}


/* Hotspot animation */
@-webkit-keyframes sc-cart-button-sonar {
	0% {
		opacity: 0;
		@include scale(.2);
	}
	50% {
		opacity: .8;
	}
	100% {
		opacity: 0;
		@include scale(1);
	}
}
@keyframes sc-cart-button-sonar {
	0% {
		opacity: 0;
		@include scale(.2);
	}
	50% {
		opacity: .8;
	}
	100% {
		opacity: 0;
		@include scale(1);
	}
}

//for trx_addons_filter_allow_sc_styles_in_elementor - trx_sc_layouts_cart
.sc_layouts_column .trx_addons_customizable.sc_layouts_panel.sc_layouts_cart_preview_init .widget {
	text-align: left;
}

body.trx_addons_customizable_theme,
.trx_addons_customizable {
	&.sc_layouts_cart,
	&.sc_layouts_cart > .sc_layouts_cart_link {
		@include flex;
		@include flex-direction(row);
		@include flex-justify-content(flex-start);
		@include flex-align-items(center);
		@include flex-wrap(nowrap);
		text-align: left;
		gap: 0.5em;
	}
	&.sc_layouts_cart {
		.sc_layouts_item_details {
			margin-left: 0;
			text-align: unset;
		}
	}
	.sc_layouts_cart_icon_custom {
		@include inline-flex;
		vertical-align: top;
		@include flex-justify-content(center);
		@include flex-align-items(center);
	}
	.sc_layouts_cart_icon > svg,
	.sc_layouts_cart_button_icon > svg,
	.sc_layouts_cart_widget_close svg,
	.trx_addons_button_close svg,
	.woocommerce.widget_shopping_cart a.remove > svg {
		display: inline-block;
		width: 1em;
		height: auto;
		@include transition-property(fill);
	}

	.sc_layouts_cart_icon > svg,
	.sc_layouts_cart_widget_close svg,
	.sc_layouts_item_details_line2,
	.trx_addons_button_close .sc_layouts_cart_widget_close_icon,
	.trx_addons_button_close svg,
	.sc_layouts_cart_item_close_icon,
	.woocommerce.widget_shopping_cart a.remove svg {
		@include transition-all;
	}

	// .sc_layouts_cart_panel_widget .total {
	.woocommerce.widget_shopping_cart .total {
		@include flex;
		@include flex-align-items(center);
		@include flex-justify-content(space-between);
		margin: 1em 0;
	}

	&.sc_layouts_cart_dropdown_remove_decode .sc_layouts_cart_widget:after {
		display: none;
	}

	&.sc_layouts_cart_panel .sc_layouts_panel_inner {
		@include flex;
		width: 100%;
		padding: 0;

		.sc_layouts_cart_panel_header {
			position: static;
			width: auto;
			min-width: 100%;
		}

		.sc_layouts_cart_panel_widget {
			@include flex;
			@include flex-direction(column);
			width: 100%;
			padding-top: 0;

			.widget_shopping_cart {
				@include flex;
				@include flex-basis(100%);
				width: 100%;
				box-sizing: border-box;
				padding: var(--sc_layouts-cart-panel-padding);
			}

			.widget_shopping_cart_content {
				@include flex;
				@include flex-direction(column);
				// width: calc(100% + 17px);
				width: 100%;
				max-height: none;
				overflow-y: hidden;
				margin: 0;

				.woocommerce-mini-cart.product_list_widget {
					@include flex-basis(100%);
					overflow: hidden auto;
					// margin-right: -17px;
				}

				.woocommerce-mini-cart__total,
				.woocommerce-mini-cart__buttons {
					position: static;
					@include flex-shrink(0);
					width: 100%;
				}
			}
		}
	}

	//Badge Position
	&.trx_addons_sc_cart_product_count_badge {

		.sc_layouts_item_details_line2 {
			display: none;
		}

		&.sc_layouts_cart > .sc_layouts_cart_items_short {
			display: block;
			inset: auto;
			@include transform(none);
			@include transition-all;
		}

		&.trx_addons_sc_cart_badge_position_top_left > .sc_layouts_cart_items_short {
			@include abs-lt;
		}

		&.trx_addons_sc_cart_badge_position_top_right > .sc_layouts_cart_items_short {
			@include abs-rt;
		}

		&.trx_addons_sc_cart_badge_position_bottom_left > .sc_layouts_cart_items_short {
			@include abs-lb;
		}

		&.trx_addons_sc_cart_badge_position_bottom_right > .sc_layouts_cart_items_short {
			@include abs-rb;
		}
	}

	&.sc_layouts_cart .sc_layouts_item_details_line1 {
		@include transition-colors;
	}

	.woocommerce.widget_shopping_cart .cart_list li a.remove {
		@include flex-shrink(0);
		position: static;
		margin: 0 6px 0 0;
		text-align: center
	}

	.woocommerce.widget_shopping_cart ul.cart_list li {
		@include flex;
		@include flex-align-items(flex-start);
		padding: 0;
	}

	//Cart Item Close Icon Alignment Right
	&.sc_layouts_cart_item_close_icon-right li a.remove {
		order: 10;
	}

	//Cart Item Image Alignment
	&.sc_layouts_cart_item_image-right .trx_addons_sc_layouts_cart_mini_cart_item_link_image,
	&.sc_layouts_cart_item_image-right .trx_addons_sc_layouts_cart_mini_cart_item_image {
		order: 10;
	}

	//Icon Display
	&.sc_layouts_cart_buttons-block {
		.woocommerce-mini-cart__buttons {
			flex-wrap: wrap;
		}

		&.sc_layouts_cart_panel .sc_layouts_cart_panel_widget .widget_shopping_cart .woocommerce-mini-cart__buttons .button {
			width: 100%;
		}

		.woocommerce.widget_shopping_cart .buttons a {
			display: block;
			text-align: center;
		}

		.woocommerce.widget_shopping_cart .buttons .button {
			margin-left: 0;
			margin-right: 0;
		}

		.widget.woocommerce .button:last-child {
			margin-bottom: 0;
		}
	}

	.sc_layouts_panel_inner .widget.woocommerce .button + .button {
		margin-left: 0;
		margin-right: 0;
	}

	// Preview - On
	&.sc_layouts_cart_preview_init .sc_layouts_cart_widget {
		display: block;
	}

	&.sc_layouts_panel.sc_layouts_cart_preview_init {
		text-align: left;
	}

	&.sc_layouts_panel.sc_layouts_effect_slide.sc_layouts_cart_panel.sc_layouts_cart_preview_init {
		opacity: 1;
		@include transform(none);
	}

	&.sc_layouts_panel_hide_content.sc_layouts_cart_preview_init.inited {
		@include transform(none);
		@include transition(none);
		background-color: rgba(0, 0, 0, 0.5);
	}

	.woocommerce.widget_shopping_cart ul.cart_list .mini_cart_item,
	&.sc_layouts_panel ul.cart_list .mini_cart_item,
	&.sc_layouts_cart ul.cart_list .mini_cart_item {
		--var-trx_addons_sc_layouts_cart_item_close_color: #e05100;

		a.remove {
			color: var(--var-trx_addons_sc_layouts_cart_item_close_color) !important;
			background-color: transparent;	// !important;
		}
	}

	&.trx_addons_sc_layouts_cart_general_parent.elementor-element[data-id],
	&.sc_layouts_cart.sc_layouts_cart_preview_init {
		z-index: 100010;
	}

	//mini cart item update settings
	&.trx_addons_sc_layouts_cart_mini_cart_item_inner {
		@include flex;
		@include flex-align-items(flex-start);
		@include flex-grow(1);

		& > .trx_addons_sc_layouts_cart_mini_cart_item_image_link,
		& > .trx_addons_sc_layouts_cart_mini_cart_item_image {
			@include flex-align-self(flex-start);

			a {
				display: inline-block;
			}
		}
	}

	.woocommerce.widget_shopping_cart {
		ul.product_list_widget li .trx_addons_sc_layouts_cart_mini_cart_item_inner img {
			float: none;
			vertical-align: top;
		}

		ul.cart_list li img,
		&.sc_layouts_cart_panel .sc_layouts_cart_panel_widget .widget_shopping_cart ul.cart_list li img {
			margin: 0;
		}

		ul.cart_list li .trx_addons_sc_layouts_cart_mini_cart_item_image,
		ul.cart_list li .trx_addons_sc_layouts_cart_mini_cart_item_link_image {
			@include flex-shrink(0);
			margin: 0 0.5em 0 0;
		}

		ul.product_list_widget li:nth-child(n + 2) {
			margin-top: 12px;
		}

		ul.product_list_widget li span .amount {
			font-size: inherit;
			color: inherit;
			font-weight: inherit;
		}

		.quantity {
			margin: 0;
		}
	}

	//Vertical Alignment
	&.sc_layouts_cart_item_va-center .trx_addons_sc_layouts_cart_mini_cart_item_inner {
		@include flex-align-items(center);
	}

	&.sc_layouts_cart_item_va-bottom .trx_addons_sc_layouts_cart_mini_cart_item_inner {
		@include flex-align-items(flex-end);
	}

	.trx_addons_sc_layouts_cart_mini_cart_item_name {
		display: inline-block;
		@include transition-colors;
	}

	.trx_addons_sc_layouts_cart_mini_cart_item_content {
		@include flex-grow(1);
	}
}

//admin panel fix
// .elementor-control.elementor-control-trx_addons_cart_dropdown_empty_style_typography_typography,
// .elementor-control.elementor-control-trx_addons_cart_type_panel_empty_style_typography_typography {
// 	padding-bottom: 0;
// }