@mixin triangle($width, $height, $color, $direction) {
    $width: calc($width / 2);
    $color-border-style: $height solid $color;
    $transparent-border-style: $width solid transparent;
    height: 0;
    width: 0;

    @if $direction==up {
        border-bottom: $color-border-style;
        border-left: $transparent-border-style;
        border-right: $transparent-border-style;
    }

    @else if $direction==right {
        border-left: $color-border-style;
        border-top: $transparent-border-style;
        border-bottom: $transparent-border-style;
    }

    @else if $direction==down {
        border-top: $color-border-style;
        border-left: $transparent-border-style;
        border-right: $transparent-border-style;
    }

    @else if $direction==left {
        border-right: $color-border-style;
        border-top: $transparent-border-style;
        border-bottom: $transparent-border-style;
    }
}

$split-bar-bg-color: darken(#fbfbfb, 4%);
$split-bar-ear-bg-color: darken(#fbfbfb, 7%);
$split-bar-ear-border-color: #fbfbfb;
$split-bar-ear-hover-color: #fff;

.split-layout {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;

    &.hori {
        flex-direction: row;
    }

    &.vert {
        flex-direction: column;
    }

    .center {
        flex: 1;
    }

    .panel {
        height: 100%;
    }

    .splitbar {
        background: $split-bar-bg-color;
        display: flex;
        justify-content: center;
        align-items: center;

        // &.splitbar-border-right {
        //   border-right: 1px solid $split-bar-ear-border-color;
        // }

        // &.splitbar-border-bottom {
        //   border-bottom: 1px solid $split-bar-ear-border-color;
        // }

        // &.splitbar-border-left {
        //   border-left: 1px solid $split-bar-ear-border-color;
        // }

        // &.splitbar-border-top {
        //   border-top: 1px solid $split-bar-ear-border-color;
        // }

        &.hori {
            height: 100%;
            width: 8px;
            cursor: e-resize;

            >.vbg-ear {
                height: 10%;
                width: 100%;
                cursor: pointer;
                background: $split-bar-ear-bg-color;
                position: relative;

                &:hover {
                    color: $split-bar-ear-hover-color;
                }
            }

            >.triangle-dire-left {
                &::before {
                    content: "";
                    width: 100%;
                    height: 10px;
                    position: absolute;
                    right: 1px;
                    top: 50%;
                    @include triangle(10px, 5px, currentColor, left);
                }
            }

            >.triangle-dire-right {
                &::before {
                    content: "";
                    width: 100%;
                    height: 10px;
                    position: absolute;
                    right: 1px;
                    top: 50%;
                    @include triangle(10px, 5px, currentColor, right);
                }
            }
        }

        &.vert {
            width: 100%;
            height: 8px;
            cursor: s-resize;

            >.vbg-ear {
                width: 10%;
                height: 8px;
                cursor: pointer;
                background: $split-bar-ear-bg-color;
                position: relative;

                &:hover {
                    color: $split-bar-ear-hover-color;
                }
            }

            >.triangle-dire-up {
                &::before {
                    content: "";
                    width: 10px;
                    height: 100%;
                    position: absolute;
                    right: 50%;
                    bottom: 1px;
                    @include triangle(10px, 5px, currentColor, up);
                }
            }

            >.triangle-dire-down {
                &::before {
                    content: "";
                    width: 10px;
                    height: 100%;
                    position: absolute;
                    right: 50%;
                    bottom: 1px;
                    @include triangle(10px, 5px, currentColor, down);
                }
            }
        }
    }
}