.action_has {
  --color: 0 0% 60%;
  --color-has: 211deg 100% 48%;
  --sz: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--sz) * 3.0);
  width: calc(var(--sz) * 3.0);
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid hsl(var(--color));
}

.has_saved:hover {
  border-color: hsl(var(--color-has));
}
.has_liked:hover svg,
.has_saved:hover svg {
  color: hsl(var(--color-has));
}

.has_liked svg,
.has_saved svg {
  overflow: visible;
  height: calc(var(--sz) * 2.00);
  width: calc(var(--sz) * 2.00);
  --ease: cubic-bezier(0.5, 0, 0.25, 1);
  --zoom-from: 1.75;
  --zoom-via: 0.75;
  --zoom-to: 1;
  --duration: 1s;
}

.has_saved:hover path[data-path="box"] {
  transition: all 0.3s var(--ease);
  animation: has-saved var(--duration) var(--ease) forwards;
  fill: hsl(var(--color-has) / 0.35);
}
.has_saved:hover path[data-path="line-top"] {
  animation: has-saved-line-top var(--duration) var(--ease) forwards;
}
.has_saved:hover path[data-path="line-bottom"] {
  animation: has-saved-line-bottom var(--duration) var(--ease) forwards,
    has-saved-line-bottom-2 calc(var(--duration) * 1) var(--ease)
      calc(var(--duration) * 0.75);
}

@keyframes has-saved-line-top {
  33.333% {
    transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from));
    d: path("M 3 5 L 3 8 L 3 8");
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
  }
}
@keyframes has-saved-line-bottom {
  33.333% {
    transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from));
    d: path("M 17 20 L 17 13 L 7 13 L 7 20");
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
    d: path("M 17 21 L 17 21 L 7 21 L 7 21");
  }
}
@keyframes has-saved-line-bottom-2 {
  from {
    d: path("M 17 21 L 17 21 L 7 21 L 7 21");
  }
  to {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
    d: path("M 17 20 L 17 13 L 7 13 L 7 20");
    fill: white;
  }
}
@keyframes has-saved {
  33.333% {
    transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from));
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
  }
}