//
// 计数器
// ============================================================

.count-wrapper
    @extend .display-inline-flex
    &.disabled
       @extend .background-transparent

    &.active
        .count-quantity
            animation: .5s quantity-active
            @keyframes quantity-active
                0%
                    @extend .display-none
                    @extend .opacity-0
                1%
                    @extend .display-inline-block
                100%
                    @extend .opacity-1
                    transform: translateX(0)

        .count-icon-minus
            animation: .5s icon-minus-active
            @keyframes icon-minus-active
                0%
                    @extend .display-none
                    @extend .opacity-0
                1%
                    @extend .display-inline-block
                100%
                    @extend .opacity-1
                    transform: translateX(0) rotate(0)

    &.unactive
        .count-quantity
            animation: .5s quantity-unactive
            @keyframes quantity-unactive
                0%
                    opacity: 1
                    transform: translateX(0)
                100%
                    opacity: 0
                    transform: translateX(100%)

        .count-icon-minus
            animation: .5s icon-minus-unactive
            @keyframes icon-minus-unactive
                0%
                    opacity: 1
                    transform: translateX(0) rotate(0)
                100%
                    opacity: 0
                    transform: translateX(288%) rotate(180deg)

    .count-icon-minus
        @extend .display-none
        @extend .opacity-0
        @extend .animation-timing-function-fill-mode
        transform: translateX(288%) rotate(180deg)


    .count-icon-minus, .count-icon-plus
        @extend .transition-1s
        @extend .cursor-pointer
        &:active
            @extend .color

    .iconfont
        @extend .font-size-lg

    .count-quantity
        @extend .display-none
        @extend .text-align-center
        @extend .opacity-0
        @extend .animation-timing-function-fill-mode
        +px(min-width, 38px)
        +px(line-height, 30px)
        transform: translateX(100%)