@use "../utils" as *;

/*----------------------------------------*/
/*  2.6 social
/*----------------------------------------*/

.rs-theme-social{
    display: inline-flex;
    gap: 12px;
    a{
        color: rgba(255, 255, 255, 0.54);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        font-size: 16px;
        background-color: rgba(255, 255, 255, 0.09);
        transition: .3s;
        &:hover{
            background: var(--rs-theme-orange);
            color: var(--rs-white);
        }
    }
    &.has-bg{
        a{
            background: #E6E6E9;
            color: #737373;
            &:hover{
                background: var(--rs-theme-orange);
                color: var(--rs-white);
            }
        }
    }
    &.has-border{
        a{
            border: 1px solid #D9E2DF;
            background: transparent;
            color: #666;
            &:hover{
                background: var(--rs-theme-primary);
                color: var(--rs-white);
                border-color: var(--rs-theme-primary);
            }
        }
    }
    &.has-white{
        a{
            background: var(--rs-white);
            &:hover{
                background: var(--rs-theme-primary);
                color: var(--rs-white);
            }
        }
    }
    &.has-theme-red{
        a{
            &:hover{
                background: var(--rs-theme-red);
            }
        }
    }
    &.has-theme-blue{
        a{
            &:hover{
                background: var(--rs-white);
                color: var(--rs-theme-blue);
            }
        }
    }
    &.has-theme-deep-blue{
        a{
            &:hover{
                background: var(--rs-theme-deep-blue);
                color: var(--rs-white);
            }
        }
    }
    &.has-theme-light-blue{
        a{
            &:hover{
                background: var(--rs-theme-light-blue);
                color: var(--rs-white);
            }
        }
    }
    &.has-theme-yellow{
        a{
            background: rgba(255, 255, 255, 0.09);
            color: rgba(255, 255, 255, 0.54);
            &:hover{
                background: var(--rs-theme-yellow);
                color: var(--rs-theme-green);
            }
        }
    }
    &.has-theme-medium-yellow{
        a{
            background: rgba(255, 255, 255, 0.09);
            color: rgba(255, 255, 255, 0.54);
            &:hover{
                background: var(--rs-theme-medium-yellow);
                color: var(--rs-black);
            }
        }
    }
    &.has-theme-green{
        a{
            background: rgba(255, 255, 255, 0.09);
            color: rgba(255, 255, 255, 0.54);
            &:hover{
                background: var(--rs-theme-light-green);
                color: var(--rs-white);
            }
        }
    }
    &.has-theme-cyan{
        a{
            background: #FFFFFF17;
            color: rgba(255, 255, 255, 0.54);
            &:hover{
                background: var(--rs-theme-cyan);
                color: var(--rs-white);
            }
        }
    }
    &.has-transparent{
        a{
            background: transparent;
            color: #616161;
            width: unset;
            height: unset;
        }
        &.has-orange{
            a{
                &:hover{
                    color: var(--rs-theme-orange);
                }
            }
        }
        &.has-deep-blue{
            a{
                &:hover{
                    color: var(--rs-theme-deep-blue);
                }
            }
        }
        &.has-theme-light-green{
            a{
                &:hover{
                    color: var(--rs-theme-light-green);
                }
            }
        }
        &.has-theme-cyan{
            a{
                &:hover{
                    color: var(--rs-theme-cyan);
                }
            }
        }
    }
    &.has-bg-black{
        flex-direction: column;
        a{
            background-color: #000;
            color: #fff;
            &:hover{
                background: var(--rs-theme-orange);
                color: var(--rs-white);
            }
        }
    }

}
