@import "variables";

.floatbar-backdrop {
	background: rgba(0,0,0,.75);
	z-index: 998;
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	visibility: hidden;
	opacity: 0;
	@include transition();
	&.in {
		visibility: visible;
		opacity: 1;
	}
}
.floatbar {
	background: $white;
	position: fixed; top: 0; right: -480px; bottom: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: 480px;
	@media(max-width: 575px){
		width: 360px;
		right: -360px;
	}
	@media(max-width: 372px){
		left: 12px;
		width: auto;
	}
	color: #333;
	visibility: hidden;
	opacity: 0;
	@include transition();
	.floatbar__head {
		background: #dde4ec;
		padding: 16px;
		.controls {
			margin-bottom: 8px;
			text-align: right;
			a {
				border: 0;
				color: #9B9B9B;
				&:hover {
					color: $blue;
				}
			}
		}
		.title {}
		.description {
			margin-top: 4px;
			font-size: 16px;
		}
	}
	.floatbar__body {
		position: relative;
		overflow: hidden;
		overflow-y: auto;
		padding: 16px;
		&.grow {
			flex-grow: 1;
			& + .floatbar__footer {
				&:before {
					content: '';
					background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
					background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);
					background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 );
					position: absolute; right: 0; bottom: 100%; left: 0;
					height: 8px;
					opacity: .15;
				}
			}
		}
	}
	.floatbar__footer {
		position: relative;
		padding: 16px;
	}
	&.in {
		visibility: visible !important;
		opacity: 1 !important;
		right: 0 !important;
	}
}

.body-floatbar {
	overflow: hidden;
	/*.floatbar-backdrop {
		visibility: visible;
		opacity: 1;
	}
	.floatbar {
		visibility: visible !important;
		opacity: 1 !important;
		right: 0 !important;
	}*/
}

//Floating Cart
.floatbar-cart {
	.p-cart__delivery {
		margin: 24px 0 0 0;
		.delivery__date {
			position: relative !important;
			top: auto !important;
			right: auto !important;
			margin-top: 16px !important;
		}
	}
	.p-cart-summary {
		margin: 24px 0 0 0;
	}
}

.floatbar-cart-table {
	.floatbar-cart-item {
		&:not(:first-child){
			border-top: 1px solid rgba(0,0,0,.05);
			margin-top: 8px;
			padding-top: 12px;
		}
	}
}
.floatbar-cart-item {
	display: flex;
	font-size: 14px;
	line-height: 1.25;
	.item-side {
		margin-right: 16px;
	}
	.item-body {
		position: relative;
		flex-grow: 1;
	}

	.item-image {
		border: 0;
		display: block;
		width: 60px;
		min-width: 60px;
		margin-top: 2px;
		img {
			display: block;
			max-width: 100%;
		}
	}
	.item-remove {
		border: 0;
		position: absolute; top: -4px; right: -4px;
		display: block;
		padding: 4px;
		color: rgba(0,0,0,.25);
		&:hover {
			color: $red;
		}
	}
	.item-title {
		padding-right: 20px;
		color: $blue;
		a {
			border-bottom-color: transparent;
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}
	.item-description {
		font-size: 13px;
	}
	.item-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 8px;
		.item-col {
			padding-top: 4px;
			padding-bottom: 4px;
			&:not(:first-child){
				margin-left: 12px;
			}
			&:last-child{
				margin-left: auto;
				padding-left: 12px;
			}
		}
	}
	.old-price {
		display: inline-block;
		white-space: nowrap;
		s {
			background: $color_gray_20;
			display: inline-block;
			padding: 0 8px;
			@media (max-width: 575px){
				padding: 0 4px;
			}
			color: $gray_dark;
		}
		span {
			background: $red;
			display: inline-block;
			padding: 0 8px;
			color: $white;
			@media (max-width: 575px){
				padding: 0 4px;
			}
		}
	}
}

//Floating offer
.floatbar {
	&.floatbar_offer {
		background: none;
		right: -390px;
		left: auto;
		width: 390px;
		width: calc((100% - 1140px)/2);
		min-width: 250px;
		@include box-shadow(0 0 8px rgba(0,0,0,.4));
		.floatbar__container {
			background: #fff;
			width: 250px;
			min-height: 100%;
			height: 100%;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
		}
		.floatbar__head {
			background: #fff;
			position: relative;
			padding: 0;
			.controls {
				position: absolute; top: 4px; right: 4px;
				margin: 0;
				a {
					border: 1px solid $blue;
					display: block;
					width: 22px;
					height: 22px;
					line-height: 20px;
					color: $blue;
					text-align: center;
					@include border-radius(2px);
					&:hover {

					}
				}
			}
			.title {
				padding: 10px 16px 12px;
				font-size: 16px;
				font-weight: 600;
				color: $blue;
			}
			.description {
				position: relative;
				margin: 0;
				.description__head {
					background: $blue;
					padding-left: 16px;
					padding-right: 28px;
					color: $white;
					.fa-caret-down {
						position: absolute; top: 50%; right: 8px;
						font-size: 14px;
						@include transform(translateY(-50%));
					}
					&:hover {
						cursor: pointer;
					}
				}
				.description__body {
					background: $white;
					border-bottom: 2px solid #dde4ec;
					position: absolute; top: 100%; left: 0; right: 0;
					z-index: 55;
					display: none;
					&:before {
						content: '';
						position: absolute; top: 100%; left: 0; right: 0;
						height: 12px;
						margin-top: 2px;
						background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
						background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
						background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=0 );
						opacity: .35;
					}
					.floatbar-offer-car {
						padding-left: 16px;
						padding-right: 16px;
						&:not(:first-child){
							border-top: 1px solid #dde4ec;
						}
						&.active {
							display: none;
						}
						&:hover {
							background: #f2f8fe;
							cursor: pointer;
						}
					}
				}
				&.in {
					.description__head {
						.fa-caret-down {
							@include transform(translateY(-50%) rotate(180deg));
						}
					}
					.description__body {
						display: block;
					}
				}
			}
		}
		.floatbar__body {
			padding: 0;
		}
		.floatbar__footer {
			//padding: 16px;
		}
	}
}

.floatbar-offer-car {
	display: flex;
	padding: 8px 0;
	.car__image {
		width: 48px;
		min-width: 48px;
		margin-right: 12px;
		padding-top: 3px;
		img {
			display: block;
			width: 100%;
		}
	}
	.car__body {
		flex-grow: 1;
		font-size: 12px;
		line-height: 1.25;
	}
}
.floatbar-offer-tab {
	display: none;
	&.in {
		display: block;
	}
}
.floatbar-offer-empty {
	border-top: 1px solid #eee;
	padding: 20px 16px;
}
.floatbar-offer-item {
	position: relative;
	padding: 20px 16px;
	font-size: 12px;
	& + .floatbar-offer-item {
		border-top: 1px solid #eef2f6;
		/*&:before {
			content: '';
			background: #eef2f6;
			position: absolute; top: 24px; left: -16px; right: -16px;
			height: 1px;
		}*/
	}
	.item__title {
		font-size: 14px;
		font-weight: bold;
		a {
			border: 0;
			color: rgb(51, 51, 51);
			&:hover {
				color: $blue;
			}
		}
	}
	.item__container {
		margin-top: 6px;
		display: flex;
		align-items: flex-end;
		.item__image {
			width: 80px;
			min-width: 80px;
			margin-right: 12px;
			img {
				display: block;
				width: 100%;
			}
		}
		.item__description {
			flex-grow: 1;
		}
	}
	.item__side {
		img {
			display: inline-block;
			vertical-align: middle;
			max-width: 28px;
		}
		span {
			background: #D5E6F6;
			display: inline-block;
			vertical-align: middle;
			font-size: 12px;
			font-weight: 600;
			line-height: normal;
			padding: 2px 4px;
		}
	}
	.item__price {
		strong {
			font-size: 24px;
			color: $blue;
		}
	}
	.item__discount {
		display: flex;
		margin-top: 4px;
		font-size: 12px;
		line-height: normal;
		s {
			background: #ccc;
			padding: 2px 4px;
			text-decoration: none;
		}
		i {
			background: #ffe180;
			padding: 2px 4px;
			font-style: normal;
		}
	}
	.item__code {
		color: #9b9b9b;
	}
	.item__wh {
		margin-top: 8px;
		color: #9b9b9b;
		.label {
			margin-left: 3px;
			padding: 1px 3px 2px;
			font-size: 11px;
			font-weight: bold;
			color: $white;
			@include border-radius(0);
			&.label-default {
				background: #9c9c9c;
			}
			&.label-dark {
				//background: #000;
				color: #000;
			}
		}
	}
	.item__row {
		display: flex;
		align-items: flex-end;
		margin-top: 8px;
		.item__code {
			min-width: 92px;
		}
		.item__wh {
			margin: 0;
		}
	}
	.item__delivery {
		margin-top: 8px;
		.delivery-label {
			color: #9b9b9b;
		}
	}
	.item__refused {
		display: none;
		margin-top: 8px;
		font-weight: bold;
		font-size: 14px;
		color: #772096;
	}
	.item__btn {
		margin-top: 12px;
		margin-left: -2px;
		margin-right: -2px;
		.btn {
			margin-left: 2px;
			margin-right: 2px;
			padding: 6px 12px 7px;
		}
		/*button, a {
			background: $color_blue;
			background: -moz-linear-gradient(top, #2E75D1 0%, #002B81 100%);
			background: -webkit-linear-gradient(top, #2E75D1 0%, #002B81 100%);
			background: linear-gradient(to bottom, #2E75D1 0%, #002B81 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E75D1', endColorstr='#002B81', GradientType=0 );
			border: 0;
			outline: none;
			display: inline-block;
			padding: 6px 16px 7px;
			color: $white !important;
			@include border-radius(3px);
			.fa {
				margin-right: 4px;
			}
			&:hover {
				background: #2E75D1;
				background: -moz-linear-gradient(top, #388EFF 0%, #003CB5 100%);
				background: -webkit-linear-gradient(top, #388EFF 0%, #003CB5 100%);
				background: linear-gradient(to bottom, #388EFF 0%, #003CB5 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#388EFF', endColorstr='#003CB5', GradientType=0 );
			}
		}*/
	}
	.item__more {
		margin-top: 8px;
	}
	&:hover {
		background: #f2f8fe;
	}
	&.refused {
		&:before {
			content: '';
			background: $white;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 55;
			opacity: .5;
		}
		.item__btn {
			.btn-purple {
				display: none;
			}
		}
		.item__refused {
			display: block;
		}
		&:hover {
			&:before {
				visibility: hidden;
			}
		}
	}
}