.resize-handle {
	position: fixed;
	height: 0;

	&.bottom {
		.overlay {
			transform: translateY(-100%);
		}

		.draghandle {
			transform: translateY(-100%);
		}
	}

	a.action {
		padding: 5px;
		background: #fff;
		font-size: 11px;
		color: #32373c;
		text-align: center;
		width: 20px;
		display: inline-block;
		cursor: pointer;
		box-shadow: none;

		&:hover {
			text-decoration: none;
			background: rgba(255, 255, 255, 0.8);
		}
	}

	.draghandle {
		z-index: 99998;
		position: relative;
		cursor: ns-resize;
		border-radius: 3px 3px 0 0;
		font-size: 17px;
		left: -25px;
		background-color: $menu-color;
		color: white;
		text-align: center;
		padding: 3px 3px 3px 10px;

		&:hover + .overlay {
			display: block;
		}
	}

	.icon {
		font: normal normal normal 14px/1 FontAwesome;
		padding-right: 5px;

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

	&.top.minsize {
		.icon::before {
			content: "\f176";
		}
	}

	&.bottom.minsize {
		.icon::before {
			content: "\f175";
		}
	}

	.overlay {
		top: 0;
		display: none;
		position: absolute;
		background-color: rgba(189, 207, 145, 0.7);
		border-style: dashed;
		border-width: 1px 0;
		color: #a7a7a7;
	}

	.size {
		font-size: 12px;
		padding-right: 7px;
		font-family: Open Sans, sans-serif;
	}

	&.top .draghandle {
		border-radius: 0 0 3px 3px;
	}
}

.drag-progress .draghandle {
	display: none !important;
}

.changing-padding-bottom #boldgrid-draggable-resizing-overlay,
.changing-padding-top #boldgrid-draggable-resizing-overlay {
	cursor: ns-resize !important;
}

.changing-padding-bottom, .changing-padding-top {
	.resize-handle .overlay {
		display: block !important;
	}
}