.icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--text-color3);
}

.icon:hover {
    background-color: var(--primary-color);
}

.icon-cmt { 
    mask: url('/static/icon/cmt.svg') no-repeat center;
    -webkit-mask: url('/static/icon/cmt.svg') no-repeat center;
}

.icon-view {
    mask: url('/static/icon/view.svg') no-repeat center;
    -webkit-mask: url('/static/icon/view.svg') no-repeat center;
}

.icon-time {
    mask: url('/static/icon/time.svg') no-repeat center;
    -webkit-mask: url('/static/icon/time.svg') no-repeat center;
}

.icon-like {
    mask: url('/static/icon/like-off.svg') no-repeat center;
    -webkit-mask: url('/static/icon/like-off.svg') no-repeat center;
}

.icon-like:not(.active):hover {
    animation: hover-pulse 0.8s ease-in-out;
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px var(--primary-color));
}

.icon-like.active {
    background-color: #f29c9f;
    mask: url('/static/icon/like-on.svg') no-repeat center;
    -webkit-mask: url('/static/icon/like-on.svg') no-repeat center;
    animation: like-pop 0.6s forwards;
}


.icon-doc-menu {
    mask: url('/static/icon/doc-menu.svg') no-repeat center;
    -webkit-mask: url('/static/icon/doc-menu.svg') no-repeat center;
}

.icon-last-step {
    mask: url('/static/icon/last-step.svg') no-repeat center;
    -webkit-mask: url('/static/icon/last-step.svg') no-repeat center;
}

.icon-next-step {
    mask: url('/static/icon/next-step.svg') no-repeat center;
    -webkit-mask: url('/static/icon/next-step.svg') no-repeat center;
}

.icon-close {
    mask: url('/static/icon/close.svg') no-repeat center;
    -webkit-mask: url('/static/icon/close.svg') no-repeat center;
}


/* 定义动画 */
@keyframes hover-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.18) rotate(8deg);
    }

    50% {
        transform: scale(1.12) rotate(-6deg);
    }

    75% {
        transform: scale(1.15) rotate(3deg);
    }
}

@keyframes like-pop {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.5);
    }

    50% {
        transform: scale(0.9);
    }

    75% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}