////////提示////////
.tips{
    position:relative;
    margin-bottom: @sys-layout-sm;
    padding: @sys-layout-sm;
    border: 1px solid @color-border;
    background-color: @sys-color-snow;
    .sys-border-radius(@sys-radius-sm);
    box-shadow: 0 1px 2px @color-border;
    .tips-container{
        overflow:hidden;
        white-space: nowrap;
    }
    .tips-icon,.tips-text{
        .sys-inline-block();
        vertical-align:top;
        font-size:@sys-font-size-sm;
        line-height:18px;
    }
    .tips-icon{
        margin-right:@sys-layout-xs;
    }
    .tips-text{
        white-space: normal;
    }
    .tips-close{
        float:right;
        margin-left: @sys-layout-xs;
        font-size:@sys-font-size-lg;
        line-height:16px;
        cursor:pointer;
    }
}

////函数////
// 气泡尺寸
.tips-bubble-size-func (@tips, @border-width) {
    .@{tips}{
        &:before{
            border-width:@border-width;
        }
    }
    //左中
    .@{tips}.tips-left-middle{
        &:before{
            top:50%;
            left: 0 - 2 * @border-width;
            margin-top: 0 - @border-width;
        }
    }
    //上左
    .@{tips}.tips-top-left{
        &:before{
            left: @border-width;
            top: 0 - 2 * @border-width;
        }
    }
    //上中
    .@{tips}.tips-top-center{
        &:before{
            left: 50%;
            top: 0 - 2 * @border-width;
            margin-left:0 - @border-width;
        }
    }
    //上右
    .@{tips}.tips-top-right{
        &:before{
            right: @border-width;
            top: 0 - 2 * @border-width;
        }
    }
    //右中
    .@{tips}.tips-right-middle{
        &:before{
            top:50%;
            right: 0 - 2 * @border-width;
            margin-top: 0 - @border-width;
        }
    }
    //下左
    .@{tips}.tips-bottom-left{
        &:before{
            left: @border-width;
            bottom: 0 - 2 * @border-width;
        }
    }
    //下中
    .@{tips}.tips-bottom-center{
        &:before{
            left: 50%;
            bottom: 0 - 2 * @border-width;
            margin-left:0 - @border-width;
        }
    }
    //下右
    .@{tips}.tips-bottom-right{
        &:before{
            right: @border-width;
            bottom: 0 - 2 * @border-width;
        }
    }
}

// 气泡颜色
.tips-bubble-color-func (@tips, @color) {
    //左中
    .@{tips}.tips-left-middle{
        &:before{
            border-right-color: @color;
        }
    }
    //上左
    .@{tips}.tips-top-left{
        &:before{
            border-bottom-color: @color;
        }
    }
    //上中
    .@{tips}.tips-top-center{
        &:before{
            border-bottom-color: @color;
        }
    }
    //上右
    .@{tips}.tips-top-right{
        &:before{
            border-bottom-color: @color;
        }
    }
    //右中
    .@{tips}.tips-right-middle{
        &:before{
            border-left-color: @color;
        }
    }
    //下左
    .@{tips}.tips-bottom-left{
        &:before{
            border-top-color: @color;
        }
    }
    //下中
    .@{tips}.tips-bottom-center{
        &:before{
            border-top-color: @color;
        }
    }
    //下右
    .@{tips}.tips-bottom-right{
        &:before{
            border-top-color: @color;
        }
    }
}

////气泡////
@tips-bubble-color:#333;
.tips-bubble{
    .sys-inline-block();
    color: @sys-color-snow;
    border-color: @tips-bubble-color;
    background:@tips-bubble-color;
    &:before{
        content:"";
        position:absolute;
        border-style:solid;
        border-width:@sys-layout-xs;
        border-color:transparent;
    }
    .tips-close{
        color: @sys-color-snow;
    }
}
.tips-bubble-color-func(tips-bubble, @tips-bubble-color);

////尺寸////
.tips-bubble-size-func(tips, @sys-layout-sm);

////紧缩////
.tips-condensed{
    padding: @sys-layout-xs;
    .tips-icon,.tips-close{
        font-size:@sys-font-size-md;
    }
    .tips-text{
        font-size:@sys-font-size-xs;
    }
}
.tips-bubble-size-func(tips-condensed, @sys-layout-xs);

////情景////
// 消息
.tips-info{
    color: @sys-color-snow;
    background-color: lighten(@sys-color-info, 4%);
    border-color: @sys-color-info;
    .tips-close{
        color: @sys-color-snow;
    }
}
.tips-bubble-color-func(tips-info, lighten(@sys-color-info, 4%));
// 成功
.tips-success{
    color: @sys-color-snow;
    background-color: lighten(@sys-color-success, 4%);
    border-color: @sys-color-success;
    .tips-close{
        color: @sys-color-snow;
    }
}
.tips-bubble-color-func(tips-success, lighten(@sys-color-success, 4%));
// 警告
.tips-warn{
    color: @sys-color-snow;
    background-color: lighten(@sys-color-warn, 4%);
    border-color: @sys-color-warn;
    .tips-close{
        color: @sys-color-snow;
    }
}
.tips-bubble-color-func(tips-warn, lighten(@sys-color-warn, 4%));
// 错误
.tips-danger{
    color: @sys-color-snow;
    background-color: lighten(@sys-color-danger, 4%);
    border-color: @sys-color-danger;
    .tips-close{
        color: @sys-color-snow;
    }
}
.tips-bubble-color-func(tips-danger, lighten(@sys-color-danger, 4%));


////////扩展////////