// Brand colors
$facebook: #3b5998 !default;
$whatsapp: #25d366 !default;
$twitter: #00aced !default;
$linkedin: #4875b4 !default;
$youtube: #b00 !default;
$rss: #e67e22 !default;
$instagram: #517fa4 !default;
$pinterest: #cb2027 !default;
$reddit: #ff4500 !default;
$email: #00bf8f !default;

$brands-colors: ("facebook": $facebook,
    "whatsapp": $whatsapp,
    "twitter": $twitter,
    "linkedin": $linkedin,
    "youtube": $youtube,
    "instagram": $instagram,
    "pinterest": $pinterest,
    "reddit": $reddit,
    "email": $email,
    "rss": $rss,
);

.nav-social {
    &.style1 {
        li {
            flex: 1 1 auto;
            text-align: center;

            .btn-social {
                display: block;
                border-radius: 0;
                padding: 0;

                svg {
                    width: 25px;
                    fill: $white;
                }
            }

            &:first-child {
                .btn-social {
                    border-radius: 4px 0 0 4px;
                }
            }

            &:last-child {
                .btn-social {
                    border-radius: 0 4px 4px 0;
                }
            }

            [dir="rtl"] & {
                &:first-child {
                    .btn-social {
                        border-radius: 0 4px 4px 0;
                    }
                }

                &:last-child {
                    .btn-social {
                        border-radius: 4px 0 0 4px;
                    }
                }
            }
        }
    }

    &.style2 {
        li {
            width: 60px;

            .btn-social {
                display: block;
                border-radius: 0;
                padding: 0;

                svg {
                    width: 25px;
                    fill: $white;
                }
            }
        }
    }

    &.style3 {
        li {
            width: 38px;
            margin-left: 10px;

            .btn-social {
                display: block;
                padding: 0;

                svg {
                    width: 18px;
                    fill: $white;
                }
            }

            &:first-child {
                margin-left: 0px;
            }

            [dir="rtl"] & {
                &:first-child {
                    margin-left: 10px;
                }
            }
        }
    }

    &.style4 {
        li {
            width:  38px;
            margin-left: 10px;

            .btn-social {
                display: block;
                padding: 0;

                svg {
                    fill: $white;
                }
            }

            &:first-child {
                margin-left: 0px;
            }

            [dir="rtl"] & {
                &:first-child {
                    margin-left: 10px;
                }
            }
        }
    }
}

// btn social
.btn-outline-facebook {
    svg {
        fill: $facebook !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-whatsapp {
    svg {
        fill: $whatsapp !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-twitter {
    svg {
        fill: $twitter !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-linkedin {
    svg {
        fill: $linkedin !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-youtube {
    svg {
        fill: $youtube !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-rss {
    svg {
        fill: $rss !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-instagram {
    svg {
        fill: $instagram !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-pinterest {
    svg {
        fill: $pinterest !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-reddit {
    svg {
        fill: $reddit !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}

.btn-outline-email {
    svg {
        fill: $email !important;
    }

    &:hover {
        svg {
            fill: $white !important;
        }
    }
}


.btn-social {
    svg {
        display: inline-block;
        width: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height));
        margin: (-$btn-padding-y) (-$btn-padding-x) !important;
        line-height: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height));
        text-align: center;
        @include border-radius($btn-border-radius);
    }

    svg+span {
        [dir="rtl"] & {
            margin-right: $btn-padding-x;
        }

        [dir="ltr"] & {
            margin-left: $btn-padding-x;
        }
    }

    &.btn-lg {
        svg {
            width: (($btn-padding-y-lg * 2) + ($font-size-lg * $btn-line-height));
            margin: (-$btn-padding-y-lg) (-$btn-padding-x-lg);
            line-height: (($btn-padding-y-lg * 2) + ($font-size-lg * $btn-line-height));
            @include border-radius($btn-border-radius-lg);
        }

        svg+span {
            [dir="rtl"] & {
                margin-right: ($btn-padding-x-lg * 2);
            }

            [dir="ltr"] & {
                margin-left: ($btn-padding-x-lg * 2);
            }
        }
    }

    &.btn-sm {
        svg {
            width: (($btn-padding-y-sm * 2) + ($font-size-sm * $btn-line-height));
            margin: (-$btn-padding-y-sm) (-$btn-padding-x-sm);
            line-height: (($btn-padding-y-sm * 2) + ($font-size-sm * $btn-line-height));
            @include border-radius($btn-border-radius-sm);
        }

        svg+span {
            [dir="rtl"] & {
                margin-right: ($btn-padding-x-sm * 2);
            }

            [dir="ltr"] & {
                margin-left: ($btn-padding-x-sm * 2);
            }
        }
    }

    &.btn-square svg {
        border-radius: 0;
    }
}

// Variants
@each $color,
$value in $brands-colors {
    .btn-#{$color} {
        @include button-variant($value, $value);
    }
}

@each $color,
$value in $brands-colors {
    .btn-outline-#{$color} {
        @include button-outline-variant($value, $value);

        &:hover {
            svg {
                fill: $white !important;
            }
        }

        svg {
            fill: $value !important;
        }
    }
}