// 浮动
.fl (@type:left) {
    float: @type;
}

// 清除浮动
.clear-float () {
    display: block;
    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

// 背景函数
.background (@image-url, @repeat-type:no-repeat, @s-x:0, @s-y:0, @b-color:transparent) {
    @url: ~"@{image-url}";
    @is-url-exp: ~`/^url\([^()]+\)$/i.test("@{url}") ? 'true' : 'false'`;

    .background-image(@is-url-exp) when not (@is-url-exp) {
        background-image: url(@url);
    }
    .background-image(@is-url-exp) when (@is-url-exp) {
        background-image: @url;
    }
    .background-image(@is-url-exp);

    background-repeat: @repeat-type;
    background-position: @s-x @s-y;
    background-color: @b-color;
}

 
// CSS3 相关

 
// 阴影
// @x 横轴偏移
// @y 纵轴偏移
// @blur 阴影偏移
// @color 阴影颜色
.box-shadow (...) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}



// 盒模型计算模式
// @type border-box | content-box
.box-sizing (@type:border-box) {
    -webkit-box-sizing: @type;
    -moz-box-sizing: @type;
    -ms-box-sizing: @type;
    box-sizing: @type;
}


// 圆角
.border-radius (...) {      
    -moz-border-radius: @arguments;
    -webkit-border-radius: @arguments;
    border-radius: @arguments;
}



// 变换
.transition (...) {
    -moz-transition: @arguments;
    -webkit-transition: @arguments;
    transition: @arguments;
}

// 解决input输入框在IE7下 
// 显示height（width）= 设置height（width） + 上下（左右）padding和 + 上下（左右）border和
// 的不一致



// 设置尺寸为整体尺寸
// @height 设置高度
// @width 设置宽度
// @tb-padding 上下padding和
// @lr-padding 左右padding和
// @tb-border 上下border和
// @lr-border 左右border和
// @TODO 是否将line-height置为可配置？
.input-outter-size (@height, @width, @tb-padding, @lr-padding, @tb-border, @lr-border) {
    height: @height;
    line-height: 1;
    width: @width;
    *height: (@height - @tb-padding - @tb-border);
    *line-height: (@height - @tb-padding - @tb-border);
    *width: (@width - @lr-padding - @lr-border);
    .box-sizing(border-box);
}

.input-outter-size-height (@height, @tb-padding, @tb-border) {
    height: @height;
    line-height: 1;
    *height: (@height - @tb-padding - @tb-border);
    *line-height: (@height - @tb-padding - @tb-border);
    .box-sizing(border-box);
}


// 设置尺寸为内部显示尺寸
// @height 设置高度
// @width 设置宽度
.input-inner-size (@height, @width) {
    height: @height;
    line-height: @height;
    width: @width;
    .box-sizing(content-box);
}


// 提供inline-block的兼容显示效果
.inline-block () {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

// 隐藏元素内文字
.indent-text () {
    text-indent: -500%;
   // IE6,7 下使用text-indent会导致内容消失，因此做下hack
    *text-indent: 0;
    *font-size: 0;
    *line-height: 0;
}

.interactive-cursor () {
    cursor: pointer;
}

.ellipse-overflow () {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

// 重设列表的样式
.reset-list () {
    padding: 0;
    margin: 0;
    list-style: none;
}

// Opacity
.opacity (@opacity) {
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
}

// 文字选择
.user-select (@type:none) {
    // 火狐
    -moz-user-select: @type;
    // webkit浏览器
    -webkit-user-select: @type;
    // IE10
    -ms-user-select: @type;
    // 早期浏览器
    -khtml-user-select: @type;
    user-select: @type;
}


// 提示层气泡尖角
.top-pointer(@color, @left, @right) {
    border-top: 3px solid @color;
    position: relative;
    &:before {
        border-style: solid;
        border-width: 0 5px 5px;
        border-color: transparent transparent @color transparent;
        content: "";
        position: absolute;
        top: 0;
        margin-top: -8px;
    }
}

.top-pointer(@color, @left, @right) when (@left > 0) {
    &:before {
        left: @left;
    }
}

.top-pointer(@color, @left, @right) when (@right > 0) {
    &:before {
        right: @right;
    }
}

// 复杂控件的错误提示
.complex-component-validity-invalid() {
    border: 1px solid red;
}

.complex-component-validity-label() {
    display:block;
    margin-top: 5px;
}

.complex-component-validity-label-invalid() {
    background: #FEDBDC;
    border: 1px solid #F0CCCC;
    color: #dd6767;
    padding: 0 5px;
}