.favorite-toggle {
  align-items: center;
  background: var(--favorite-background, transparent);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--favorite-foreground, var(--foreground, var(--fg)));
  cursor: pointer;
  display: grid;
  height: var(--favorite-size, 2.2rem);
  padding: var(--favorite-padding, 0.48rem);
  place-items: center;
  position: absolute;
  width: var(--favorite-size, 2.2rem);
  z-index: var(--favorite-z-index, auto);
}

.favorite-toggle img {
  display: block;
  filter: none;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

html[data-theme="dark"] .favorite-toggle img {
  filter: invert(1);
}

.favorite-remove-icon {
  display: none !important;
}

.favorite-toggle.is-saved:hover .favorite-icon,
.favorite-toggle.is-saved:focus-visible .favorite-icon {
  display: none;
}

.favorite-toggle.is-saved:hover .favorite-remove-icon,
.favorite-toggle.is-saved:focus-visible .favorite-remove-icon {
  display: block !important;
}

.favorite-toggle:hover,
.favorite-toggle:focus-visible {
  background: var(--favorite-foreground, var(--foreground, var(--fg)));
  border-color: var(--favorite-foreground, var(--foreground, var(--fg)));
  color: var(--favorite-background, var(--background, var(--bg)));
  outline: none;
}

.favorite-toggle:hover img,
.favorite-toggle:focus-visible img {
  filter: invert(1);
}

html[data-theme="dark"] .favorite-toggle:hover img,
html[data-theme="dark"] .favorite-toggle:focus-visible img {
  filter: none;
}