wishlist-icon {
  display: inline-block;
}

@keyframes heart-pop {
  0% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1.25);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
wishlist-toggle {
  transition: opacity 300ms ease;
  button {
    position: relative;
    border-radius: 50%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: calc(var(--typeBaseSize) * 0.85);
    padding: 0;
    cursor: pointer;
    z-index: 3;
    width: fit-content;
    .icon {
      pointer-events: none;
    }
    .icon.icon-heart {
      z-index: 3;
      display: block;
    }
    .icon.icon-heart path {
      fill: var(--colorBody);
      transition: fill 200ms ease-in-out;
    }
    &.fill .icon.icon-heart {
      animation: heart-pop 300ms ease;
      transform: scale(1);
    }
    &.fill .icon.icon-heart path {
      fill: var(--colorBtnPrimary);
    }
  }
}

.grid__item.grid-product wishlist-toggle.grid-toggle {
  position: absolute;
  overflow: visible;
  right: 3%;
  bottom: 3%;

  button {
    justify-content: center;
  }
  .icon.icon-heart path {
    fill: white;
  }
  button.fill .icon.icon-heart path {
    fill: var(--colorBtnPrimary);
  }
}

@media (hover: hover) {
  .grid__item.grid-product wishlist-toggle.grid-toggle {
    opacity: 0;
  }
  .grid__item.grid-product:hover wishlist-toggle.grid-toggle {
    opacity: 1;
  }
}

.product__main-photos wishlist-toggle.img-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  &.left {
    left: 0.5rem;
    right: auto;
  }
  button {
    padding: 6px;
  }
  button:disabled {
    color: var(--colorBtnPrimary);
  }
}
@media only screen and (max-width: 768px) {
  .product__main-photos wishlist-toggle.img-toggle.full {
    left: 10px;
    right: auto;
  }
}
@media only screen and (min-width: 769px) {
  .product__media-wrapper wishlist-toggle.img-toggle {
    top: 1.2rem;
    right: 1.2rem;
  }
  .grid__item.grid-product:has(wishlist-toggle.grid-toggle)
    .quick-product__btn {
    width: calc(100% - 45px);
    right: auto;
  }
  .grid__item.grid-product:has(.quick-product__btn)
    wishlist-toggle.grid-toggle {
    right: 10px;
    bottom: 10px;
    button {
      height: 30px;
    }
  }
}