//== Variables
@hdeng-social-bg-color: @hdeng-color-night;

//== Generates
.hdeng-social-critical-generate() {
    // Silence
}

.hdeng-social-generate() {
    .social-links {
        margin: 0 0 @hdeng-spacing;
        padding: 0;

        list-style: none;
    }

    .social-links--centered {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .social-links__item {
        display: inline-block;
    }

    // Icons
    *[class*='icon-social-'] {
        display: inline-block;
        height: 40px;
        width: 40px;

        background-color: @hdeng-color-moonlight;
        background-repeat: no-repeat;
        background-size: 40px 40px;
        background-position: center center;

        border-radius: 2px;


        & + *[class*='icon-social-'] {
            margin-left: floor(@hdeng-spacing / 4);
        }

        &:hover {
            background-color: @hdeng-social-bg-color;
        }

        span {
            .hdeng-visuallyhidden();
        }
    }

    .icon-social-facebook {
        background-image: url('img/facebook.svg');

        .no-svg & {
            background-image: url('img/facebook.png');
        }
    }

    .icon-social-googleplus {
        background-image: url('img/googleplus.svg');

        .no-svg & {
            background-image: url('img/googleplus.png');
        }
    }

    .icon-social-linkedin {
        background-image: url('img/linkedin.svg');

        .no-svg & {
            background-image: url('img/linkedin.png');
        }
    }

    .icon-social-youtube {
        background-image: url('img/youtube.svg');

        .no-svg & {
            background-image: url('img/youtube.png');
        }
    }

    .icon-social-twitter {
        background-image: url('img/twitter.svg');

        .no-svg & {
            background-image: url('img/twitter.png');
        }
    }

    .icon-social-instagram {
        background-image: url('img/instagram.svg');

        .no-svg & {
            background-image: url('img/instagram.png');
        }
    }

    .icon-social-vimeo {
        background-image: url('img/vimeo.svg');

        .no-svg & {
            background-image: url('img/vimeo.png');
        }
    }
}
