////
/// Social Links block.
///
/// @group  Blocks
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

.wp-social-link {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    margin-right: 8px;
    transition: transform 0.1s ease;

    @media (prefers-reduced-motion: reduce) {
        transition-duration: 0s;
    }

    a {
        padding: 6px;
        display: block;
        line-height: 0;
        transition: transform 0.1s ease;
    }

    a,
    a:hover,
    a:active,
    a:visited,
    svg {
        color: currentColor;
        fill: currentColor;
    }

    &:hover {
        transform: scale(1.1);
    }
}

.wp-block-social-links {
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;

    .wp-social-link {
        width: auto;
        a,
        a:hover {
            text-decoration: none;
            border-bottom: 0;
            box-shadow: none;
        }
    }

    &.aligncenter {
        justify-content: center;
    }

    &:not(.is-style-logos-only) .wp-social-link {
        background-color: #f0f0f0;
        color: #444;

        &-amazon {
            background-color: #f90;
            color: #fff;
        }

        &-bandcamp {
            background-color: #1ea0c3;
            color: #fff;
        }

        &-behance {
            background-color: #0757fe;
            color: #fff;
        }

        &-codepen {
            background-color: #1e1f26;
            color: #fff;
        }

        &-deviantart {
            background-color: #02e49b;
            color: #fff;
        }

        &-dribbble {
            background-color: #e94c89;
            color: #fff;
        }

        &-dropbox {
            background-color: #4280ff;
            color: #fff;
        }

        &-etsy {
            background-color: #f45800;
            color: #fff;
        }

        &-facebook {
            background-color: #1977f2;
            color: #fff;
        }

        &-fivehundredpx {
            background-color: #000;
            color: #fff;
        }

        &-flickr {
            background-color: #0461dd;
            color: #fff;
        }

        &-foursquare {
            background-color: #e65678;
            color: #fff;
        }

        &-github {
            background-color: #24292d;
            color: #fff;
        }

        &-goodreads {
            background-color: #eceadd;
            color: #382110;
        }

        &-google {
            background-color: #ea4434;
            color: #fff;
        }

        &-instagram {
            background-color: #f00075;
            color: #fff;
        }

        &-lastfm {
            background-color: #e21b24;
            color: #fff;
        }

        &-linkedin {
            background-color: #0577b5;
            color: #fff;
        }

        &-mastodon {
            background-color: #3288d4;
            color: #fff;
        }

        &-medium {
            background-color: #02ab6c;
            color: #fff;
        }

        &-meetup {
            background-color: #f6405f;
            color: #fff;
        }

        &-pinterest {
            background-color: #e60122;
            color: #fff;
        }

        &-pocket {
            background-color: #ef4155;
            color: #fff;
        }

        &-reddit {
            background-color: #fe4500;
            color: #fff;
        }

        &-skype {
            background-color: #0478d7;
            color: #fff;
        }

        &-snapchat {
            background-color: #fefc00;
            color: #fff;
            stroke: #000;
        }

        &-soundcloud {
            background-color: #ff5600;
            color: #fff;
        }

        &-spotify {
            background-color: #1bd760;
            color: #fff;
        }

        &-tumblr {
            background-color: #011835;
            color: #fff;
        }

        &-twitch {
            background-color: #6440a4;
            color: #fff;
        }

        &-twitter {
            background-color: #21a1f3;
            color: #fff;
        }

        &-vimeo {
            background-color: #1eb7ea;
            color: #fff;
        }

        &-vk {
            background-color: #4680c2;
            color: #fff;
        }

        &-wordpress {
            background-color: #3499cd;
            color: #fff;
        }

        &-yelp {
            background-color: #d32422;
            color: #fff;
        }

        &-youtube {
            background-color: #ff0100;
            color: #fff;
        }
    }

    &.is-style-logos-only .wp-social-link {
        background: none;
        padding: 4px;

        svg {
            width: 28px;
            height: 28px;
        }

        &-amazon {
            color: #f90;
        }

        &-bandcamp {
            color: #1ea0c3;
        }

        &-behance {
            color: #0757fe;
        }

        &-codepen {
            color: #1e1f26;
        }

        &-deviantart {
            color: #02e49b;
        }

        &-dribbble {
            color: #e94c89;
        }

        &-dropbox {
            color: #4280ff;
        }

        &-etsy {
            color: #f45800;
        }

        &-facebook {
            color: #1977f2;
        }

        &-fivehundredpx {
            color: #000;
        }

        &-flickr {
            color: #0461dd;
        }

        &-foursquare {
            color: #e65678;
        }

        &-github {
            color: #24292d;
        }

        &-goodreads {
            color: #382110;
        }

        &-google {
            color: #ea4434;
        }

        &-instagram {
            color: #f00075;
        }

        &-lastfm {
            color: #e21b24;
        }

        &-linkedin {
            color: #0577b5;
        }

        &-mastodon {
            color: #3288d4;
        }

        &-medium {
            color: #02ab6c;
        }

        &-meetup {
            color: #f6405f;
        }

        &-pinterest {
            color: #e60122;
        }

        &-pocket {
            color: #ef4155;
        }

        &-reddit {
            color: #fe4500;
        }

        &-skype {
            color: #0478d7;
        }

        &-snapchat {
            color: #fff;
            stroke: #000;
        }

        &-soundcloud {
            color: #ff5600;
        }

        &-spotify {
            color: #1bd760;
        }

        &-tumblr {
            color: #011835;
        }

        &-twitch {
            color: #6440a4;
        }

        &-twitter {
            color: #21a1f3;
        }

        &-vimeo {
            color: #1eb7ea;
        }

        &-vk {
            color: #4680c2;
        }

        &-wordpress {
            color: #3499cd;
        }

        &-yelp {
            background-color: #d32422;
            color: #fff;
        }

        &-youtube {
            color: #ff0100;
        }
    }

    &.is-style-pill-shape .wp-social-link {
        a {
            padding-left: 16px;
            padding-right: 16px;
        }
    }
}
