$--splitter-size: 2px;

.#{splitpanes} {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100%;

	&--vertical {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row
	}

	&--horizontal {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}

	&--dragging * {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none
	}

	&__pane {
		width: 100%;
		height: 100%;
		overflow: hidden;
		-webkit-transition: width .2s ease-out, height .2s ease-out;
		transition: width .2s ease-out, height .2s ease-out
	}

	&--dragging &__pane {
		-webkit-transition: none;
		transition: none
	}

	&__splitter {
		-ms-touch-action: none;
		touch-action: none
	}

	&--vertical > &__splitter {
		min-width: 1px;
		cursor: col-resize
	}

	&--horizontal > &__splitter {
		min-height: 1px;
		cursor: row-resize
	}

	& &__pane {
		//background-color: #f2f2f2
	}

	& &__splitter {
		background-color: #fff;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: relative
	}

	& &__splitter:after, & &__splitter:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: rgba(0, 0, 0, .15);
		-webkit-transition: background-color .3s;
		transition: background-color .3s
	}

	& &__splitter:hover:after, & &__splitter:hover:before {
		background-color: rgba(0, 0, 0, .25)
	}

	& & &__splitter {
		z-index: 1
	}

	&--vertical > &__splitter,  &--vertical > &__splitter {
		width: $--splitter-size;
		//border-left: 1px solid #eee;
		//margin-left: -1px
	}

	&--vertical > &__splitter:after,  &--vertical > &__splitter:after, &--vertical > &__splitter:before,  &--vertical > &__splitter:before {
		/*-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 1px;
		height: 30px*/
	}

	&--vertical > &__splitter:before,  &--vertical > &__splitter:before {
		margin-left: -1px
	}

	&--vertical > &__splitter:after,  &--vertical > &__splitter:after {
		margin-left: 1px
	}

	&--horizontal > &__splitter,  &--horizontal > &__splitter {
		height: $--splitter-size;
		//border-top: 1px solid #eee;
		//margin-top: -1px
	}

	&--horizontal > &__splitter:after,  &--horizontal > &__splitter:after, &--horizontal > &__splitter:before,  &--horizontal > &__splitter:before {
		/*-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 30px;
		height: 1px*/
	}

	&--horizontal > &__splitter:before,  &--horizontal > &__splitter:before {
		margin-top: -1px
	}

	&--horizontal > &__splitter:after,  &--horizontal > &__splitter:after {
		margin-top: 1px
	}
}

