button{
    cursor: pointer;

    &:focus{
        outline: 0;
        box-shadow: none;
    }
}
.btn {
	padding: 0.5rem 1.25rem;
    border-radius: $radius-sm;
	--bs-body-color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;

    &:hover,
	&:focus,
	&:active,
	&.active{
        outline: 0!important;
    }	
	&.btn-success,
	&.btn-secondary,
	&.btn-warning,
	&.btn-primary,
	&.btn-danger,
	&.btn-info{
		color:$white;
	}	
    &-transparent {
        background-color: transparent;
    }
	&.btn-outline-secondary,
	&.btn-outline-success,
	&.btn-outline-info{
		&:hover,
		&:active{
			color:$white;
		}
	}
	&.btn-icon-xxs{
		padding: 0.575rem 0.7375rem;
		line-height: 1;
	}
	&.btn-sharp {
		display: inline-block;
		width: 32px;
		height: 32px;
		text-align: center;
		line-height: 30px;
		padding: 0;
		border-radius: 4px !important;
	}
}
.btn-primary{
	border-color:var(--primary);	
	background-color:var(--primary);
	&:active,
	&:focus,
	&:hover{
		border-color:var(--primary-hover);	
		background-color:var(--primary-hover);	
	}
	&:focus{
		box-shadow:0 0 0 0.25rem var(--rgba-primary-5);
	}
	&:disabled,
	&.disabled{
		background-color: var(--primary);
		border-color: var(--primary);
	}
}

.btn-link{
	color:var(--primary);
	text-decoration: none;
	&:hover{
		color:var(--primary-hover);	
	}
}
.btn-outline-primary {
	color:var(--primary);	
	border-color:var(--primary);
	&:hover{
		border-color:var(--primary-hover);	
		background-color:var(--primary-hover);	
	}
}
.sharp {
	min-width: 2.5rem;
    padding: 0.4375rem;
    height: 2.5rem;
    min-height: 2.5rem;
	&.sharp-xs{
		min-width: 45px;
		min-height: 45px;
		display: inline-block;
		line-height: 45px;
		padding: 0;

		@include respond('laptop'){
			min-width: 40px;
			min-height: 40px;
			line-height: 40px;
			height: 40px;
		
		}
	

	}
}
.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{

	&.tp-btn{
		background-color:transparent;
	}
	&.btn-default{
		background: #ADB6C7;
	}
	&.btn-success {
		background-color:rgba($success, 0.2);
		border-color:rgba($success, 0.2);
		color:$success;
		g [fill]{
			fill:$success;
		}
		
		&:hover{
			background-color: $success;
			border-color: $success;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-info {
		background: rgba($info, 0.2);
		border-color: rgba($info, 0.2);
		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);
		border-color: var(--rgba-primary-1);
		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 {
		background: rgba($secondary, 0.2);
		border-color: rgba($secondary, 0.2);
		color:$secondary;
		g [fill]{
			fill:$secondary;
		}
		
		&:hover{
			background-color: $secondary;
			border-color: $secondary;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-warning {
		background-color: rgba($warning, 0.2);
		border-color: rgba($warning, 0.2);
		color:$warning;
		g [fill]{
			fill:$warning;
		}
		
		&:hover{
			background-color: $warning;
			border-color: $warning;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-danger {
		background-color: rgba($danger, 0.2);
		border-color: rgba($danger, 0.2);
		color:$danger;
		g [fill]{
			fill:$danger;
		}
	
		&:hover{
			background-color: $danger;
			border-color: $danger;
			color: #fff;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-dark {
		background-color: rgba($dark, 0.2);
		border-color: rgba($dark, 0.2);;
		color:$dark;
		g [fill]{
			fill:$dark;
		}
		
		&:hover{
			background-color: $dark;
			border-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;
			svg{
				path{
					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:var(--text-dark);
		g [fill]{
			fill:$dark;
		}
		&:hover{
			background-color: $light;
			border-color: $light;
			color: $dark;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-dark {
		color:var(--text-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: rgba($success, 0.2);
			border-color: rgba($success, 0.2);
			color:$success;
			g [fill]{
				fill:$success;
			}
		}
	}
	&.btn-info {
		color:$info;
		g [fill]{
			fill:$info;
		}
		&:hover{
			background-color:rgba($info, 0.2);
			border-color: rgba($info, 0.2);
			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: rgba($secondary, 0.2);
			border-color: rgba($secondary, 0.2);
			color:$secondary;
			g [fill]{
				fill:$secondary;
			}
		}
	}
	&.btn-warning {
		color:$warning;
		g [fill]{
			fill:$warning;
		}
		&:hover{
			background-color: rgba($warning, 0.2);
			border-color:rgba($warning, 0.2);
			color:$warning;
			g [fill]{
				fill:$warning;
			}
		}
	}
	&.btn-danger {
		color:$danger;
		g [fill]{
			fill:$danger;
		}
		&:hover{
			background-color: rgba($danger, 0.2);
			border-color: rgba($danger, 0.2);
			color:$danger;
			g [fill]{
				fill:$white;
			}
		}
	}
	&.btn-dark {
		color:var(--text-dark);
		g [fill]{
			fill:$dark;
		}
		&:hover{
			background-color: rgba($dark, 0.2);
			border-color:rgba($dark, 0.2);
			color: var(--text-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;
}
.shadow.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;
}
.shadow.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;
}
.shadow.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;
}
.shadow.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;
}
.shadow.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-xxs {
    padding: 0.375rem 0.9375rem;
    font-size: 0.6875rem;
    line-height: 1.3;
}
.btn-xs {
    font-size: 0.75rem;
    padding: 0.438rem 1rem;
	
}

.btn-sm {
    font-size: 0.813rem  !important;
	padding: 0.325rem 0.6rem;
}
.btn-md {
    font-size: 0.875rem  !important;
	padding: 0.875rem 1.25rem;
}
.btn-lg{
    padding: 1rem 2rem;
    font-size: 1.125rem !important;
	@include respond('phone') {
		 padding: 0.75rem 1.25rem;
	}
}

.btn-xl{
    padding: 0.6rem 1rem;

    &.btn-default{
        font-weight: 600;
    }
}

.btn-square {
    border-radius: 0;
}

.btn-rounded {
    border-radius: 2.5rem !important;
}

.btn-icon-end {
	border-#{$ic-pos-left}: 0.0625rem solid rgba(255,255,255,0.4);
    display: inline-block;
	margin: -1rem 0;
	margin-#{$ic-pos-left}: 1rem;
	margin-#{$ic-pos-right}: -0.25rem;
	padding: 0.7rem 0;
	padding-#{$ic-pos-left}: 1.25rem;
}

.btn-icon-start {
    background: #fff;
    border-radius: 10rem;
    display: inline-block;
	margin: -0.5rem 0;
	margin-#{$ic-pos-left}: -1.188rem;
	margin-#{$ic-pos-right}: 0.75rem;
	padding: 0.5rem 0.80rem;
    float : #{$ic-pos-left};
}

.toggle-dropdown::after {
    margin-#{$ic-pos-left}: 0.755em;
}

.social-btn-icon {
    .btn {
        min-width    : 7.5rem;
        margin-bottom: 1.5rem;
    }
}

.social-icon {
    .btn {
        padding: .7rem 1.4rem;
    }
}

.btn-circle {
    height       : 5rem;
    width        : 5rem;
    border-radius: 50% !important;

    &-sm {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1.8rem;
    }

    &-md {
        width: 6rem;
        height: 6rem;
        font-size: 2.5rem;

        i{
            font-size: 2.4rem;
        }
    }

    &-lg {
        width: 8rem;
        height: 8rem;
        font-size: 3.2rem;

        i{
            font-size: 3.1rem;
        }
    }
}

.btn-page{
    .btn{
        min-width: 6.875rem;
        margin-#{$ic-pos-right}: 0.25rem;
        margin-bottom: 0.5rem;

    }

}



// btn sizes
.size-1{
    min-width: 10rem !important;
    font-size: 1.5rem;
    padding: 0.68rem 0.75rem;
}

.size-2{
    font-size: 1.25rem;
    min-width: 8.125rem !important;
    padding: 0.57rem 0.75rem;
}

.size-3{
    font-size: 0.875rem;
    min-width: 6.875rem !important;
    padding: 0.536rem 0.75rem;
}
.size-4{
    font-size: 0.875rem;
    min-width: 6.25rem !important;
}
.size-5{
    font-size: 0.875rem;
    min-width: 5.625rem !important;
    padding: .22rem 0.75rem;
}
.size-6{
    font-size: 0.8125rem;
    min-width: 5rem !important;
    padding: 0.097rem 0.75rem;
}
.size-7{
    font-size: 0.75rem;
    min-width: 3.75rem !important;
    padding: 0.001rem 0.75rem;
}





.btn-light {
    background  : var(--light);
    border-color: var(--light);
    color       : var(--text-dark);
    
    
    &:active,
    &:focus,
    &:hover {
        background  : rgba($light, 0.5);
        color       : $dark;
        border-color: rgba($light, 0.5);
    }
}

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

	
}




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

.btn-group{

    &.btn-rounded{

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

        .btn:last-child{
            border-top-#{$ic-pos-right}-radius: 1.875rem;
            border-bottom-#{$ic-pos-right}-radius: 1.875rem;
        }
    }
}



///////////////////
// Social Buttons
///////////////////

// social button



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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{
	background-color:var(--primary);
	border-color:var(--primary);
	color:$white;
}
 
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus{
	box-shadow:0 0 0 0.25rem var(--rgba-primary-5);
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus{
	box-shadow:0 0 0 0.25rem var(--rgba-primary-5);
}
.btn-close:focus{
	box-shadow:unset;
}
.sharp-lg {
    min-width: 2.875rem;	
    padding: 11px;
    height: 2.875rem;
    min-height: 2.875rem;
    margin-#{$ic-pos-right}:0.5rem;
	margin-bottom: 0;
}
// override bootstrap buttons
.btn-group{
	& > .btn:not(:last-child):not(:first-child):not(.dropdown-toggle){
		border-radius: 0 ;
	}
	& > .btn:not(:last-child):not(.dropdown-toggle){
		border-top-#{$ic-pos-right}-radius: 0;
		border-bottom-#{$ic-pos-right}-radius: 0;
		border-top-#{$ic-pos-left}-radius: $radius;
		border-bottom-#{$ic-pos-left}-radius: $radius;
	}
	& > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn{
		border-top-#{$ic-pos-right}-radius: 0;
		border-bottom-#{$ic-pos-right}-radius: 0;
		border-top-#{$ic-pos-left}-radius: $radius;
		border-bottom-#{$ic-pos-left}-radius: $radius;
	}
	button.dropdown-toggle.dropdown-toggle-split:first-child{
		border-top-#{$ic-pos-right}-radius: 0 !important;
    	border-bottom-#{$ic-pos-right}-radius: 0 !important;
		border-top-#{$ic-pos-left}-radius: $radius !important;
		border-bottom-#{$ic-pos-left}-radius: $radius !important;
	}
	button.dropdown-toggle.dropdown-toggle-split{
		border-top-#{$ic-pos-left}-radius: 0 !important;
    	border-bottom-#{$ic-pos-left}-radius: 0 !important;
		border-top-#{$ic-pos-right}-radius: $radius !important;
		border-bottom-#{$ic-pos-right}-radius: $radius !important;
	}
	& > :not(.btn-check) + .btn{
		border-top-#{$ic-pos-left}-radius: 0;
    	border-bottom-#{$ic-pos-left}-radius: 0;
		border-top-#{$ic-pos-right}-radius: $radius;
		border-bottom-#{$ic-pos-right}-radius: $radius;
	}
	& > .btn-group:not(:first-child) > .btn{
		border-top-#{$ic-pos-left}-radius: 0;
    	border-bottom-#{$ic-pos-left}-radius: 0;
		border-top-#{$ic-pos-right}-radius: $radius;
		border-bottom-#{$ic-pos-right}-radius: $radius;
	}
}