.section-homepage,
.template-edit {
    .share {
        display: none;
    }
}

.share {
    margin: 0 auto 40px;
    display: none;
    flex-flow: row nowrap;

    &.share-visible {
        display: flex;
    }

    .share-slider {
        display: inline-block;
        white-space: nowrap;
        position: relative;
        width: 100%;
        max-width: 200px;
        margin-left: auto;
    }

    .share-icon {
        width: 45px;
        height: 45px;
        padding: 8px;
        display: inline-block;
        color: #fff;
        text-align: center;

        &:before {
            @include make-ita('\1f4e2');
            vertical-align: middle;
        }
    }

    .share-title {
        transition: width $animation-speed ease-in-out;
        background: $gray-bg;
        width: 100%;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;

        a.share-toggle {
            padding: 6px 20px;
            height: 45px;
            display: block;
            text-align: right;

            span {
                font-size: 1.2em;
            }
        }
    }

    .share-button {
        display: inline-block;
        background: $social-icon-bg;
        width: 45px;
        height: 45px;
        color: #fff;
    }

    .share-options {
        transition: width $animation-speed ease-in-out;
        width: 0%;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;

        ul.social-list {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: right;

            li {
                display: inline-block;
                padding-right: 5px;
                background: #fff;

                a {
                    display: flex;
                    background: $brand-primary;
                    text-align: center;
                    align-items: center;
                    justify-content: center;
                    width: 45px;
                    height: 45px;
                    padding: 7px;

                    svg,
                    i:before {
                        color: #fff;
                        width: 100%;
                        font-size: 1.5em;
                    }

                    .u-hiddenVisually {
                        @include sr-only;
                    }
                }
            }
        }
    }

    &.open {
        .share-options {
            width: 275px; // 320px min mobile - 45px button
            margin: 0;
        }

        .share-title {
            width: 0%;
        }

        .share-icon {
            color: $social-icon-bg;
            background: $gray-bg;
        }
    }

    @media (max-width: $screen-xs-max) {
        max-width: 200px;
        margin-right: 15px;
    }
}
