//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .footer.content {
        .social-sites-list {
            &:extend(.abs-add-box-sizing all);
            .lib-list-reset-styles();
            font-size: 0;
            li {
                display: inline-block;
            }
            a {
                display: block;
                padding: 5px 14px;
            }
            svg {
                fill: #d6d6d6;
                height: 25px;
                width: 25px;
                &:hover,
                &:active {
                    fill: @djo-blue;
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .footer.content {
        .social-sites-list {
            li {
                margin: 0 15px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .footer.content {
        .social-sites-list {
            float: left;
            padding: 3% 1%;
            width: 35%;
            li {
                margin: 5px 20px;
            }
            a {
                padding: 0;
            }
        }
    }
}