//	=================
//    	Imports
//	=================

@import '../../../assets/base/color_variables';   	// Color Variables
@import '../../../assets/base/fonticons';   			// Fonticons Variables
@import '../../../assets/base/urls';   				// URLS Variables
@import '../../../assets/base/utilities_variables';  // Utilities Variables

li {
	list-style: none;
}
a {
	text-decoration: none;
}
/*  PRODUCTS
----------------------------*/
#product {
	ul {
		li {
			margin: $m-0 $m-0 $m-10 $m-10;
			padding: 15px;
			box-shadow: $shadow-14;
			background-color: $white;
			border-radius: $br-4;
			-webkit-transition: -webkit-transform .1s ease;
			-moz-transition: -webkit-transform .1s ease;
			-o-transition: -webkit-transform .1s ease;
			-ms-transition: -webkit-transform .1s ease;
			transition: transform .1s ease;
			a {
				.media {
					img {
						width: 45px;
						border-radius: $br-6;
					}
				}
				display: block;
				color: $additional-color-11;
				h3 {
					margin-top: $m-5;
				}
				h5 {
					font-size: 15px;
					font-weight: 600;
				}
				p.cat {
					font-size: 12px;
				}
			}
			&:hover {
				background-color: $color_54;
			}
		}
	}
}
#product.active {
	ul {
		li {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
			filter: alpha(opacity = 40);
			opacity: .4;
			a {
				.media {
					img {
						width: 57px;
						border-radius: 50%;
					}
				}
			}
		}
		li.active {
			z-index: 2;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity = 100);
			opacity: 1;
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			-webkit-transform: scale(.6);
			-moz-transform: scale(.6);
			-o-transform: scale(.6);
			-ms-transform: scale(.6);
			transform: scale(.6);
		}
	}
}
/*  BASKET
----------------------------*/
.basket {
	position: $pos-rel;
	.basket_list {
		width: 220px;
		background-color: $white;
	}
	/* .head */
	.head {
		overflow: hidden;
		padding: 14px 7px;
		border: 1px solid $light-gray;
		border-radius: 4px;
		background-color: $white;
		box-shadow: $shadow-19;
	}
	ul {
		padding: 21px 0;
		margin-top: $m-10;
		margin-bottom: 0;
		border: 1px solid $light-gray;
		border-radius: 4px;
		background-color: $white;
		box-shadow: $shadow-19;
		li {
			position: $pos-rel;
			display: flex;
			justify-content: space-between;
			margin: $m-0 12px $m-0 12px;
			padding-bottom: 15px;
			padding-top: 15px;
			&:first-child {
				padding-top: 15px;
			}
			&:not(:last-child) {
				border-bottom: 1px $dash $light-gray;
			}
			&:hover {
				border-bottom-color: $color_103;
				span.name {
					width: 146px;
				}
				button.delete {
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
					filter: alpha(opacity = 100);
					opacity: 1;
				}
			}
			span.name {
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				-o-text-overflow: ellipsis;
				-ms-text-overflow: ellipsis;
				text-overflow: ellipsis;
				-webkit-transition: width .2s ease;
				-moz-transition: width .2s ease;
				-o-transition: width .2s ease;
				-ms-transition: width .2s ease;
				transition: width .2s ease;
			}
			input.count {
				margin: 3px 2px 0 0;
				width: 25px;
				line-height: 20px;
				text-align: center;
				border: 0;
				border-radius: 3px;
				background-color: $color_118;
			}
			button.delete {
				position: absolute;
				right: 30px;
				bottom: 16px;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: alpha(opacity = 0);
				opacity: 0;
				width: 20px;
				line-height: 20px;
				height: 20px;
				text-align: center;
				font-size: 11px;
				border: 0;
				color: $black;
				background-color: $color_200;
				border-radius: 3px;
				cursor: pointer;
				-webkit-transition: opacity .2s ease;
				-moz-transition: opacity .2s ease;
				-o-transition: opacity .2s ease;
				-ms-transition: opacity .2s ease;
				transition: opacity .2s ease;
			}
		}
	}
	.droptext {
		font-size: 20px;
		color: $black;
	}
}