:where(svg.arrow-circle) {
  height: calc(var(--custom-rem, 1rem) * 1.8);
  width: calc(var(--custom-rem, 1rem) * 1.8);
  overflow: visible;
  --arrow-dasharray: 54;
  --arrow-dasharray-inverse: -54;
  --circle-icon-color-default: #0065BD;
  --circle-icon-color-active: #0065BD;
  --circle-color-default: #DFE2E5;
  --circle-color-active: #0065BD
}

.arrow-circle {
  overflow: visible
}

.arrow-circle .circle {
  transition: stroke 1s ease;
  stroke: var(--circle-color-default)
}

@media (hover: hover) and (pointer: fine) {
   svg.arrow-circle.animated:hover > .circle,
   svg.arrow-circle.animated[data-active=true] > .circle,
   .icon-circle-container:hover svg.arrow-circle > .circle {
    stroke: var(--circle-color-active, var(--circle-color-default))
  }
}

.arrow-circle .arrow {
  transition: stroke 1s ease;
  stroke: var(--circle-icon-color-default)
}

@media (hover: hover) and (pointer: fine) {
  svg.arrow-circle.animated:hover > .arrow,
  svg.arrow-circle.animated[data-active=true] > .arrow,
  .icon-circle-container:hover svg.arrow-circle > .arrow {
    stroke: var(--circle-icon-color-active, var(--circle-color-default))
  }
}