@import "variables";
.cart-modal-adding {
	font-size: 14px;
	@include transition();
	.add-to-cart {
		padding-bottom: 24px;
		.atc-icon {
			position: relative;
			display: block;
			width: 48px;
			height: 48px;
			margin: 0 auto 24px;
			.atc-icon__left {
				position: absolute; top: 0; left: 0;
				overflow: hidden;
				width: 50%;
				height: 100%;
				&:before {
					content: '';
					position: absolute; top: 0; left: 0;
					width: 100%;
					height: 100%;
					transform-origin: 100% 50%;
				}
			}
			.atc-icon__right {
				position: absolute; top: 0; right: 0;
				overflow: hidden;
				width: 50%;
				height: 100%;
				&:before {
					content: '';
					position: absolute; top: 0; left: 0;
					width: 100%;
					height: 100%;
					transform-origin: 0 50%;
				}
			}
			&.in {
				.atc-icon__left {
					&:before {
						background: rgba(255,255,255,1);
						animation: showCkeck .25s linear .25s 1;
						animation-fill-mode: forwards;
					}
				}
				.atc-icon__right {
					&:before {
						background: rgba(255,255,255,1);
						animation: showCkeck .25s linear 0s 1;
						animation-fill-mode: forwards;
					}
				}
			}
			@keyframes showCkeck {
				0% {
					transform: none;
				}
				100% {
					transform: rotate(180deg);
				}
			}
			svg {
				display: block;
				width: 48px;
				height: 48px;
				margin: 0 auto;
			}
			.color-green { color: #2DB92D !important; }
		}
	}
	.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 {
				display: none !important;
				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;
				}
				.collapser-body {
					display: block !important;
				}
			}
		}
		.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 {
			font-size: 20px;
		}
		.cma-added__body {
			position: relative;
			@include transition();
			.cma-item__body {
				font-size: 16px;
				@media(max-width: 449px){
					text-align: right;
				}
			}
		}
		.cma-item {
			.cma-item__image {
				.img-aligner {
					@media(max-width: 576px){
						display: none;
					}
				}
			}
			&.new {
				position: absolute; left: 0; top: 0;
				z-index: 55;
				width: 100%;
			}
		}
	}
	.cma-offer {
		padding-top: 40px;
		padding-bottom: 24px;
		.cma-offer__head {
			padding-left: 160px;
			font-size: 20px;
			color: #9B9B9B;
			@media( max-width: 576px ){
				padding-left: 0;
			}
		}
		.cma-offer__body {
			position: relative;
			@include transition();
		}
		.cma-item {
			grid-template-rows: auto auto 1fr;
			grid-template-columns:  160px 1fr;
			grid-template-areas:    "title 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__title {
				padding-left: 160px;
				@media( max-width: 576px ){
					padding-left: 0;
					text-align: right;
				}
			}
			.cma-item__body {
				@media( max-width: 576px ){
					text-align: right;
				}
				.cma-item__pricebox {
					.pricebox__body {
						.price {
							@media( max-width: 576px ) {
								align-items: flex-end;
							}
						}
						@media( max-width: 576px ){
							display: flex;
							flex-direction: column;
							.price {
								flex-direction: column;
								order: 2;
								.price__discount {
									margin-right: 0;
									margin-bottom: 6px;
								}
							}
							.price-mark {
								width: 140px;
								margin-left: auto;
								margin-bottom: 8px;
								order: 1;
								line-height: 1.25;
							}
						}
					}
				}
			}
			&.new {
				opacity: 0;
				animation: cmaNewAnimate .5s linear .25s forwards;
				@keyframes cmaNewAnimate {
					0%   {
						opacity: 0;
					}
					100% {
						opacity: 1;
					}
				}
			}
		}
	}
}

/* TODO: Legacy? Check! */
.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;
				}
			}
		}
	}
}

//NEW
.cart-delivery-error {
	margin: 0 0 16px;
	font-size: 14px;
	@media(max-width: 767px){
		font-size: 16px;
	}
	color: #333333;
	& + .cart-delivery-error {
		margin-top: 16px;
	}
	.cart-delivery-error__list {
		margin: 0;
		padding: 0;
		list-style: none;
		color: #7E93B2;
		li {}
		@media(max-width: 767px){
			display: flex;
			flex-wrap: wrap;
			margin: 0 -8px;
			li {
				padding-left: 8px;
				padding-right: 8px;
			}
		}
	}
	dt {
		margin: 0;
		padding: 0;
		font-weight: bold;
		color: #7A8EAC;
	}
	dd {
		margin: 0;
		padding: 0;
		font-weight: bold;
	}

	&.errors {
		.errors__list {
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 15px;
			line-height: 1.25;
			li {
				position: relative;
				padding-left: 12px;
				&:before {
					content: '';
					background: #333;
					position: absolute; top: 9px; left: 0;
					display: block;
					width: 4px;
					height: 4px;
					@include border-radius(50%);
				}
				&:not(:first-child){
					margin-top: 12px;
				}
			}
		}
	}
}