:where(.share) {
--share-size: 2.5rem;
--share-gap: .5rem;
--share-icon-size: 1.15rem;
--share-copy-bg: #6c757d;
--share-native-bg: var(--brand-primary, #343a40);
--share-mail-bg: var(--brand-primary, #6c757d);
}
.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: nowrap;
gap: var(--share-gap);
margin: 0;
padding: 0;
list-style: none;
}
.share-links > li {
flex: 0 1 var(--share-size);
min-width: 0;
}
.share-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
aspect-ratio: 1;
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;
}
.share-link--whatsapp {
--share-brand: #25d366;
}
.share-link--facebook {
--share-brand: #3b5998;
}
.share-link--x {
--share-brand: #000;
}
.share-link--linkedin {
--share-brand: #0a66c2;
}
:is(.share-link--whatsapp, .share-link--facebook, .share-link--x, .share-link--linkedin) {
--share-bg: var(--share-mail-bg);
}
@media (hover: hover) {
:is(.share-link--whatsapp, .share-link--facebook, .share-link--x, .share-link--linkedin):hover {
--share-bg: var(--share-brand);
filter: none;
}
}
@media (hover: none) {
:is(.share-link--whatsapp, .share-link--facebook, .share-link--x, .share-link--linkedin) {
--share-bg: var(--share-brand);
}
:is(.share-link--whatsapp, .share-link--facebook, .share-link--x, .share-link--linkedin):is(:hover, :active) {
--share-bg: var(--share-mail-bg);
filter: none;
}
}
.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);
}
.share-native {
display: none;
}
.can-share .share-native {
display: list-item;
}
.share-link .share-icon-done,
.share-link.is-copied .share-icon-copy {
display: none;
}
.share-link.is-copied .share-icon-done {
display: inline;
}
.share-icon-copy {
font-size: 1.35em;
}
@media (prefers-reduced-motion: reduce) {
.share-link {
transition: none;
}
}