@layer components {
  [data-favorite-favorite] .favorite {
    transition: color .3s;
  }
  [data-favorite-favorite=true] {
    background-color: #e4ffed;
  }
  [data-favorite-favorite=true] .favorite {
    visibility: visible;
    color: rgba(15, 104, 145, 0.8);
  }
  [data-favorite-favorite=false] .favorite:hover {
    visibility: visible;
    color: rgba(15, 104, 145, 0.3);
  }
  [data-favorite-favorite=true] .favorite:hover {
    color: rgba(15, 104, 145, 0.6);
  }
}