@import "src/css/alvadi/variables";
.cart-modal-adding {
	font-size: 14px;
	@include transition();
	.cma-item {
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-template-columns:  160px 1fr;
		grid-template-areas:    "image title"
                                "image body"
						        "image description";
		@media( max-width: 576px ){
			grid-template-columns:  100px 1fr;
			grid-template-areas:    "title title"
                                    "image body"
						            "description description";
		}
		& + .cma-item {
			margin-top: 28px;
		}
		.cma-item__title {
			grid-area: title;
			margin-bottom: 12px;
			font-size: 20px;
			line-height: 1.4;
			font-weight: bold;
			@media(max-width: 767px){
				font-size: 16px;
			}
			a {
				border: 0;
				color: $color_dark;
				text-decoration: none;
				&:hover {
					color: $blue;
				}
			}
		}
		.cma-item__image {
			grid-area: image;
			max-width: 140px;
			margin-right: 20px;
			margin-bottom: 12px;
			.spare-paired {
				background: #EEF1F5;
				margin-bottom: 2px;
				padding: 2px;
				@media (min-width: 768px) {
					text-align: center;
					.icon {
						position: relative;
						display: inline-block;
						vertical-align: top;
						img {
							display: block;
							height: 32px;
						}
						span {
							background: #D5E6F6;
							position: absolute; top: 50%;
							padding: 0 2px 1px;
							font-size: 12px;
							font-weight: bold;
							@include transform(translateY(-50%));
						}
						&.left {
							span {
								right: 100%;
								margin-right: 2px;
							}
						}
						&.right {
							span {
								left: 100%;
								margin-left: 2px;
							}
						}
					}
				}
				@media (max-width: 767px) {
					.icon {
						display: flex;
						align-items: center;
						img {
							display: block;
							height: 24px;
						}
						span {
							font-size: 11px;
							font-weight: bold;
						}
						&.left {
							justify-content: flex-end;
							img {
								order: 2;
							}
							span {
								order: 1;
								margin-right: 3px;
							}
						}
						&.right {
							span {
								margin-left: 3px;
							}
						}
					}
				}
			}
		}
		.cma-item__body {
			grid-area: body;
		}
		.cma-item__pricebox {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 6px;
			@media(max-width: 767px){
				flex-direction: column;
			}
			@media(max-width: 449px){
				text-align: right;
			}
			.pricebox__body {
				flex-grow: 1;
				margin-bottom: 6px;
			}
			.pricebox__side {
				margin-bottom: 6px;
			}
			.price {
				display: flex;
				align-items: center;
				@media(max-width: 449px){
					justify-content: flex-end;
				}
				.price__discount {
					display: inline-block;
					vertical-align: middle;
					margin-right: 8px;
					font-size: 12px;
					line-height: 16px;
					s {
						background: #ccc;
						display: inline-block;
						min-width: 54px;
						padding: 2px 4px;
						text-align: center;
					}
					i {
						background: $red;
						display: inline-block;
						min-width: 54px;
						padding: 2px 4px;
						color: $white;
						font-style: normal;
						text-align: center;
						@media(max-width: 359px){
							display: none;
						}
					}
				}
				.price__actual {
					display: inline-block;
					vertical-align: middle;
					margin-top: -3px;
					font-size: 24px;
					line-height: normal;
					font-weight: bold;
					color: $blue;
					small {
						position: relative;
						top: -1px;
						font-weight: normal;
						font-size: 12px;
						color: $color_gray_70;
					}
				}
			}
		}
		.cma-item__description {
			grid-area: description;
			min-width: 0;
		}
		.collapser {
			.collapser-header {
				//color: $color_gray_50;
				span {
					//border-bottom: 1px dashed $color_gray_30;
				}
				a {
					border-bottom-color: transparent;
					white-space: nowrap;
					font-weight: 500;
					&:hover {
						border-bottom-color: $blue;
					}
				}
			}
			.collapser-body {
				table {
					width: 100%;
					tr {
						td {
							padding: 4px 0;
							&:not(:first-child){
								padding-left: 16px;
							}
						}
						&:not(:first-child){
							td {
								border-top: 1px dashed $color_gray_20;
							}
						}
					}
				}
			}
			&.collapser-open {
				.collapser-header {
					display: none;
				}
			}
		}
		.btn {
			padding: 6px 12px 8px;
			font-size: 16px;
			line-height: 1.5;
		}


		&.removed {
			position: absolute; left: 0; top: 0;
			width: 100%;
		}

	}

	.cma-added {
		.cma-added__head {}
		.cma-added__body {
			position: relative;
			@include transition();
			.cma-item__body {
				font-size: 16px;
				@media(max-width: 449px){
					text-align: right;
				}
			}
		}
		.cma-item.new {
			position: absolute; left: 0; top: 0;
			z-index: 55;
			width: 100%;
		}
	}
	.cma-offer {
		padding-top: 40px;
		padding-bottom: 24px;
		.cma-offer__head {}
		.cma-offer__body {
			position: relative;
			@include transition();
		}
		.cma-item.new {
			opacity: 0;
			animation: cmaNewAnimate .5s linear .25s forwards;
			@keyframes cmaNewAnimate {
				0%   {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
		}
	}
}


//OLD
.added-to-cart {
	.atc-item {
		display: flex;
		font-size: 16px;
		.atc-item__image {
			align-self: center;
			width: 160px;
			min-width: 160px;
			margin-right: 32px;
			img {
				display: block;
				max-width: 100%;
				max-height: 250px;
				margin: 0 auto;
			}
		}
		.atc-item__description {
			.btn {
				padding: 10px 16px;
			}
		}
		@media(max-width: 767px){
			flex-direction: column;
			.atc-item__image {
				align-self: flex-start;
				width: auto;
				max-width: 200px;
				margin: 0 0 24px 0;
			}
			.atc-item__description {}
		}
	}

	.atc-item__data {
		margin-bottom: 16px;
		font-size: 14px;
		[data-toggle="collapse"]{
			border-bottom: 1px dashed $color_gray_30;
			color: $color_gray_50;
			&[aria-expanded="true"]{
				display: none;
			}
		}
		table {
			width: 100%;
			tr {
				td {
					padding: 4px 0;
					&:not(:first-child){
						padding-left: 16px;
					}
				}
				&:not(:first-child){
					td {
						border-top: 1px dashed $color_gray_20;
					}
				}
			}
		}
	}
	.atc-item-price {
		margin-bottom: 16px;
		font-size: 14px;
		.atc-item-price__head {
			margin-bottom: 2px;
			font-size: 14px;
		}
		.atc-item-price__body {
			.discount {
				display: inline-block;
				vertical-align: middle;
				margin-right: 8px;
				font-size: 12px;
				line-height: 16px;
				s {
					background: #ccc;
					display: inline-block;
					min-width: 54px;
					padding: 2px 4px;
					text-align: center;
				}
				i {
					background: $red;
					display: inline-block;
					min-width: 54px;
					padding: 2px 4px;
					color: $white;
					font-style: normal;
					text-align: center;
				}
			}
			.price {
				display: inline-block;
				vertical-align: middle;
				margin-top: -3px;
				font-size: 24px;
				line-height: normal;
				font-weight: bold;
				color: $blue;
				small {
					position: relative;
					top: -1px;
					font-weight: normal;
					font-size: 12px;
					color: $color_gray_70;
				}
			}
		}
	}
}