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

.external-circle.svelte-1cc0kp6.svelte-1cc0kp6 {
  overflow: visible
}

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

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

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

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