$gridstack-columns: 12;
$horizontal_padding: 12px;
$vertical_padding: 12px;
$animation_speed: .3s;

@mixin vendor($property, $value...) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}

:root .grid-stack-item > .ui-resizable-handle {
	filter: none;
}

.grid-stack {
	position: relative;
	width: 100%;
	height: 100%;

	.grid-stack-placeholder {
		border: 0 !important;
		background: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		> .placeholder-content {
			border: 1px dashed lightgray;
			margin: 0;
			position: absolute;
			top: 0;
			left: $horizontal_padding / 2;
			right: $horizontal_padding / 2;
			bottom: 0;
			width: auto;
			z-index: 0 !important;
		}
	}

	> .grid-stack-item {
		min-width: 100% / $gridstack-columns;
		position: absolute;
		padding: 0;

		> .grid-stack-item-content {
			margin: 0;
			position: absolute;
			top: 0;
			left: $horizontal_padding / 2;
			right: $horizontal_padding / 2;
			bottom: 0;
			width: auto;
			z-index: 0;
			overflow: hidden;
		}

		> .ui-resizable-handle {
			position: absolute;
			font-size: 0.1px;
			display: block;
			-ms-touch-action: none;
			touch-action: none;
		}

		&.ui-resizable-disabled > .ui-resizable-handle,
		&.ui-resizable-autohide > .ui-resizable-handle {
			display: none;
		}

		&.ui-draggable-dragging,
		&.ui-resizable-resizing {
			z-index: 100;

			> .grid-stack-item-content,
			> .grid-stack-item-content {
				box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
				opacity: 0.8;
			}
		}

		> .ui-resizable-se,
		> .ui-resizable-sw {
			text-align: right;
			color: gray;

			padding: 2px 3px 0 0;
			margin: 0;

			font: normal normal normal 10px/1 FontAwesome;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			&::before {
				content: "\f065";
			}
		}

		> .ui-resizable-se {
			display: inline-block;
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
			@include vendor(transform, rotate(90deg));
		}

		> .ui-resizable-nw {
			cursor: nw-resize;
			width: 20px;
			height: 20px;
			left: 10px;
			top: 0;
		}

		> .ui-resizable-n {
			cursor: n-resize;
			height: 10px;
			top: 0;
			left: 25px;
			right: 25px;
		}

		> .ui-resizable-ne {
			cursor: ne-resize;
			width: 20px;
			height: 20px;
			right: 10px;
			top: 0;
		}

		> .ui-resizable-e {
			cursor: e-resize;
			width: 10px;
			right: 2px;
			top: 15px;
			bottom: 15px;
		}

		> .ui-resizable-se {
			cursor: se-resize;
			width: 20px;
			height: 20px;
			right: 10px;
			bottom: 0;
		}

		> .ui-resizable-s {
			cursor: s-resize;
			height: 10px;
			left: 25px;
			bottom: 0;
			right: 25px;
		}

		> .ui-resizable-sw {
			cursor: sw-resize;
			width: 20px;
			height: 20px;
			left: 10px;
			bottom: 0;
		}

		> .ui-resizable-w {
			cursor: w-resize;
			width: 10px;
			left: 2px;
			top: 15px;
			bottom: 15px;
		}

		@for $i from 1 through $gridstack-columns {
			&[data-gs-width='#{$i}'] {
				width: (100% / $gridstack-columns) * $i;
			}
			&[data-gs-x='#{$i}'] {
				left: (100% / $gridstack-columns) * $i;
			}
			&[data-gs-min-width='#{$i}'] {
				min-width: (100% / $gridstack-columns) * $i;
			}
			&[data-gs-max-width='#{$i}'] {
				max-width: (100% / $gridstack-columns) * $i;
			}
		}
	}

	&.grid-stack-animate,
	&.grid-stack-animate .grid-stack-item {
		@include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
	}

	&.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
	&.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
	&.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
		@include vendor(transition, left .0s, top .0s, height .0s, width .0s);
	}

	/** Uncomment this to show bottom-left resize handle **/
	> .grid-stack-item > .ui-resizable-sw {
		display: inline-block;
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		@include vendor(transform, rotate(180deg));
	}
}

@media (max-width: 768px) {
	.grid-stack-item {
		position: relative !important;
		width: auto !important;
		left: 0 !important;
		top: auto !important;
		margin-bottom: $vertical_padding;

		.ui-resizable-handle {
			display: none;
		}
	}

	.grid-stack {
		height: auto !important;
	}
}