// 垂直居中
vertical-center()
    position absolute
    top 50%
    transform translateY(-50%)

// 单行
ellipsis()
    white-space nowrap
    overflow hidden
    text-overflow ellipsis

// 两行
line-clamp2()
    display -webkit-box
    -webkit-line-clamp 2
    -webkit-box-orient vertical
    overflow hidden

// 清除浮动
clearfix()
    &::before
    &::after
        content ""
        display table

    &::after
        clear both

    zoom 1

// 下三角
triangle-bottom($height, $color)
    width 0
    height 0
    border $height solid transparent
    border-top $height solid $color

// 单行
zw-vertical($height)
    display flex
    align-items center
    height $height

// * hack
// 解决安卓line-height不居中问题
// 坑：不太方便抽成组件，style不会被转px
zw-vertical-line($fontSize, $paddingVertical)
    position relative
    font-size 0
    line-height $fontSize
    padding $paddingVertical 0

    .zw-vertical-line-txt
        font-size $fontSize
        display inline-block
        vertical-align middle

    .zw-vertical-line-right
        font-size $fontSize
        vertical-center()
        right 0
        text-align right

border-left-retina($color=#e6e6e6, $width=1px, $top=0, $bottom=0, $androidColor=#f5f5f5, $position = relative)
    position $position

    &::after
        content ""
        pointer-events none
        position absolute
        top $top
        bottom $bottom
        left 0
        width 1px
        height 100%
        transform-origin 0 0
        background-color $color
        transform scaleX(.5)

    &.android-patch::after
        transform unset
        background-color $androidColor

border-right-retina($color=#e6e6e6, $width=1px, $top=0, $bottom=0, $androidColor=#f5f5f5, $position = relative)
    position $position

    &::after
        content ""
        pointer-events none
        position absolute
        top $top
        bottom $bottom
        right 0
        width 1px
        height 100%
        transform-origin 0 0
        background-color $color
        transform scaleX(.5)

    &.android-patch::after
        transform unset
        background-color $androidColor

border-retina($color=#e6e6e6, $width=3px, $radius=0, $position = relative)
    position $position

    &::after
        content ""
        pointer-events none
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        transform-origin 0 0
        border $width solid $color
        border-radius $radius
        box-sizing border-box
        width 100%
        height 100%

        @media (min-resolution: 2dppx)
            width 200%
            height 200%
            border-radius $radius*2
            transform scale(.5)

        @media (min-resolution: 3dppx)
            width 300%
            height 300%
            border-radius $radius*3
            transform scale(.333)

    &.android-patch::after
        transform unset
        width 100%
        height 100%
        border-radius $radius
        border-color $androidColor

border-top-retina($color=#e6e6e6, $width=1px, $right=0, $left=0, $androidColor=#f5f5f5, $position = relative)
    position $position

    &::before
        content ""
        pointer-events none
        position absolute
        right $right
        left $left
        top 0
        transform-origin 0 0
        background-color $color
        height $width
        transform scaleY(.5)

    &.android-patch::after
        transform unset
        background-color $androidColor

border-bottom-retina($color=#e6e6e6, $width=1px, $right=0, $left=0, $androidColor=#f5f5f5, $position = relative)
    position $position

    &::after
        content ""
        pointer-events none
        position absolute
        right $right
        left $left
        bottom 0
        transform-origin 0 0
        background-color $color
        height $width
        transform scaleY(.5)

    &.android-patch::after
        transform unset
        background-color $androidColor

no-border()
    &::after,
    &::before
        border 0
        height 0
        background-color none

// icon和按钮类型要求 50%透明
btn-hover-feedback()
    &.btn-hover-feedback
        opacity .5

// 列表类型要求 5% 加暗，透明防止盖住border
list-hover-feedback($color = rgba(0, 0, 0, .05))
    &.list-hover-feedback
        background-color $color

// feed加载中动效
@keyframes feed-animate-loading
    0%
        opacity .3
        -webkit-transform rotateY(0deg)
        transform rotateY(0deg)

    40%
        -webkit-transform rotateY(90deg)
        transform rotateY(90deg)

    50%
        opacity .6
        -webkit-transform rotateY(180deg)
        transform rotateY(180deg)

    60%
        -webkit-transform: rotateY(270deg);
        transform: rotateY(270deg)

    to
        opacity .3
        -webkit-transform rotateY(360deg)
        transform rotateY(360deg)

// 仅数字加粗，font-weight=500
// 仅文字加粗，font-weight=600
// 数字+文字，font-weight=400
font-tiny()
    font-weight 100

font-extra-light()
    font-weight 200

font-ultra-light()
    font-weight 200

font-light()
    font-weight 300

font-normal()
    font-weight 400 // (Normal、Book、Roman、Regular)

font-medium()
    font-weight 500

font-semi-bold()
    font-weight 600

font-bold()
    font-weight 700

font-ultra-bold()
    font-weight 800

font-extra-bold()
    font-weight 800

font-heavy()
    font-weight 900

// 转场动画 如tab横滑
tween(duration = 0.3s)
    transition all duration cubic-bezier(.4, 0, .2, 1)