.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: config('textSizes.2xl');
}

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

a.tb-social-links__link {
    color: config('colors.grey');

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