.ct-header-cart {
	position: relative;

	&:not([data-count='0']) {
		&:before {
			position: absolute;
			content: attr(data-count);
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 16px;
			height: 16px;
			top: -5px;
			right: -5px;
			padding: 0 3px;
			border-radius: 10px;
			font-size: 10px;
			font-weight: 600;
			color: var(--cartBadgeText);
			background: var(--cartBadgeBackground);
			// display: none;
		}

		&.ct-added {
			&:before {
				animation: 0.6s ease-in-out 0.12s normal both 1 bounce-in;
			}
		}

		&:hover {
			.ct-cart-content:not(.ct-initial) {
				opacity: 1;
				visibility: visible;
				transform: translate3d(0, 0, 0);
			}
		}
	}

	&[data-skip-badge] {
		&:before {
			display: none;
		}
	}

	.ct-cart-content {
		position: absolute;
		z-index: 15;
		right: -15px;
		width: 340px;
		color: var(--linkInitialColor);
		margin-top: 15px;
		padding: 30px;
		border-radius: 2px;
		background: var(--cartDropDownBackground);
		box-shadow: 0px 10px 20px 0px rgba(41, 51, 61, 0.1);

		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 10px, 0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

		ul.cart_list {
			@include list-normalize;
			max-height: 40vh;
			overflow-y: scroll;
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
			// background: rgba(41, 51, 60, 0.98);

			a {
				&:hover {
					color: var(--linkHoverColor) !important;
				}
			}

			li {
				display: flex;
				align-items: center;
				position: relative;
				padding: 0 0 15px 0;
				margin: 0 0 15px 0;

				&:not(:last-child) {
					border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
				}

				&:last-child {
					margin-bottom: 0;
				}

				.product-thumb {
					flex: 0 0 75px;
					max-width: 75px;

					img {
						width: 100%;
						margin: 0;
					}
				}

				.product-data {
					display: flex;
					flex-direction: column;
					margin-left: 25px;
					width: 100%;
					padding-right: 18px;
				}

				.product-name {
					font-size: 15px;
					font-weight: 600;
					line-height: 20px;
					color: inherit;
					margin-bottom: 3px;
				}

				.quantity {
					font-size: 13px;

					span {
						font-weight: 500;
					}
				}

				.remove {
					position: absolute;
					z-index: 2;
					top: 0;
					right: 0;
					width: 15px;
					height: 15px;
					font-size: 17px;
					font-weight: normal;
					line-height: 13px;
					text-align: center;
					color: var(--linkInitialColor) !important;
					transition: color 0.12s
						cubic-bezier(0.455, 0.03, 0.515, 0.955);

					&:hover {
						color: var(--linkHoverColor) !important;
						background: transparent;
					}
				}

				.blockUI.blockOverlay {
					opacity: 0.85 !important;
					background-color: var(--cartDropDownBackground) !important;

					&:before {
						width: 25px;
						height: 25px;
						margin-left: initial;
					}
				}
			}
		}

		.total {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			padding-top: 30px;
			border-top: 1px dashed rgba(255, 255, 255, 0.1);

			.amount {
				font-weight: 700;
			}
		}

		.buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 25px;
			border-bottom-left-radius: inherit;
			border-bottom-right-radius: inherit;
			// background: rgba(41, 51, 60, 1);

			> * {
				font-size: 11px;
				font-weight: 600;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				width: calc(50% - 8px);

				@include button((
					display: inline-flex,
					height: 40px,
					padding: 23px,
					shadow: false,
					translate: false,
				));

				&:hover {
					color: inherit !important;
				}
			}
		}

		// placement
		&[data-placement='left'] {
			// margin-right: 100%;
			right: 0;
		}

		&[data-placement='right'] {
			left: 0;
		}

		// bridge
		&:before {
			position: absolute;
			content: '';
			width: 100%;
			height: 20px;
			top: -20px;
			left: 0;
		}
	}
}

// bounce in animation
@keyframes bounce-in {
	0% {
		transform: scale(0, 0);
	}
	20% {
		transform: scale(1.4, 1.4);
	}
	50% {
		transform: scale(0.8, 0.8);
	}
	85% {
		transform: scale(1.1, 1.1);
	}
	100% {
		transform: scale(1, 1);
	}
}