.wp-block-tn-share-post {
    --_icon-size: 30px;
    --_icon-padding: 6px; /* keep it even */
    --_svg-size: calc(var(--_icon-size) - var(--_icon-padding));
    --_svg-color: var(--wp--preset--color--text);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    transition: opacity 0.25s ease;
}
.wp-block-tn-share-post:not(:has(.wp-block-tn-share-post-link)) {
    display: none;
}

.wp-block-tn-share-post-link {
    width: var(--_icon-size);
    aspect-ratio: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 50%;
}
.wp-block-tn-share-post-link:hover {
    opacity: 0.85;
}
.wp-block-tn-share-post-link svg {
    width: var(--_svg-size);
    height: var(--_svg-size);
    aspect-ratio: 1;
}
.wp-block-tn-share-post-link path {
    fill: var(--_svg-color);
}

.wp-block-tn-share-post-message {
    --_margin: 10px;
    position: fixed;
    bottom: var(--_margin);
    left: var(--_margin);
    translate: 0 calc(var(--_margin) + 150px);
    z-index: 1000;
    background-color: var(--wp--preset--color--primary-alt);
    color: var(--wp--preset--color--primary);
    border: 2px solid var(--wp--preset--color--primary);
    padding: 5px 8px;
    margin-right: var(--_margin);
    line-height: 1.2;
    border-radius: 5px;
    max-width: 400px;
    transition: translate 0.4s ease;
}
.wp-block-tn-share-post-message[data-visible="true"] {
    translate: 0 0;
}