: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.svelte-b11dbo.svelte-b11dbo {
  overflow: visible
}

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

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

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

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