@import "variables";
/* TODO: compare with dropix */
.dropbox {
	position: relative;
	.dropbox-head {
		position: relative; z-index: 2;
		@include transition(all 0.1s linear .15s);
	}
	.dropbox-body {
		background: $color_gray_10;
		position: absolute; top: 100%; left: 0; z-index: 1;
		color: $color_dark;
		visibility: hidden;
		opacity: 0;
		@include box-shadow(0 0 10px $color_gray_70);
		@include transition(all .1s linear .15s);
		&.visible {
			//top: 100%;
			visibility: visible;
			opacity: 1;
		}
	}
	&:hover {
		z-index: 7;
		.dropbox-head {
			background: $color_gray_10;
			color: $color_dark;
			@include transition(all 0.2s linear 0s);
		}
		.dropbox-body {
			//@media (min-width: 992px) {
			//top: 100%;
			@include transition(all .2s linear 0s);
			visibility: visible;
			opacity: 1;
			//}
		}
	}
	&.open {
		z-index: 5;
		.dropbox-head {
			background: $color_gray_10;
			color: $color_dark;
		}
		.dropbox-body {
			top: 100%;
			visibility: visible;
			opacity: 1;
		}
	}
}