.social_share {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 9999;
    --size: 56px;
    --gap: 10px;
    --bg: #111;
    --fg: #fff;
    --btn-bg: #1f2937
}

.social_share .share__cb {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.social_share .share__fab {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg);
    color: var(--fg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease
}

.social_share .share__fab .icon {
    transition: transform 0.25s ease;
    display: inline-block
}

.social_share .share__fab:active {
    transform: scale(0.96)
}

.social_share .share__list {
    position: absolute;
    inset: auto 0 calc(var(--size) + 0px) 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none
}

.social_share .share__list>li {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(0) scale(0.8);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
    transition-delay: calc(var(--i) * 30ms)
}

.social_share .share__btn {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--btn-bg);
    color: var(--fg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-decoration: none
}

.social_share .share__cb:checked~.share__list {
    pointer-events: auto
}

.social_share .share__cb:checked~.share__list>li {
    transform: translateY(calc(-1 * var(--i) * (var(--size) + var(--gap)))) scale(1);
    opacity: 1
}

.social_share .share__cb:checked+.share__fab .icon {
    transform: rotate(180deg)
}

.social_share .share__btn:hover {
    filter: brightness(1.1);
    transform: translateZ(0)
}

@media (prefers-reduced-motion:reduce) {
    .social_share .share__list>li,.social_share .share__fab,.social_share .share__fab .icon {
        transition: none
    }
}