// 图片图标
.sprite-icon(none) {
    background: none;
}

.sprite-icon(@img) {
    @url: ~"@{img}";
    background: @url scroll 0 0 no-repeat transparent;
}

// 字体图标
@font-icon-family: FontAwesome;
.font-icon(@font-content, @size, @color) {
    font-family: @font-icon-family;
    font-size: @size;
    color: @color;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "@{img}";
    // 重置indent，抵消外部可能的覆盖
    text-indent: 0;
}

// repeat背景
.repeat-x(@img, @bg-color:transparent) {
    background: @img scroll 0 0 repeat-x @bg-color;
}

// 一般元素型icon
.normal-icon (@img, @width:0, @height:0) {
    .sprite-icon(@img);
    width: @width;
    height: @height;
}

.pseudo-icon() {
    &:after {
        .sprite-icon(none);
    }
}
// 参数多态，主要通过第二个参数判断
// 1. 如果第二个参数是颜色值，则代表是字体图标，此时：
//    第二个参数是字体背景；第三个参数代表字体宽度；
// 2. 如果第二个参数不是颜色值，则代表是图片图标，此时
//    第二个参数是图片宽度；第三个参数代表图片高度
//
.pseudo-icon (@img, @width:0, @height:0, @horizontal:left, @hDuration:0, @vertical:center, @vDuration:0, @relativePos:relative) {
    .relative(@relativePos) when not (@relativePos = none) {
        position: @relativePos;
    }
    .relative(@relativePos);
    &:after {
        position: absolute;
        // 判断是否是字体图标
        @is-font-icon: ~`/^#[A-Za-z0-9]+$/i.test("@{width}") ? 'true' : 'false'`;

        .icon(@img) when (@is-font-icon) {
            @size: @height;
            @color: @width;
            .font-icon(@img, @size, @color);
        }
        .icon(@img) when not (@is-font-icon) {
            width: @width;
            height: @height;
            content: '~"@{img}"';
            white-space: nowrap;
            text-indent: -9999px;
            overflow: hidden;
            .sprite-icon(@img);
        }

        .icon(@img);

        .position-vertical(@vertical) when (@vertical = center), (@is-font-icon = 'true') {
            top: 50%;
            margin-top: -(@height/2);
            line-height: @height;
        }

        .position-vertical(@vertical) when (@vertical = center), (@is-font-icon = 'false') {
            top: 50%;
            margin-top: -(@height/2);
        }

        .position-vertical(@vertical) when (@vertical = line-height) {
            line-height: inherit;
        }

        .position-vertical(@vertical) when not (@vertical = center) and not (@vertical = line-height) {
            @{vertical}: @vDuration;
            line-height: @height;
        }

        .position-horizontal(@horizontal) when (@horizontal = center), (@is-font-icon = 'true') {
            left: 50%;
            margin-left: -(@height/2);
        }

        .position-horizontal(@horizontal) when (@horizontal = center), (@is-font-icon = 'false') {
            left: 50%;
            margin-left: -(@width/2);
        }

        .position-horizontal(@horizontal) when not (@horizontal = center) {
            @{horizontal}: @hDuration;
        }

        .position-vertical(@vertical);
        .position-horizontal(@horizontal);
    }
}
