$smallShareItemOffset: 150%;

.share-wrapper {
    position: relative;
    .capture & {
        display: none;
    }
}
.share {
    @include flex-center;
}
.share-button {
    padding: 3px 7px 4px 7px;
    font-size: $smaller-font;
    color: $text-color;
    border-color: $border-color;
}
.share-popup {
    pointer-events: none;
    position: absolute;
    @include small{
    left: 50%;
    top: 50%;
    }
    @include medium-large{
        top: 0;
        left: 0;
    }
}
.share-options {
}
.share__link {
    display: block;
    flex-shrink: 0;
    &:last-child {
        margin-right: 0;
    }
    svg {
        height: 100%;
        width: 100%;
        filter: drop-shadow(0px 2px 3px rgba($pink, 0.7));

        path,
        circle {
            fill: $teal;
        }
    }
    // @include segmented;
    &:hover {
        svg path,
        svg circle {
            fill: $hover-color;
            // animation-name: blink2;
            // animation-duration: 300ms;
            // animation-iteration-count: infinite;
            // animation-timing-function: linear;
        }
    }
    &:hover::before {
        content: none;
    }
    .share-options & {
        transition: all 500ms cubic-bezier(0.87, -0.41, 0.19, 1.44);
        // transform: scale(0.8);
        opacity: 0;
        height: 24px;
        width: 24px;
        @include small {
            transform: translate(-50%, -50%);
        }
    }
    &.share__link--twitter {
        transition-delay: 0ms;
    }
    &.share__link--facebook {
        transition-delay: 100ms;
    }
    &.share__link--linkedin {
        transition-delay: 200ms;
    }
    &.share__link--email {
        transition-delay: 300ms;
    }
    &.share__link--image {   
        transition-delay: 400ms;             
    }
    @include small {
        top: 0;
        left: 0;
        position: absolute;
    }
    .share-popup-visible & {
        opacity: 1;
        pointer-events: auto;
        @include small {
            &.share__link--twitter {
                transform: translateX(-50%) translateY(-$smallShareItemOffset * 1.5 - 50%) scale(1);
            }
            &.share__link--facebook {
                transform: translateX(-$smallShareItemOffset - 50%)
                    translateY(-$smallShareItemOffset - 50%) scale(1);
            }
            &.share__link--linkedin {
                transform: translateX(-$smallShareItemOffset * 1.5 - 50%) translateY(-50%) scale(1);
            }
            &.share__link--email {
                transform: translateX(-$smallShareItemOffset - 50%)
                    translateY($smallShareItemOffset - 50%) scale(1);
            }
            &.share__link--image {                
                transform: translateX(-50%) translateY($smallShareItemOffset * 1.5 - 50%) scale(1);
            }
        }
        @include medium-large {
            &.share__link--twitter {
                transform: translateX(280%) scale(1);
            }
            &.share__link--facebook {
                transform: translateX(320%) scale(1);
            }
            &.share__link--linkedin {
                transform: translateX(390%) scale(1);
            }
            &.share__link--email {
                transform: translateX(460%) scale(1);
            }
            &.share__link--image {
                transform: translateX(530%) scale(1);
            }
        }
    }

    .ShareSite & {
        border-right: $border;
        flex-grow: 1;
        text-align: center;
        padding: 22px $spacing/3;

        &:hover {
            background: black(0.05);
        }
        svg {
            display: block;
            margin: 0 auto;
            height: 24px;
            width: 24px;
        }
        &:last-child {
            border-right: none;
        }
    }
}

.share-options {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto;
}

.home .share-options {
    max-width: 300px;
    a {
        @include small {
            height: 40px;
            width: 40px;
            padding: 10px;
        }
        @include medium-large {
            height: 60px;
            width: 60px;
            padding: 15px;
        }
    }
}

.ShareSite__Content {
    border-top: $border;
    display: flex;
    justify-content: space-evenly;
    border-right: $border;
    position: relative;
    z-index: 1;
}

.ShareSite {
    position: relative;
    .GridLines {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.Share__Icon {
    stroke: $teal;
    height: 16px;
    width: 16px;
    .share-button:hover &,
    .share-popup-visible & {
        stroke: $pink;
    }
}
