/* Social media icon */
@each $social-classname,$color-code in $social-colors {
    .elements-social {
        .#{$social-classname} {
            &:hover {
                color: $color-code;
            }
        }
    }
}
.elements-social {  
    ul {
        margin-bottom: 0;
        list-style: none; 
        padding: 0;
        li {
            display: inline-block;
            &:first-child {
                margin-left: 0 !important;
            }
            &:last-child {
                margin-right: 0 !important;
            }
            a {
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                @include prefix(transition, 0.3s cubic-bezier(0.12, 0, 0.39, 0), webkit);
            }
        }
    }
}
.extra-small-icon {
    li {
        margin: 0 2px;
    }
    a { 
        font-size: 14px;
        width:30px;
        height:30px;
    }
}
.small-icon { 
    li {
        margin: 0 5px;
    }
    a {
        font-size: 18px;
        width: 40px;
        height:40px;
    }
}
.medium-icon {
    li {
        margin: 0 8px;
    }
    a {
        font-size: 20px;
        width: 50px;
        height:50px;
    }
}
.large-icon {
    li {
        margin: 0 10px;
    }
    a {
        font-size: 24px;
        width: 60px;
        height: 60px;
    }
}
.extra-large-icon {
    li {
        margin: 0 12px;
    }
    a {
        font-size: 30px;
        width: 70px;
        height: 70px;
    }
}
.social-icon {
    a {
        margin: 0 15px;
        &:first-child {
            margin-left: 0;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}
[class^="social-icon-"] ul, [class*=" social-icon-"] ul { list-style: none; }

/*  Social icon dark and light */
.elements-social {
    .light {
        li {
            a {
                color: var(--white);
            }
        }
    }
    .dark {
        li {
            a {
                color: var(--dark-gray);
            }
        }
    }

    // icon with animation style
    .icon-with-animation {
        a {
            &:hover {
                @include prefix(transform, translateY(-8px), webkit);
            }
        }
    }
}

/* Social icon style 01 */
.social-icon-style-01 {
    ul {
        li {
            a {
                &:hover {
                    color: var(--base-color) !important;
                }
            }
        } 
    }  
}

/* Social icon style 03 */
.social-icon-style-03 {
    ul {
        li {
            a { 
                color: var(--white); 
                border-radius: 100%;
                @include prefix(transition, 0.4s cubic-bezier(0.12, 0, 0.39, 0), webkit);
                &:hover {
                    background-color: var(--white) !important;
                    box-shadow: 0 0 30px rgba(23,23,23,.25);
                    transform: translate3d(0, -3px, 0);
                }
                @each $social-classname,$color-code in $social-colors {
                    &.#{$social-classname} {
                        background-color: $color-code;
                    }
                }
            }
        }
    }
}

/* Social icon style 04 */
.social-icon-style-04 {
    ul {
        li {
            a {   
                z-index:9;
                position: relative;
                &:hover { 
                    color: var(--white) !important;
                    span {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        top: 0;
                        left: 0; 
                    }
                } 
                span {
                    border-radius: 0;
                    display: block;
                    height: 0;
                    width: 0;
                    left: 50%;
                    margin: 0;
                    position: absolute;
                    top: 50%;
                    @include prefix(transition, 0.4s cubic-bezier(0.12, 0, 0.39, 0), webkit); 
                    z-index: -1;
                    background-color: var(--dark-gray);
                }

                @each $social-classname,$color-code in $social-colors {
                    &.#{$social-classname} {
                        span {
                            background-color: $color-code;
                        }
                    }
                }
            }
        }
    }
}

/* Social icon style 05 */
.social-icon-style-05 {
    ul {
        li {
            a {
                &:hover {
                    color: var(--white) !important; 
                }
                @each $social-classname,$color-code in $social-colors {
                    &.#{$social-classname} {
                        color: $color-code;
                    }
                }
            }
        }
        &.dark {
            li {
                a {
                    &:hover {
                        color: var(--dark-gray) !important;
                    }
                }
            }
        }
    }
}

/* Social icon style 06 */
.social-icon-style-06 {
    ul {
        li {
            a { 
                display: inline-block;
                height: auto;
                width: auto;
                padding: 0 24px;
                position: relative;
                vertical-align: middle;
                overflow: hidden;
                .brand-icon { 
                    position: absolute; 
                    height: 100%; 
                    width: 100%; 
                    left: 0; 
                    top: 100%;   
                    transition-duration: 0.3s; 
                }
                > span {
                    line-height: inherit;
                    top: 0px; 
                    position: relative;   
                    transition: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; 
                }
                &:hover {
                    .brand-label {
                        top: -50px;
                        transition: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
                    }
                    .brand-icon {
                        top: 0;
                        transition-duration: 0.3s;
                    }
                }
                @each $social-classname,$color-code in $social-colors {
                    &.#{$social-classname} {
                        color: $color-code;
                    }
                }
            }
        }
    }
}

/* Social icon style 07 */
.social-icon-style-07 {
    ul {
        li {
            a { 
                position: relative;
                z-index: 3;
                overflow: hidden;
                vertical-align: middle;
                &:hover {
                    color: var(--white) !important; 
                    > span {
                        top: 0; 
                    }
                }
                > span {
                    position: absolute;
                    top: -100%;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    z-index: -1;
                    @include prefix(transition, 0.3s cubic-bezier(0.12, 0, 0.39, 0), webkit); 
                }
                @each $social-classname,$color-code in $social-colors {
                    &.#{$social-classname} {
                        color: $color-code;
                        span {
                            background-color: $color-code; 
                        }    
                    }
                }
            }
        }
    }
}

/* Social icon style 08 */
.social-icon-style-08 {
    ul {
        li {
            a {
                &:hover {
                    opacity: 0.5;
                    color: var(--dark-gray) !important;
                }
            }
        }
        &.light {
            li {
                a { 
                    &:hover {
                        opacity: 0.5;
                        color: var(--white) !important; 
                    } 
                }
            }
        }
    }
}

/* Social icon style 09 */
.social-icon-style-09 {
    ul {
        li {
            a {   
                z-index:9;
                border: 1px solid rgba(35, 35, 35, 0.15);
                border-radius: 100%;
                position: relative;
                &:hover { 
                    color: var(--white) !important;
                    span {  
                        @include prefix(transform, scale(1), webkit); 
                        opacity: 1;
                    }
                } 
                span { 
                    display: block;
                    border-radius: 100%;
                    height: 100%;
                    width: 100%;
                    top: -1px;
                    left: -1px;
                    padding: 1px;
                    box-sizing: content-box;
                    margin: 0;
                    position: absolute; 
                    @include prefix(transform, scale(1.2), webkit);
                    opacity: 0;
                    @include prefix(transition, 0.5s cubic-bezier(0.12, 0, 0.39, 0), webkit);
                    pointer-events: none;
                    z-index: -1;
                    background-color: var(--dark-gray);
                }


            }
        }
        &.light {
            li {
                a {
                    border-color: rgba(255,255,255,0.3);
                    &:hover {
                        color: var(--dark-gray) !important; 
                    }
                    span {
                        background-color: var(--white); 
                    }
                }
            }
        }
    }
}

/* Social icon style 10 */
.social-icon-style-10 {
    ul {
        li {
            a {
                color: var(--dark-gray);
                &:hover {
                    color: var(--base-color) !important;
                }
            }
        } 
    }
    .default-color { 
        a {
            @each $social-classname,$color-code in $social-colors {
                &.#{$social-classname} {
                    color: $color-code;     
                }
            }
            &:hover {
               color: var(--dark-gray) !important; 
            }
        } 
    }
}

/* Social text style 01 */
.social-text-style-01 {
    ul {
        li {
            a {
                width: auto;
                height: auto;
                line-height: normal;
            }
        }
    }
}