.btn{    
    font-size: 0.875rem;
    font-weight: 600;
    padding: 15px 25px;
    line-height: 1;
    display: inline-flex;
	align-items: center;
    letter-spacing: 0.5px;
	justify-content: center;
	text-decoration: none !important;
	border-radius: var(--border-radius-base);
	border-width: 1px;
    @include transitionMedium
    
    &.btn-success,
    &.btn-secondary,
    &.btn-warning,
    &.btn-primary,
    &.btn-danger,
    &.btn-info{
		color:$white;
	}
    &.btn-lg{
        padding: 18px 15px;
        font-size: 18px;
        line-height: 1.1;
        border-radius: var(--border-radius-base);
    }
    &.btn-sm{
        padding: 8px 10px;
        line-height: 1;
        font-size: 12px;
        border-radius: var(--border-radius-sm);
    }
    &.btn-sharp{
        border-radius: 0;
    }
    &:hover,
    &:focus,
    &:active{
        outline: 0!important;
        box-shadow: none;
    }
    &.btn-transparent{
        background-color: #E8EFF3;
        color: #7D8FAB;
    }
}

.btn-link{
    font-size: 1rem	;
	font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

button{
    cursor: pointer;
    &:focus{
        outline: 0;
        box-shadow: none;
    }
    }

.btn-primary{
	background-color:var(--primary);
	border-color:var(--primary);
	&:active,
	&:focus,
	&:hover{
        border-color:var(--primary);
		background-color:var(--primary-hover);
        box-shadow: none;
	}
	&:focus{
		box-shadow:none;
	}
	&:disabled,
	&.disabled{
		background-color: var(--primary);
	}
}

.btn-outline-primary{
	color:var(--primary);	
	border-color:var(--primary);
	&:hover{
		border-color:var(--primary-hover);	
		background-color:var(--primary-hover);	
	}
    &:focus{
        box-shadow: none;
    }
}
.sharp {
	min-width: 2.5rem;
    padding: 0.4375rem;
    height: 2.5rem;
    min-height: 2.5rem;
}
.sharp.btn-xs{
    padding: 0.1875rem;
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
}

.btn-block {
    display: block;
    width: 100%;
}

.light{
    border-color: transparent;
	&.tp-btn{
		background-color:transparent;
	}
	&.btn-default{
		background: #ADB6C7;
	}
	&.btn-success {
		background-color: $success-light;
		border-color: $success-light;
		color:$success;
		g [fill]{
			fill:$success;
        }
		&:hover{
			background-color: $success;
			border-color: $success;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-info {
		background-color: $info-light;
		border-color: $info-light;
		color:$info;
		g [fill]{
			fill:$info;
		}
		&:hover{
			background-color: $info;
			border-color: $info;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-primary {
		background-color: var(--rgba-primary-1);
		color:var(--primary);
		g [fill]{
			fill:var(--primary);
		}
		&:hover{
			background-color: var(--primary);
			color: #fff !important;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-secondary {
		background-color: $secondary-light;
		color:$secondary;
		g [fill]{
			fill:$secondary;
		}
		&:hover{
			background-color: $secondary;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-warning {
		background-color: $warning-light;
		color:$warning;
		g [fill]{
			fill:$warning;
		}
		&:hover{
			background-color: $warning;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-danger {
		background-color: $danger-light;
		color:$danger;
		g [fill]{
			fill:$danger;
		}
		&:hover{
			background-color: $danger;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-dark {
		background-color: $dark-light;
		border-color: $dark-light;
		color:$dark;
		g [fill]{
			fill:$dark;
		}
		@at-root [data-theme-version="dark"] & {
			background-color: $dark-opacity;
			color:$white;
		}
		&:hover{
			background-color: $dark;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
}
.btn.tp-btn{
	background-color:transparent;
	border-color: transparent;
	&.btn-default{
		background: #ADB6C7;
	}
	&.btn-success {
		color:$success;
		g [fill]{
			fill:$success;
		}
		&:hover{
			background-color: $success;
			border-color: $success;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-info {
		color:$info;
		g [fill]{
			fill:$info;
		}
		&:hover{
			background-color: $info;
			border-color: $info;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-primary {
		color:var(--primary);
		g [fill]{
			fill:var(--primary);
		}
		&:hover{
			background-color: var(--primary);
			border-color: var(--primary);
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-secondary {
		color:$secondary;
		g [fill]{
			fill:$secondary;
		}
		&:hover{
			background-color: $secondary;
			border-color: $secondary;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-warning {
		color:$warning;
		g [fill]{
			fill:$warning;
		}
		&:hover{
			background-color: $warning;
			border-color: $warning;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-danger {
		color:$danger;
		g [fill]{
			fill:$danger;
		}
		&:hover{
			background-color: $danger;
			border-color: $danger;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-light {
		color:$dark;
		g [fill]{
			fill:$dark;
		}
		&:hover{
			background-color: $light;
			border-color: $light;
			color: $dark;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-dark {
		color:$dark;
		g [fill]{
			fill:$dark;
		}
		&:hover{
			background-color: $dark;
			border-color: $dark;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
}
.btn.tp-btn-light{
	background-color:transparent;
	border-color: transparent;
	
	&.btn-success {
		color:$success;
		g [fill]{
			fill:$success;
		}
		&:hover{
			background-color: $success-light;
			border-color: $success-light;
			color:$success;
			g [fill]{
				fill:$success;
			}
		}
	}
	&.btn-info {
		color:$info;
		g [fill]{
			fill:$info;
		}
		&:hover{
			background-color: $info-light;
			border-color: $info-light;
			color:$info;
			g [fill]{
				fill:$info;
			}
		}
	}
	&.btn-primary {
		color:var(--primary);
		g [fill]{
			fill:var(--primary);
		}
		&:hover{
			background-color: var(--rgba-primary-1);
			border-color: var(--rgba-primary-1);
			color:var(--primary);
			g [fill]{
				fill:var(--primary);
			}
		}
	}
	&.btn-secondary {
		color:$secondary;
		g [fill]{
			fill:$secondary;
		}
		&:hover{
			background-color: $secondary-light;
			border-color: $secondary-light;
			color:$secondary;
			g [fill]{
				fill:$secondary;
			}
		}
	}
	&.btn-warning {
		color:$warning;
		g [fill]{
			fill:$warning;
		}
		&:hover{
			background-color: $warning-light;
			border-color: $warning-light;
			color:$warning;
			g [fill]{
				fill:$warning;
			}
		}
	}
	&.btn-danger{
		color:$danger;
		g [fill]{
			fill:$danger;
		}
		&:hover{
			background-color: $danger-light;
			border-color: $danger-light;
			color:$danger;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-dark {
		color:$dark;
		g [fill]{
			fill:$dark;
		}
		&:hover{
			background-color: $dark-light;
			border-color: $dark-light;
			color: $dark;
			g [fill]{
				fill:$white;
			}
		}
	}
}


.shadow{
    &.btn-primary {
        -webkit-box-shadow: 0 0.3125rem 0.9375rem 0 var(--rgba-primary-2) !important;
        box-shadow: 0 0.3125rem 0.9375rem 0 var(--rgba-primary-2) !important;
    }
    &.btn-secondary{
        -webkit-box-shadow: 0 0.3125rem 0.9375rem 0 rgba($secondary,0.2) !important;
        box-shadow: 0 0.3125rem 0.9375rem 0 rgba($secondary,0.2) !important;
    }
    &.btn-warning {
        -webkit-box-shadow: 0 0.3125rem 0.9375rem 0 rgba($warning,0.2) !important;
        box-shadow: 0 0.3125rem 0.9375rem 0 rgba($warning,0.2) !important;
    }
    &.btn-danger {
        -webkit-box-shadow: 0 0.3125rem 0.9375rem 0 rgba($danger,0.2) !important;
        box-shadow: 0 0.3125rem 0.9375rem 0 rgba($danger,0.2) !important;
    }
    &.btn-info {
        -webkit-box-shadow: 0 0.3125rem 0.9375rem 0 rgba($info,0.2) !important;
        box-shadow: 0 0.3125rem 0.9375rem 0 rgba($info,0.2) !important;
    }
    &.btn-success {
        -webkit-box-shadow: 0 0.3125rem 0.9375rem 0 rgba($success,0.2) !important;
        box-shadow: 0 0.3125rem 0.9375rem 0 rgba($success,0.2) !important;
    }
}

.btn-light {
    background  : $light;
    border-color: $light;
    color       : #646464;
    
    
    &:active,
    &:focus,
    &:hover {
        background  : lighten($light, 25%);
        color       : $dark;
        border-color: lighten($light, 25%);
    }
}

.btn-outline-primary{
	&:hover{
		color:$white;
	}
}
.btn-outline-warning{
	&:hover{
		color:$white;
	}
}
.btn-outline-light{
    color: $dark;
}


.btn-dark {
    background  : $dark;
    border-color: $dark;
    color       : $white;
    
    
    &:active,
    &:hover {
        background  : lighten($dark, 10%);
        color       : $white;
        border-color: darken($dark, 10%);
    }
    &:focus{
		background  : lighten($dark, 45%);
	}
}

.btn-group{

    &.btn-rounded{

        .btn:first-child{
            border-top-left-radius: 1.875rem;
            border-bottom-left-radius: 1.875rem;
        }

        .btn:last-child{
            border-top-right-radius: 1.875rem;
            border-bottom-right-radius: 1.875rem;
        }
    }
}
.btn-rounded{
    border-radius: 2.75rem;
}



///////////////////
// Social Buttons
///////////////////
.btn-facebook {
    background  : $facebook;
    border-color: $facebook;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($facebook, 10%);
        color       : $white;
        border-color: darken($facebook, 10%);
    }
}

.btn-twitter {
    background  : $twitter;
    border-color: $twitter;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($twitter, 10%);
        color       : $white;
        border-color: darken($twitter, 10%);
    }
}

.btn-pinterest {
    background  : $pinterest;
    border-color: $pinterest;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($pinterest, 10%);
        color       : $white;
        border-color: darken($pinterest, 10%);
    }
}

.btn-linkedin {
    background  : $linkedin;
    border-color: $linkedin;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($linkedin, 10%);
        color       : $white;
        border-color: darken($linkedin, 10%);
    }
}

.btn-google {
    background  : $google;
    border-color: $google;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($google, 10%);
        color       : $white;
        border-color: darken($google, 10%);
    }
}

.btn-snapchat {
    background  : $snapchat;
    border-color: $snapchat;
    color       : $black;

    &:active,
    &:focus,
    &:hover {
        background  : darken($snapchat, 10%);
        color       : $black;
        border-color: darken($snapchat, 10%);
    }
}

.btn-whatsapp {
    background  : $whatsapp;
    border-color: $whatsapp;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($whatsapp, 10%);
        color       : $white;
        border-color: darken($whatsapp, 10%);
    }
}


.btn-phone {
    background  : $reddit;
    border-color: $reddit;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($reddit, 10%);
        color       : $white;
        border-color: darken($reddit, 10%);
    }
}

.btn-skype {
    background  : $skype;
    border-color: $skype;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($skype, 10%);
        color       : $white;
        border-color: darken($skype, 10%);
    }
}

.btn-email {
    background  : $vimeo;
    border-color: $vimeo;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($vimeo, 10%);
        color       : $white;
        border-color: darken($vimeo, 10%);
    }
}

.btn-icon-text{
    overflow: hidden;
    position: relative;
    border: 0;
    font-size: 12px;
    justify-content: left;
    padding-left: 50px;
    
    i{
        background-color: rgba(0, 0, 0, 0.1);
        width: 42px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        &.rounded-xl{
            border-radius: 2.75rem;    
        }
    }
}
.btn-icon{
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    
    &.btn-lg{
        width: 50px;
        height: 50px;
        font-size: 16px;
    }
    &.btn-sm{
        width: 35px;
        height: 35px;
        font-size: 12px;
    }
}
.btn-square{
    border-radius: 0;
}

.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show{
	color: #fff;
}