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