@import './variables.scss';
@import './mixins.scss';
.#{$tag-prefix-cls} {
      &.count {
            display: inline-block;
            .#{$title-prefix-cls}, .#{$count-prefix-cls} {
                display: inline-block;
                vertical-align: top;
                transition: all 0.36s;
                &.cursor {
                    cursor: pointer;
                }
            }
            .#{$title-prefix-cls} {
                &.small {
                    font-size: 12px;
                    height: 22px;
                    line-height: 22px;
                    padding: 0 5px 0 7px;
                    border-radius: 11px 0 0 11px;
                }
                &.medium {
                    min-width: 20px;
                    padding: 0 7px 0 10px;
                    font-size: 14px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    border-radius: 13px 0 0 13px;
                }
                &.large {
                    font-size: 16px;
                    height: 32px;
                    line-height: 32px;
                    padding: 0 10px 0 15px;
                    border-radius: 16px 0 0 16px;
                }
                &.big {
                    font-size: 24px;
                    height: 44px;
                    line-height: 44px;
                    padding: 0 10px 0 15px;
                    border-radius: 22px 0 0 22px;
                }
            }
            .#{$count-prefix-cls} {
                position: relative;
                
                &:hover {
                    &.praise {
                        .add-icon {
                            display: inline-block;
                        }
                    }
                    &.no-praise {
                        .subtract-icon {
                            display: inline-block;
                        }
                    }
                    
                }
                .count-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    color: #fff;
                    display:none;
                    &.font-scale {
                        @include AniQuote(fontScale .4s $Linear forwards);
                    }
                }
                .praise-num {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -7px;
                    margin-top: -7px;
                    display: inline-block;
                    font-size: 15px;
                    opacity: 0;
                    line-height: 1;
                    &.font-top-fade {
                        @include AniQuote(fontTopFade 0.6s $Linear);
                    }
                }
                &.small {
                    font-size: 12px;
                    height: 22px;
                    line-height: 22px;
                    padding: 0 7px 0 5px;
                    border-radius:0 11px 11px 0;
                    .count-icon {
                        margin-left: -6px;
                        margin-top: -6px;
                    }
                    .praise-num {
                        font-size: 14px;
                    }
                }
                &.medium {
                    min-width: 20px;
                    padding: 0 8px 0 5px;
                    font-size: 14px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    border-radius: 0 13px 13px 0;
                    .count-icon {
                        margin-left: -7px;
                        margin-top: -7px;
                    }
                    .praise-num {
                        font-size: 14px;
                    }
                }
                &.large {
                    font-size: 16px;
                    height: 32px;
                    line-height: 32px;
                    padding: 0 10px 0 5px;
                    border-radius: 0 16px 16px 0;
                    .count-icon {
                        margin-left: -8px;
                        margin-top: -8px;
                    }
                }
                &.big {
                    font-size: 24px;
                    height: 44px;
                    line-height: 44px;
                    padding: 0 10px 0 5px;
                    border-radius: 0 22px 22px 0;
                    .count-icon {
                        margin-left: -12px;
                        margin-top: -12px;
                    }
                }
            }
      }
}