@import "icons";

.auth-content .login-form .social-login-links .control-group,
.auth-content .social-login-links .control-group {
    float: left;
    width: 100%;
    margin-bottom: 10px !important;
}

.social-login-links {
    .link {
        min-width: 220px;
        max-width: 100%;
        margin: 0px;
        cursor: pointer;
        padding: 10px 15px;
        border-radius: 3px;
        color: #FFFFFF;
        text-decoration: none;
        float: left;
    
        &.facebook-link {
            background-color: #5272B3;
        }
        
        &.twitter-link {
            background-color: #0597E6;
        }
        
        &.google-link {
            background-color: #E45E52;
        }
        
        &.linkedin-link {
            background-color: #007BB6;
        }
        
        &.github-link {
            background-color: #24292E;
        }
    }
}

.social-link-seperator {
    position: relative;
    border-top: solid 1px #D3D3D3;
    margin: 30px 0px 25px 0px;
    display: inline-block;
    width: 100%;

    span {
        background-color: #FFFFFF;
        position: absolute;
        left: 20px;
        top: -12px;
        padding: 0px 15px;
        text-align: center;
    }
}


/// rtl css start here
.rtl {
    direction: rtl; 

    .social-login-links {
        .link {
            float: right;
        }
    }
}