.border-animation {
  position: relative;
  overflow: hidden;
}

.svg-round-border-animation {
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(100%);
  height: calc(100%);
  fill: none;
  stroke: var(--color-border);
  stroke-width: var(--stroke-width);
  transform: rotate(-90deg); /* Rotate to start from top instead of right */

  z-index: 1;
}

.svg-round-border-animation .running-ring {
  stroke: var(--color-primary);
  stroke-dasharray: var(--svg-ring-length) var(--svg-ring-length);
  stroke-dashoffset: var(--svg-ring-length);
}

.border-animation.gaze-focused .svg-round-border-animation .running-ring,
.border-animation:hover .svg-round-border-animation .running-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--duration-focus) linear;
}

.click-animation-color:hover,
.click-animation-color.border-animation.gaze-focused {
  animation: colorInvert var(--duration-click) ease-in-out var(--duration-focus)
    forwards;
}

@keyframes colorInvert {
  0% {
    background-color: var(--color-background);
    color: var(--color-primary);
  }
  50% {
    background-color: var(--color-primary);
    color: var(--color-background);
  }
  100% {
    background-color: var(--color-background);
    color: var(--color-primary);
  }
}