@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/flex' as *;



@include b(split) {
    display: flex;
    width: 100%;
    height: 100%;

    @include e('is-vertical') {
        flex-direction: column;

        @include e('panel') {
            overflow: auto;
        }
    }

    @include e('resizer') {
        background-color: #f3f4f6;
        cursor: col-resize;
        width: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;

        @include e('vertical') {
            width: 1px;
            height: 100%;
            background: #d3d9df;
            margin: 0 2px;
        }

        @include e('horizontal') {
            width: 7px;
            height: 1px;
            background: #d3d9df;
            margin: 2px 0;
        }

        @include e('vertical-style') {
            cursor: row-resize;
            height: 8px;
            width: 100%;

            @include e('panel') {
                overflow: auto;
            }
        }

        // &:hover {
        //     background-color: #ccc;
        // }
    }

    @include e('canfullStyle') {
        width: 7px;
        font-size: 7px;
        @include flex-column-center;
        background-color: #f3f4f6;

        @include e('rightIcon') {

            @include items-center;
            height: 23px;
            background-color: #ccc;
            margin-bottom: 1px;

            &:hover {
                background-color: #339af0;
            }
        }
    }
}