.animated-arrow {
  --color-default: $grey;
  --color-hover: $orange;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.animated-arrow svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.3, 0.1, 0.26, 1);
}
.animated-arrow svg:first-child {
  color: var(--color-default);
}
.animated-arrow svg:last-child {
  color: var(--color-hover);
  transform: translateX(-120%) translateY(120%);
}
.animated-arrow-trigger:hover .animated-arrow svg:first-child {
  transform: translateX(120%) translateY(-120%);
}
.animated-arrow-trigger:hover .animated-arrow svg:last-child {
  transform: translateX(0) translateY(0);
}