@use "../../abstracts/index" as *;

.box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    @include transition3;
    cursor: pointer;
}

.tf-social-icon {
    display: inline-flex;
    gap: 16px;
    // COLOR SOCIAL
    --facebook-cl: rgb(59, 89, 152);
    --x-cl: rgb(85, 85, 85);
    --instagram-cl: linear-gradient(#8a3ab9, #e95950, #fccc63);
    --threads-cl: rgb(224, 53, 102);
    --youtube-cl: rgb(205, 32, 31);
    --tiktok-cl: linear-gradient(#25f4ee, #000, #fe2c55);
    --tiktok-cl2: rgb(254, 44, 85);
    --pinterest-cl: rgb(203, 32, 39);
    --tumblr-cl: rgb(55, 69, 92);
    --vimeo-cl: rgb(26, 183, 234);
    --snapchat-cl: rgb(255, 221, 0);
    --whatsapp-cl: rgb(0, 230, 118);
    --linked_in-cl: rgb(23, 106, 255);
    --wechat-cl: rgb(26, 173, 24);
    --reddit-cl: rgb(255, 69, 0);
    --line-cl: rgb(0, 195, 77);
    --spotify-cl: rgb(30, 125, 96);

    a {
        @include flex(center, center);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid;
        border-color: var(--line);
        position: relative;

        .icon {
            display: inline-flex;
            position: relative;
            z-index: 1;
            font-size: 16px;
        }

        &::after {
            content: "";
            border-radius: 50%;
            position: absolute;
            background: transparent;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            z-index: 0;
            @include transition3;
            @include hidden;
        }

    }

    &.style-2 {
        a {
            border-color: var(--line-3);
            color: var(--white);
        }
    }

    .social-facebook {
        &::after {
            background: var(--facebook-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    .social-instagram {
        &::after {
            background: var(--instagram-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    .social-x {
        &::after {
            background: var(--x-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    .social-snapchat {
        &::after {
            background: var(--snapchat-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    .social-pinterest {
        &::after {
            background: var(--pinterest-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    .social-linkin {
        &::after {
            background: var(--linked_in-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    .social-tiktok {
        &::after {
            background: var(--tiktok-cl);
        }

        &:hover {
            color: var(--white);

            &::after {
                @include visible;
            }
        }
    }

    &.style-white {
        a {
            color: var(--white);
            border-color: var(--line);
        }
    }
}

.tf-social-icon-2 {
    display: flex;
    align-items: center;
    gap: 12px;

    a {
        @include flex(center, center);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--line);
        color: var(--primary);

        &:hover {
            background-color: var(--line);
        }
    }

    .icon {
        font-size: 24px;
    }
}

.tf-link-icon {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tf-social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 99px;
    font-size: 24px;
    color: var(--white);
    background: linear-gradient(0deg, #272727, #272727),
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) ;
    box-shadow: 0px -3px 0px 0px #080808 inset,
    0px 1px 0px 0px #FFFFFF4D inset,
    0px 2.77px 2.21px 0px #0000001F,
    0px 6.65px 5.32px 0px #00000021,
    0px 12.52px 10.02px 0px #00000022,
    0px 22.34px 17.87px 0px #00000024,
    0px 41.78px 33.42px 0px #00000026,
    0px 100px 80px 0px #00000026,
    0px 3px 3px 0px #00000024,
    0px 2.77px 2.21px 0px #0000001F;
    &:hover {
        background: 
        radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) ,
        linear-gradient(0deg, #272727, #272727);
        box-shadow: 0px -3px 0px 0px #080808 inset,
        0px 1px 0px 0px #FFFFFF4D inset,
        0px 2.77px 2.21px 0px #0000001F,
        0px 6.65px 5.32px 0px #00000021,
        0px 12.52px 10.02px 0px #00000022,
        0px 22.34px 17.87px 0px #00000024,
        0px 41.78px 33.42px 0px #00000026,
        0px 100px 80px 0px #00000026,
        0px 3px 3px 0px #00000024,
        0px 2.77px 2.21px 0px #0000001F;
    }
}

.tf-social-1 {
    display: flex;
    gap: 10px 24px;
    align-items: center;
    flex-wrap: wrap;
    a {
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: center;
        padding: 20px 40px;
        border-radius: 24px;
        background-color: var(--neutral-100);
        box-shadow: 0px 7.77px 16px 0px #0000000F,
        0px 3px 3px 0px #0000001A,
        0px -8px 0px 0px #0000000D inset,
        0px 4px 0px 0px #FFFFFF99 inset;
        .social-item {
            width: 32px;
            height: 32px;
            font-size: 16px;
            background: 
            radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) ,
            linear-gradient(0deg, #272727, #272727);
            box-shadow: 0px -3px 0px 0px #080808 inset,
            0px 1px 0px 0px #FFFFFF4D inset,
            0px 2.77px 2.21px 0px #0000001F,
            0px 3px 3px 0px #00000024;
            .icon {
                @include transition3;
            }
        }
        &:hover {
            color: var(--brand);
            .icon {
                color: var(--brand);
            }
        }
    }
    @include res(md) {
        a {
            padding: 12px 28px;
        }
    }
}