/*
"Teilen" block (resources/views/components/share.blade.php) - shared by every group and itemType.
Round buttons in each service's own colour with a white glyph. A group changes the look through the
variables below in its site.css; the markup stays the same. The defaults are wrapped in :where() (no
specificity): this file is pushed onto the layout's style stack AFTER site.css, and a group's .share rule would
otherwise lose to them.
*/
:where(.share) {
    --share-size: 2.5rem;
    --share-gap: .5rem;
    --share-icon-size: 1.15rem;
    --share-copy-bg: #6c757d;
    --share-native-bg: #343a40;
    --share-mail-bg: var(--brand-primary, #6c757d);
}

/* Heading on the left, the "copied" message on the right: the row has its heading's height whether
or not the message is there, so showing it moves nothing. */
.share-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.share-status {
    font-size: .875rem;
    color: var(--bs-success);
}

.share-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--share-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--share-size);
    height: var(--share-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--share-bg, #6c757d);
    color: #fff;
    font-size: var(--share-icon-size);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.share-link:hover {
    color: #fff;
    filter: brightness(.88);
}

.share-link:active {
    transform: scale(.94);
}

.share-link:focus-visible {
    color: #fff;
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* The brand colours of the services. Facebook deliberately the older #3b5998: its current blue is too close to
BY's own brand colour (db978b4). */
.share-link--whatsapp {
    --share-bg: #25d366;
}

.share-link--facebook {
    --share-bg: #3b5998;
}

.share-link--x {
    --share-bg: #000;
}

.share-link--linkedin {
    --share-bg: #0a66c2;
}

.share-link--email {
    --share-bg: var(--share-mail-bg);
}

.share-link--copy {
    --share-bg: var(--share-copy-bg);
}

.share-link--native {
    --share-bg: var(--share-native-bg);
}

/* The device's share sheet only where share.js found one (a phone), see the class it sets on <html>. */
.share-native {
    display: none;
}

.can-share .share-native {
    display: list-item;
}

/* "Copy": the chain shows until share.js marks the button .is-copied, then the check mark. */
.share-link .share-icon-done,
.share-link.is-copied .share-icon-copy {
    display: none;
}

.share-link.is-copied .share-icon-done {
    display: inline;
}

/* The chain glyph is drawn smaller than the brand logos in the same box. */
.share-icon-copy {
    font-size: 1.35em;
}

@media (prefers-reduced-motion: reduce) {
    .share-link {
        transition: none;
    }
}