.tb-social-links {
    // keep @apply here for now, using negative margins with tailwinds config() function is not working well
    @apply .-mx-2;
    list-style: none;
    display: flex;
    padding: 0;
    font-size: theme('fontSize.2xl');
}

.tb-social-links__item {
    padding-left: theme('padding.3');
    padding-right: theme('padding.3');
    margin-top: 0;
}

a.tb-social-links__link {
    color: theme('colors.gray.500');

    &:hover,
    &:focus {
        text-decoration: underline;
        color: theme('colors.secondary.500');
    }
}

a.tb-social-links__link--facebook:hover,
a.tb-social-links__link--facebook:focus {
    color: #4267B2;
}

a.tb-social-links__link--twitter:hover,
a.tb-social-links__link--twitter:focus {
    color: #1DA1F2;
}

a.tb-social-links__link--instagram:hover,
a.tb-social-links__link--instagram:focus {
    color: #bc2a8d;
}

a.tb-social-links__link--youtube:hover,
a.tb-social-links__link--youtube:focus {
    color: #FF0000;
}

a.tb-social-links__link--flickr:hover,
a.tb-social-links__link--flickr:focus {
    color: #0063dc;
}

a.tb-social-links__link--wikipedia:hover,
a.tb-social-links__link--wikipedia:focus {
    color: #000000;
}
