/* =========================================================
   WISHLIST
   Reusable wishlist styles
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Product Wishlist Heart
|--------------------------------------------------------------------------
*/

.wishlist-btn {
    cursor: pointer;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;

    user-select: none;
}


.wishlist-btn:hover {
    transform: scale(1.08);
}


/*
|--------------------------------------------------------------------------
| Active / Added
|--------------------------------------------------------------------------
*/

.wishlist-btn.active {
    color: #ef4444 !important;
}


.wishlist-btn.active::before {
    color: #ef4444;
}


/*
|--------------------------------------------------------------------------
| Loading
|--------------------------------------------------------------------------
*/

.wishlist-btn[data-loading="true"] {
    opacity: 0.5;

    pointer-events: none;

    cursor: wait;
}


/*
|--------------------------------------------------------------------------
| Header Wishlist Count
|--------------------------------------------------------------------------
*/

.wishlist-count {
    position: absolute;

    top: -7px;
    right: -10px;

    min-width: 17px;
    height: 17px;

    padding: 2px 5px;

    display: none;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #ef4444;

    color: #fff;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    z-index: 5;
}


/*
|--------------------------------------------------------------------------
| Optional notification-style heart button
|--------------------------------------------------------------------------
*/

.wishlist-heart-button {
    border: 0;

    background: transparent;

    padding: 0;

    color: #64748b;

    cursor: pointer;
}


.wishlist-heart-button:hover {
    color: #ef4444;
}


.wishlist-heart-button.active {
    color: #ef4444;
}


/*
|--------------------------------------------------------------------------
| Error state
|--------------------------------------------------------------------------
*/

.wishlist-btn.wishlist-error {
    animation: wishlistShake 0.25s ease;
}


@keyframes wishlistShake {

    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    50% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }

}