@mixin placehold-img{
    position: relative;
    & > span{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: $z-index-img;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
    }
}

@mixin img{
    position: relative;
    & > span{
        display: block;
        width: 100%;
        height: 100%;
        z-index: $z-index-img;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
    }
}

@mixin avatar($size: $avatar-width) {
    width: #{$size}px;
    height: #{$size}px;
    -webkit-border-radius: $border-radius-max;
    overflow: hidden;
    & > span{
        width: 100%;
        height: 100%;
        display: block;
        overflow:hidden;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -webkit-border-radius: $border-radius-max;
    }
    
}
@mixin icon{
    font-family: "iconfont" !important;
    font-size: 32px;
    line-height: $line-height-bar;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    display: block;
    color: rgba(0,0,0,.5);
}
@mixin arrowlink{
    @include icon;
    color: #c7c7c7;
    content: $icon-arrow; 
    position: absolute;
    right: $wrap-padding;
    top: 50%;
    margin-top: -22px;
    margin-right: -10px;
    @media (max-width: 320px) {
        right: $wrap-padding-s;
    }
}
@mixin nowrap{
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@mixin border-radius($border-color: $bordercolor,$border-radius: $border-radius-base,$border-before-radius: $border-radius-lg){
    border: 1px solid $border-color;
    border-radius: $border-radius;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        position: relative;
        border: 0;
        &:before{
            content:"";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid $border-color;
            -webkit-transform:scale(.5);
            -webkit-transform-origin: 0 0;
            padding: 1px;
            -webkit-box-sizing: border-box;
            border-radius: $border-before-radius;
            pointer-events: none;
        }
    }
}