[data-bs-theme=light] {
    --bs-fb-icon: url(images/facebook.svg);
    --bs-tg-icon: url(images/telegram.svg);
    --bs-rd-icon: url(images/reddit.svg);
    --bs-copy-icon: url(images/copy.svg);
}

[data-bs-theme=dark] {
    --bs-fb-icon: url(images/facebook-white.svg);
    --bs-tg-icon: url(images/telegram-white.svg);
    --bs-rd-icon: url(images/reddit-white.svg);
    --bs-copy-icon: url(images/copy-white.svg);
}

.bb-social-plugin-share { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; width: 100%; padding: 1rem; background-color: #eeeeee; }
.bb-social-plugin-share-icons { display: flex; flex-direction: row; align-items: center; }
.bb-social-plugin-share-fb { background-image: var(--bs-fb-icon); }
.bb-social-plugin-share-telegram { background-image: var(--bs-tg-icon); }
.bb-social-plugin-share-reddit { background-image: var(--bs-rd-icon); }
.bb-social-icon { width: 2rem; height: 2rem; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 1; transition: .5s; margin: 0 .5rem; }
.bb-social-icon:first-of-type { margin-left: 0; }
.bb-social-icon:hover { opacity: .75; transition: .5s; }
.bb-social-plugin-share-copy { height: 2rem; padding: 0 1rem 0 2rem; display: flex; align-items: center; justify-content: center; background-color: transparent !important; border: none !important; background-image: var(--bs-copy-icon); background-position: left center; background-repeat: no-repeat; background-size: contain; opacity: 1; transition: .5s; position: relative; margin: 0 0 0 .5rem; }
.bb-social-plugin-share-copy span { display: inline-block; margin: 0 0 0 .25rem; font-weight: 700; }
.bb-social-plugin-share-copy.copied::after { content: ""; width: 1.5rem; height: 1.5rem; position: absolute; bottom: -.75rem; left: -.75rem; background-image: url('images/check.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.bb-social-plugin-share-copy.copy-error::after { content: "\2715"; width: 1.5rem; height: 1.5rem; position: absolute; bottom: .75rem; left: -.75rem; color: #d33; font-size: .75rem; line-height: 1; }
.bb-social-icon .screen-reader-text { display: none; }

@media (max-width: 768px) {
    .bb-social-plugin-share { justify-content: center; flex-wrap: wrap; padding: 1rem 1rem .5rem 1rem; }
    .bb-social-icon, .bb-social-icon:first-of-type { margin: 0 .5rem .5rem .5rem; }
    .bb-social-plugin-share-copy span { display: none; }
    .bb-social-plugin-share-copy { margin: 0 .5rem .5rem .5rem; padding: 0 0 0 2rem; }
}