#{$prefix}split-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    #{$prefix}split-pane {
        position: absolute;

        &.left-pane,
        &.right-pane {
            top: 0;
            bottom: 0;
            box-sizing: border-box;
        }

        &.left-pane {
            left: 0;
        }

        &.right-pane {
            padding-left: 6px;
            right: 0;
        }

        &.top-pane,
        &.bottom-pane {
            left: 0;
            right: 0;
            box-sizing: border-box;
        }

        &.top-pane {
            top: 0;
        }

        &.bottom-pane {
            padding-top: 6px;
            bottom: 0;
        }
    }

    #{$prefix}split-trigger-con {
        position: absolute;
        transform: translate(-50%, -50%);
        z-index: 10;
    }

    #{$prefix}split-horizontal {
        #{$prefix}split-trigger-con {
            top: 50%;
            height: 100%;
            width: 0;
        }
    }

    #{$prefix}split-vertical {
        #{$prefix}split-trigger-con {
            left: 50%;
            height: 0;
            width: 100%;
        }
    }

    #{$prefix}split-trigger {
        border: 1px solid;
        box-sizing: border-box;

        #{$prefix}split-trigger-bar-con {
            position: absolute;
            overflow: hidden;
        }
    }

    #{$prefix}split-trigger-vertical {
        width: 6px;
        height: 100%;
        border-top: none;
        border-bottom: none;
        cursor: col-resize;

        #{$prefix}split-trigger-bar-con {
            left: 1px;
            top: 50%;
            height: 32px;
            transform: translateY(-50%);
        }

        #{$prefix}split-trigger-bar {
            width: 4px;
            height: 1px;
            background: rgba(23, 35, 61, 0.25);
            float: left;
            margin-top: 3px;
        }
    }

    #{$prefix}split-trigger-horizontal {
        height: 6px;
        width: 100%;
        border-left: none;
        border-right: none;
        cursor: row-resize;

        #{$prefix}split-trigger-bar-con {
            left: 50%;
            top: 1px;
            width: 32px;
            transform: translate(-50%);
        }

        #{$prefix}split-trigger-bar {
            height: 4px;
            width: 1px;
            background: rgba(23, 35, 61, 0.25);
            float: left;
            margin-right: 3px;
        }
    }
}