/* TODO: Let's make focus and/or focus-visible BOLDER */

/**
 * Unliked state
 */
:root {
    --bs24-wishlist-heart-box-shadow-color: #4d4d4d; /* 4x lighter than #000 (initial) */
    --bs24-wishlist-heart-hover-color: #f98080; /* 4x lighter than #f74949 (initial) */

    /* --l: #7801167f, #f7b5387f, #db7c267f, #d8572a7f, #c32f277f, #7801167f; */
    /* --bs24-heartbeat-color-sequence: #a51f1f7f, #d64b4b7f, #f749497f, #f980807f, #fbbaba7f, #a51f1f7f; */
    --bs24-heartbeat-color-sequence: #ffbaba, #f98080, #f74949, #f98080, #ffc7c7, #ffbaba;
}

/**
 * 
 */



/* Favourite product item */
/* TODO: [Webpack]: Wrap with purgeIgnore comment */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* .products.row  */
.product .product-miniature .thumbnail-container {
    width: 100%;
}

.product.is-favourite {
    /** Hook for pink outline */
    position: relative;
}
.bs24-products-slider .product.is-favourite {
    /** More space in sliders */
    position: static;
}

.product.is-favourite .product-miniature .thumbnail-container {
    position: static;
    z-index: 1;

    padding: 4px;
    /** SYNC: set to --b */
}

.product.is-favourite .product-miniature .thumbnail-top {
    z-index: 2;
}

.product.is-favourite .product-miniature .product_name_custom {
    padding: 0.3rem;
}

/* .products.row  */
.product.is-favourite .product-miniature .thumbnail-container,
.product.is-favourite .product-miniature .thumbnail-container > * {
    /* background: #fff !important; */
    border-radius: 0;
    border: none;
}

/* Animated border */
/* @mixin animatedBorder */
/* .products.row  */
.product.is-favourite .product-miniature .thumbnail-container:before {
    /* border: 1px solid var(--bs24-wishlist-heart-hover-color); */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* padding: 4px; */

    /* --b: 6px; */
    /* --b: 0; */

    --gradient: repeating-conic-gradient(
        from var(--angle, 0deg),
        var(--bs24-heartbeat-color-sequence, #0000 0% 70%, #0000ff7f)
    );

    box-sizing: border-box;
    /* border: solid var(--b) transparent; */
    /* border-radius: calc(2 * var(--b)); */
    border-radius: 10px;

    background: var(--gradient) border-box;

    filter: var(--f, url(#glow-0));
    animation: a 2s linear infinite;
}
@keyframes a {
  to {
    --angle: 1turn;
  }
}

/** FIX: Gap between content and animated border */
/* @mixin gapBetweenAnimatedBorder */
/* .products.row  */
.product.is-favourite .product-miniature .thumbnail-container:after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    margin: 4px;
    border: 8px solid #fff;
    border-radius: 6px;
    background-color: #fff;
}

/* HOVER: Favourite product item */
/* .products.row  */
.product:hover .bs24-wishlist-btn.active {
    /** looks bad */
    /* animation: heartbeat 1.2s ease infinite; */

    /* TODO: add `--bs24-wishlist-heart-hover-color` to "Add to cart" */
    /*? TODO: "Add to cart" btn also "heartbeats" */
}
/* .products.row  */
.product:hover .bs24-wishlist-btn.active {
    /** looks bad */
    /* animation: heartbeat 1.2s ease infinite; */

    /* TODO: add `--bs24-wishlist-heart-hover-color` to "Add to cart" */
    /*? TODO: "Add to cart" btn also "heartbeats" */
}
/* TODO: Mobile - currently viewed (on central viewport while scroll) favourite product on the list */



/**
 * Favourite btn styles
 */

.bs24-wishlist-btn {
    cursor: pointer;
    background: #fff;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    padding: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    
    /* border: 1px solid #000; */
    border: none; /* maybe it's bad idea */

    -webkit-box-shadow: 0px 0px 12px -3px var(--bs24-wishlist-heart-box-shadow-color);
    -moz-box-shadow: 0px 0px 12px -3px var(--bs24-wishlist-heart-box-shadow-color);
    box-shadow: 0px 0px 12px -3px var(--bs24-wishlist-heart-box-shadow-color);

    transition:
        box-shadow 0.3s ease,
        /* transform 0.2s ease-in-out, */
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.3s ease;
}
.bs24-wishlist-btn:hover,
button.bs24-wishlist-btn:focus,
button.bs24-wishlist-btn:focus-visible {
    /* opacity: 0.4; */

    /* EXAMPLE:
    --bs24-wishlist-heart-box-shadow-color: #000000;
    --bs24-wishlist-heart-box-shadow-color: #4d4d4d;
     */

    /* FROM: --bs24-wishlist-heart-box-shadow-color: #f74949; */
    /* TO: */ --bs24-wishlist-heart-box-shadow-color: #f98080;
    
    /* Remove default effect */
    outline: none;
}

.bs24-wishlist-btn .bs24-heart-icon {
    font-size: 21px;
    pointer-events: none;
    transition: color 0.3s ease;
}
.bs24-wishlist-btn:hover .bs24-heart-icon,
button.bs24-wishlist-btn:focus .bs24-heart-icon,
button.bs24-wishlist-btn:focus-visible .bs24-heart-icon {
    color: var(--bs24-wishlist-heart-hover-color);
}
.bs24-wishlist-btn:hover .bs24-heart-icon{
    transform: scale(1.1);
}

/**
 * Liked state
 */
 /* TODO: favorite_border -> favorite */
.bs24-wishlist-btn.active {
    --bs24-wishlist-heart-box-shadow-color: #f74949;
    color: var(--bs24-wishlist-heart-box-shadow-color);
    border-color: var(--bs24-wishlist-heart-box-shadow-color);

    animation: heartbeat 0.4s ease;
    /* animation: heartbeat 1.2s ease-in-out; */
}
.bs24-wishlist-btn.active:hover,
button.bs24-wishlist-btn.active:focus {
    color: var(--bs24-wishlist-heart-box-shadow-color);
}
button.bs24-wishlist-btn.active:focus-visible {
    color: #f74949;
}

/**
 * Tapped/hove#f74949 product
 */
 
/* TODO: If user tapped on product (watches it) or this product is on central of viewport then shake the heart btn */
/* Wait a second before run (e.g. debounce) */



/**
 * Animations and effects
 */

@keyframes heartbeat {
    /* two times (unnaturally) */
    /* 0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    } */

    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* .heartbeat {
  animation: heartbeat 1.2s ease-in-out;
} */