.ionis-circle-button {
  display: inline-block;
  position: relative;
  width: 43px;
  height: 43px;
}
.ionis-circle-button__image {
  display: inline-block;
  width: 43px;
  height: 43px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-image 0.2s;
}

/* Normal states */
.fill-primary {
  background-image: url('assets/circle-white.svg');
}
.fill-secondary {
  background-image: url('assets/circle-orange.svg');
}
.fill-tertiary {
  background-image: url('assets/circle-dark-purple.svg');
}

/* Hover states */
.ionis-circle-button:hover .fill-over-primary {
  background-image: url('assets/circle-white.svg');
}
.ionis-circle-button:hover .fill-over-secondary {
  background-image: url('assets/circle-orange.svg');
}
.ionis-circle-button:hover .fill-over-tertiary {
  background-image: url('assets/circle-dark-purple.svg');
}

.ionis-circle-button__hover-image {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.ionis-circle-button:hover .ionis-circle-button__hover-image,
.ionis-circle-button:focus .ionis-circle-button__hover-image {
  opacity: 1;
}