$--collapse-bar--size: 20px;
$--collapse-bar--bg: rgba(235, 238, 245,0.2);
.pro-layout-content-border{
    .border-layout {
        border: 1px solid #ebeef5;
        height: 100%;
        &.contaner ,.contaner {
            display: flex;
            flex: 1 1 auto;
        }
        &.vertical{
            flex-direction: column;
        }
        .horizontal{
            flex-direction: row;
        }
        .region{
            box-sizing: border-box;
            background-color: #ffffff;
            .region-content {
                    overflow: hidden;
            }

            &.is-collapse {
                overflow: visible;
               &.region-left, &.region-right {
                    width: 0px !important;
                }
                &.region-top, &.region-bottom {
                    height: 0px !important;
                }
                .region-content {
                    visibility: hidden;
                }
            }
        }
        // top区域
        .region-top{
            border-bottom: 1px solid #ebeef5;
            position: relative;
            transition: height 100ms ease-out;
        }

        // left区域
        .region-left{
            border-right: 1px solid #e4e7ed;
            border-left: 1px solid #e4e7ed;
            position: relative;
            transition: width 100ms ease-out;
            margin-right: 5px;
        }

        // left区域
        .region-right{
            border-left: 1px solid #e4e7ed;
            border-left: 1px solid #e4e7ed;
            position: relative;
            transition: width 100ms ease-out;
            margin-left: 5px;
        }

        // bottom区域
        .region-bottom{
            border-top: 1px solid #ebeef5;
            position: relative;
            transition: height 100ms ease-out;
        }

        .region-content{
            width: 100%;
            height: 100%;
        }
        
        // collapse-bar -- left
        .collapse-bar.left{
            position: absolute;
            background: svg-load('./assets/holder.svg');
            height: 56px;
            width: 12px;
            right: -12px;
            top: 50%;
            transform: translate(0, -50%);
            line-height: 56px;
            font-size: 12px;
            color: #c7a4a4;
            cursor: pointer;
        }
        // collapse-bar -- right
        .collapse-bar.right{
            position: absolute;
            background: svg-load('./assets/holder.svg');
            height: 56px;
            width: 12px;
            left: -12px;
            top: 50%;
            line-height: 56px;
            font-size: 12px;
            color: #c7a4a4;
            cursor: pointer;
            transform: rotate(180deg) translate(0, -50%);
            transform-origin: 50% 0% 0;
        }
        .collapse-bar.top{
            position: absolute;
            background: svg-load('./assets/holder.svg');
            height: 56px;
            width: 12px;
            bottom: -56px;
            left: 50%;
            line-height: 56px;
            font-size: 12px;
            color: #c7a4a4;
            cursor: pointer;
            transform: rotate(90deg) translateY(-28px);
            transform-origin: 0 0 0;
        }

        .collapse-bar.bottom{
            position: absolute;
            background: svg-load('./assets/holder.svg');
            height: 56px;
            width: 12px;
            top: -56px;
            left: 50%;
            line-height: 56px;
            font-size: 12px;
            color: #c7a4a4;
            cursor: pointer;
            transform: rotate(-90deg) translateY(28px);
            transform-origin: 0 100% 0;
        }
    }
}