@use "../utils" as *;

/*----------------------------------------*/
/*  2.25 social
/*----------------------------------------*/

.theme-social {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    a {
        color: var(--rs-white);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        font-size: 18px;
        background-color: var(--rs-theme-blue);
        transition: .5s;
        border-radius: 50%;
        &:hover {
            background: var(--rs-theme-yellow);
            color: var(--rs-black);
        }
    }
    svg{
        width: 16px;
        height: 16px;
    }
    &.has-medium{
        a{
            width: 36px;
            height: 36px;
            font-size: 14px;
        }
    }
    &.has-transparent {
        a {
            background: transparent;
            color: #fff;
            width: unset;
            height: unset;
            border-radius: 0;
            &:hover {
                color: var(--rs-theme-yellow);
            }
        }
    }
    &.has-border{
        a{
            border: 1px solid var(--rs-border-primary);
        }
    }
    &.rs-social-links{
        a{
            width: 32px;
            height: 32px;
            border-radius: 3px;
            &:hover{
                background: .5;
            }
            &.is-facebook{
                background: #1559C2;
            }
           &.is-instagram{
                background: #E1306C;
           }
           &.is-twitter{
                background: #202021;
           }
           &.is-linkedin{
                background: #0077B5;
           } 
        }
    }
    &.has-transform {
        a {
            &:hover {
                transform: translate(0, -10%);
            }
        }
    }
    &.has-bg-white{
        a{
            background: var(--rs-white);
            color: var(--rs-black);
        }
    }
    &.has-theme-yellow{
        a{
            &:hover{
                background: var(--rs-theme-yellow);
            }
        }
    }
    &.has-theme-green{
        a{
            background: var(--rs-theme-green);
            svg{
                path{
                    transition: .3s;
                }
            }
            &:hover{
                background: var(--rs-theme-yellow);
                svg{
                    path{
                        fill: var(--rs-black);
                    }
                }
            }
        }
    }
    &.has-theme-green-two{
        a{
            background: var(--rs-theme-green-two);
            svg{
                path{
                    transition: .3s;
                }
            }
            &:hover{
                background: var(--rs-white);
                svg{
                    path{
                        fill: var(--rs-black);
                    }
                }
            }
        }
    }
    &.has-theme-red{
        a{
            // background: #21252D;
            &:hover{
                background: var(--rs-theme-red);
                color: var(--rs-white);
            }
        }
    }
    &.has-theme-blue{
        a{
            background: var(--rs-theme-blue);
        }
    }
    &.has-radius-none {
        a{
            border-radius: 0;
        }
    }
    &.has-theme-cyan{
        a{
            background: var(--rs-theme-cyan);
        }
    }
    &.hover-yellow{
        a{
            &:hover{
                background: var(--rs-theme-yellow);
                border-color:var(--rs-theme-yellow) ;
                svg{
                    path{
                        fill: var(--rs-black);
                    }
                }
            }
        }
    }
    &.hover-light-cyan{
        a{
            &:hover{
                background: var(--rs-theme-light-cyan);
                color: var(--rs-white);
                svg{
                    path{
                        fill: var(--rs-white);
                    }
                }
            }
        }
    }
}