@import "variables";

.w-callback {
	background: #00A6BB;
	position: fixed; bottom: 0; right: -350px; z-index: 9999;
	width: 350px;
	color: $color_white;
	@include transition();
	@include border-radius(5px 0 0 0);

	&.full {
		right: -100%;
		width: 100%;
		@include border-radius(0 !important);
	}

	.w-callback__cross {
		background: #00718e;
		position: absolute; top: 0; right: 100%;
		margin-right: 4px;
		z-index: 75;
		display: block; width: 20px; height: 20px;
		@include border-radius(50%);
		&:before, &:after {
			content: '';
			background: $color_white;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 60%; height: 2px;
			@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
		}
		&:after { @include transform(translateX(-50%) translateY(-50%) rotate(-45deg)); }
		&:hover {
			background: #00638e;
		}
	}
	.w-callback__button {
		background: #00A6BB;
		border: 1px solid #00A6BB;
		position: absolute; bottom: 8px; left: -68px;
		display: block; width: 60px; height: 60px;
		color: $color_white;
		@include border-radius(50%);
		@include box-shadow(0 0 3px #00A6BB);
		@include transition();
		svg {
			position: absolute; top: 50%; left: 50%;
			display: block; width: 28px; height: 28px;
			@include transform(translateX(-50%) translateY(-50%));
		}
		&:hover { cursor: pointer; }
	}
	.w-callback__body {
		padding: 12px 24px 12px 80px;
		font-size: 14px;
		font-weight: bold;
		.title { font-size: 16px; }
	}

	&.active {
		right: 0;
		.w-callback__cross { top: 4px; right: 4px; margin-right: 0; }
		.w-callback__button {
			background: $color_white;
			color: #00A6BB;
			left: 12px;
			bottom: 24px;
			//width: 60px; height: 60px;
			svg { width: 28px; height: 28px; }
		}
	}
}