.btn-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: transparent;
    color: #000;
    border: 1px solid black;
    border-radius: 100%;
    padding: 5.5px 6px 6.25px 6px;
    cursor: pointer;
    line-height: 1;
    font-size: 28px;
}

.btn-favorite:hover {
    background-color: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-favorite:focus {
    background-color: inherit;
    color: inherit;
}

.btn-favorite:focus-visible {
    background-color: inherit;
    outline: 2px solid var(--ci-emerald);
    outline-offset: 2px;
}

.btn-favorite .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.btn-favorite.favorited {
    color: var(--ci-emerald);
}

.btn-favorite.favorited .add,
.btn-favorite:not(.favorited) .remove {
    display: none;
}

.loader {
    display: none;
}

.btn-favorite.loading {
    background-color: var(--ci-emerald);
}

.btn-favorite.loading > *:not(.loader) {
    opacity: 0;
}

.btn-favorite.loading .loader {
    display: block;
}

/* HTML: <div class="loader"></div> */
.loader {
    position: absolute;
    inset: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid #514b82;
    animation:
        l20-1 0.8s infinite linear alternate,
        l20-2 1.6s infinite linear;
}
@keyframes l20-1{
    0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
    12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
    25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
    50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
    100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
    0%    {transform:scaleY(1)  rotate(0deg)}
    49.99%{transform:scaleY(1)  rotate(135deg)}
    50%   {transform:scaleY(-1) rotate(0deg)}
    100%  {transform:scaleY(-1) rotate(-135deg)}
}