@import "variables";
.hasDropix {
	@media (max-width: 767px) {
		overflow: hidden;
	}
}
.dropix {
	position: relative;
	display: inline-block;
	.closer {
		&.size_16 {
			@media (max-width: 767px){
				width: 24px;
				height: 24px;
			}
		}
	}
	.dropix-balloon {
		position: absolute; top: 100%; right: 0;
		z-index: 9999;
		width: 320px;
		display: none;
		white-space: normal !important;
		color: $color_dark;
		@media (max-width: 767px) {
			background: #000;
			background: rgba(0,0,0,0.5);
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			overflow-y: auto;
			width: auto;
			min-width: auto !important;
			//padding: 12px;
		}
	}
	.dropix-content {
		background: $color_white;
		position: relative;
		padding: 24px;
		font-size: 14px;
		text-align: left;
		box-shadow: 0 0 10px $color_gray_30;
		@include border-radius(6px);
		@media (max-width: 767px) { margin: 12px; }
	}
	&.active {
		.dropix-balloon { display: block; }
	}
	&.hovered {
		@media (min-width: 768px) {
			.dropix-balloon { display: block; }
		}
	}

	&.top {
		.dropix-balloon {
			@media (min-width: 768px) {
				top: auto;
				bottom: 100%;
			}
		}
	}
	&.bottom {
		.dropix-balloon {
			@media (min-width: 768px) {
				top: 100%;
				bottom: auto;
			}
		}
	}
	&.left {
		.dropix-balloon {
			@media (min-width: 768px) {
				left: 0;
				right: auto;
			}
		}
	}
	&.right {
		.dropix-balloon {
			@media (min-width: 768px) {
				left: auto;
				right: 0;
			}
		}
	}

	&.overlay {
		.dropix-balloon {
			top: 0;
		}
		&.top {
			.dropix-balloon {
				@media (min-width: 768px) {
					top: auto;
					bottom: 0;
				}
			}
		}
	}

	&.hover {
		//cursor: pointer;
		.dropix-link {
			cursor: pointer;
		}
		.closer {
			display: none;
		}
		&.active {
			.closer {
				display: block;
			}
		}
	}
}