.share-anchor__icon {
    opacity: 0;
    top: 10px;
    right: 0;
    cursor: pointer;
    transition: opacity .3s ease;
}

@keyframes background-highlight {
    from {background-color: var(--light-gray)}
    to   {background-color: white}
}

.frame {
    position: relative;

    > .share-anchor .share-anchor__icon {
        top: 0;
        right: -30px;
    }

    &:has(.content-container:hover) {
        > .share-anchor .share-anchor__icon {
            opacity: 1;
        }
    }

    &.has-anchor-focus {
        animation: background-highlight .7s 2;
    }

    &:has(.table) {
        .share-anchor__icon {
            top: -30px;
        }
    }
}

@media (min-width: 768px) {
    .frame {
        &:has(.table) {
            .share-anchor__icon {
                top: 25px;
                right: -50px;
            }
        }
    }
}