@import "../../../../assets/less/core/boot.less";

.component-backend-splitter {
    > .splitter-handle {
        background: @primary-border;
        transition: background-color 0.1s;
        position: relative;

        &:hover,
        &.dragging {
            background-color: @brand-primary;
        }

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 0;
        }
    }

    &.flex-layout-row {
        // Vertical splitter
        //
        > .splitter-handle {
            width: 1px;
            cursor: col-resize;

            &:before,
            &:after {
                width: 1px;
                height: 100%;
            }

            &:before {
                left: -1px;
            }

            &:after {
                right: -1px;
            }
        }
    }

    &.flex-layout-column {
        // Horizontal splitter
        //
        > .splitter-handle {
            height: 1px;
            cursor: row-resize;

            &:before,
            &:after {
                height: 1px;
                width: 100%;
            }

            &:before {
                top: -1px;
            }

            &:after {
                bottom: -1px;
            }
        }
    }
}

body.splitter-dragging-vertical,
body.splitter-dragging-horizontal {
    * {
        user-select: none;
    }
}

body.splitter-dragging-vertical {
    * {
        cursor: col-resize !important;
    }
}

body.splitter-dragging-horizontal {
    * {
        cursor: row-resize !important;
    }
}