$element-border-width: 2px !default;
$element-border-style: $global-border-style !default;
$element-border-color: $global-border-color !default;
$element-border-color--hover: #ccc !default;
$element-opacity--active: 0.5 !default;

//
// Mixins
//
@mixin label( $background-color ) {
	padding: 1px 5px;
	margin: 0;
	background-color: $background-color;
	color: $global-white-color;
	font-family: $global-font-family;
	font-size: 13px;
	line-height: 24px;
	font-weight: normal;
	white-space: nowrap;
	outline: none;
	text-shadow: none;
	box-shadow: none;
	text-decoration: none;

	@include user-select( none );
}

.#{$global-class-prefix}ui {

	.is-dragging,
	.is-rendering {
		opacity: $element-opacity--active !important;
	}

	.is-editing,
	.is-hovering,
	.is-selected {
		position: relative;

		&::before {
			position: absolute;
			z-index: 999;
			content : '';
			pointer-events: none;

			// Alternative to outline-offset
			top: $element-border-width;
			left: $element-border-width;
			width: calc( 100% - #{( $element-border-width * 2 )} );
			height: calc( 100% - #{( $element-border-width * 2 )} );
		}
	}

	.is-hovering {

		&::before {
			z-index: 998;
			outline: $element-border-width $element-border-style $element-border-color--hover;
		}

		&::after {
			position: absolute;
			top: 1px;
			left: 1px;
			z-index: 998;
			content: attr( tailor-label) !important;
			pointer-events: none;

			@include label( $element-border-color--hover );
		}
	}

	.is-editing,
	.is-selected {

		&::before {
			z-index: 999;
			outline: $element-border-width $element-border-style $global-primary-color;
		}
	}


	.is-dragging {

		.is-selected {

			&::before {
				display: none;
			}
		}
	}

	// Ensures that a click event is not triggered following the resizing of a column
	&.is-resizing {

		* {
			pointer-events: none !important;
		}
	}
}