@import

    "../base/mixin",
    "../base/variable";

/*图标基类*/
.ui-icon-viplevel {
    display:inline-block;
    height:1px;
    position: relative;
    vertical-align: middle;
    span {
        overflow:hidden;
        display:block;
        width:100%;
        background-repeat:no-repeat;
        position: absolute;
        line-height:100px;
    }
}

/*等级图标*/
@each $item in vip, svip, yearvip,yearsvip {
    @each $type in level,level-s {
        .ui-icon-#{$item}#{$type} {
            @extend .ui-icon-viplevel;
        }
    }
}

/*宽度与背景size*/
.ui-icon-viplevel {
    width:48px;
    span {
        -webkit-background-size: auto 20px;
    }
}
.ui-icon-viplevel-s {
    width:31px;
    span {
        -webkit-background-size: auto 12px;
    }
}
.ui-icon-yearviplevel{
    width:55px;
    span {
        -webkit-background-size: auto 19px;
    }
}
.ui-icon-yearviplevel-s {
    width:40px;
    span {
        -webkit-background-size: auto 12px;
    }
}
.ui-icon-sviplevel {
    width:52px;
    span {
        -webkit-background-size: auto 22px;
    }
}
.ui-icon-sviplevel-s {
    width:36px;
    span {
        -webkit-background-size: auto 12px;
    }
}
.ui-icon-yearsviplevel {
    width:58px;
    span {
        -webkit-background-size: auto 20px;
    }
}
.ui-icon-yearsviplevel-s {
    width:45px;
    span {
        -webkit-background-size: auto 12px;
    }
}

.ui-icon-viplevel span, .ui-icon-yearviplevel span {
    height:22px;
    top:-12px;
}
.ui-icon-sviplevel span, .ui-icon-yearsviplevel span {
    height:22px;
    top:-14px;
}
.ui-icon-viplevel-s span, .ui-icon-sviplevel-s span,.ui-icon-yearviplevel-s span,.ui-icon-yearsviplevel-s span {
    height:20px;
    top:-7px;
}

/*超Q图标*/
.ui-icon-mq {
    @extend .ui-icon-viplevel;
    width: 28px;
    span {
        height: 28px;
        top: -15px;
        -webkit-background-size: 28px auto;
    }
}