.js-course-favorite-trigger {
  transition: color 0.2s ease;
}

.js-course-favorite-trigger .favourite-heart-icon path {
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

.js-course-favorite-trigger--banner .favourite-heart-icon path {
  stroke: #ffffff;
  fill: transparent;
}

.js-course-favorite-indicator--banner .favourite-heart-icon path {
  stroke: #ffffff;
  fill: transparent;
}

.js-course-favorite-trigger.is-favorited .favourite-heart-icon path {
  fill: #37506e;
  stroke: #37506e;
}

.js-course-favorite-indicator--banner.is-favorited .favourite-heart-icon path {
  fill: #ffffff;
  stroke: #ffffff;
}

/* Loading spinner */
.js-course-favorite-trigger.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.js-course-favorite-trigger .js-course-favorite-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: est-fav-spin 0.6s linear infinite;
  flex-shrink: 0;
}

.js-course-favorite-trigger.is-loading .js-course-favorite-spinner {
  display: inline-block;
}

.js-course-favorite-trigger.is-loading .favourite-heart-icon {
  display: none;
}

@keyframes est-fav-spin {
  to {
    transform: rotate(360deg);
  }
}