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

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

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

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

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