.badge{
    line-height: 1;
    border-radius: var(--border-radius);
    padding: 4px 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
	&.style-1{
        background-color: transparent;
        box-shadow: none;
        position: relative;
        padding: 0px 15px;
        &:after{
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            top: 50%;
            left: 0;
            background-color: var(--secondary);
            transform: translateY(-50%);                  
        }
    }
    &.style-2{
        background-color: transparent;
        box-shadow: none;
        position: relative;
        padding: 0px 15px;
        &:after{
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            top: 50%;
            left: 0;
            background-color: $success;
            transform: translateY(-50%);                  
        }
    }
    &.style-3{
        background-color: rgba(255, 255, 255, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.2);
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        border-radius: 50px;
    }
	&.notification{
		padding: 1.5rem 1.5rem;
	}
    &.counter{
		position: absolute;
		z-index: 2;
		right: -8px;
		top: -6px;
		font-weight: 600;
		width: 19px;
		height: 19px;
		border-radius: 50%;
		padding: 3px 4px;
		font-size: 12px;   
    }
    &.badge-light{
        margin: -10px 0;
    }
}
a.badge{
	&:hover{
		color: #fff;
	}
	&.badge-light{
		&:hover{
			color: $dark;
		}
	}
}
a[class*="badge-outline-"]{
	&:hover{
		color: $dark;
	}
}
	
.badge-rounded{
    border-radius: 1.25rem;
}
.badge-circle{
	border-radius: 50%;
    padding: 0;
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    line-height: 20px;
}
.badge-outline-primary{
    border-color: var(--primary);
    color: var(--primary);
}
.badge-outline-secondary{
    border-color: $secondary;
    color: $secondary;
}
.badge-outline-success{
    border-color: $success;
    color: $success;
}
.badge-outline-info{
    border-color: $info;
    color: $info;
}
.badge-outline-warning{
    border-color: $warning;
    color: $warning;
}
.badge-outline-danger{
    border-color: $danger;
    color: $danger;
}
.badge-outline-light{
    border-color: darken($light, 4%);
    color: $dark;
}
.badge-outline-dark{
    border-color: $dark;
    color: $dark;
	
}



.badge-sm {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: var(--border-radius);
}
.badge-lg {
	padding: 8px 14px;
    font-weight: 400;
    font-size: 14px;
}


.badge-default{
    background: #ADB6C7;
}
.badge-success {
    background-color: $success;
}
.badge-secondary {
    background-color: $secondary;
}
.badge-info {
    background-color: $info;
}
.badge-primary {
    background-color: var(--primary);
    color: var(--theme-text-color);
}
.badge-warning {
    background-color: $warning;
}
.badge-danger {
    background-color: $danger;
}
.badge-dark {
    background-color: $dark;
}
.badge-light {
    background-color: darken($light,4%);
	color: $dark;
}



.light{
	&.badge-default{
		background: #ADB6C7;
	}
	&.badge-primary{
		background-color: $primary-light;
		color:$primary;
	}
    &.badge-secondary{
        background-color: $secondary-light;
        color:$secondary;
    }
	&.badge-success {
		background-color: $success-light;
		color:$success;
	}
	&.badge-info{
		background-color: $info-light;
		color:$info;
	}
	&.badge-warning{
		background-color: $warning-light;
		color:$warning;
	}
	&.badge-danger{
		background-color: $danger-light;
		color:$danger;
	}
	&.badge-dark{
		background-color: $dark-light;
		color:$dark;
	}
	&.badge-light{
		background-color: lighten($light, 1%);
		color:$dark;
	}
}

.bootstrap-label{
    .label{
        display: inline-block;
        margin-right: 1rem;

        &:last-child{
            margin-right: 0;
        }
    }
}

.badge-demo{
    .badge{
        margin-right: 0.3125rem;
        margin-bottom: 0.3125rem;

        &:last-child{
            margin-right: 0;
        }
    }
}

.bootstrap-badge-buttons{

    button{
        margin-right: .2rem;
        margin-bottom: 1rem;

        &:last-child{
            margin-right: 0;
        }
    }
}
.shadow-primary{
    box-shadow: 0px 8px 14px -4px var(--rgba-primary-5);
    transition: all 0.5s !important;
    &:hover{    
        box-shadow: none;
    }
}
.shadow-info{
    box-shadow: 0px 8px 14px -4px rgba($info, .5);
    transition: all 0.5s !important;
    &:hover{    
        box-shadow: none;
    }
}
.shadow-secondary{
    box-shadow: 0px 8px 14px -4px rgba($secondary, .5);
    transition: all 0.5s !important;
    &:hover{    
        box-shadow: none;
    }
}
.shadow-dark{
    box-shadow: 0px 8px 14px -4px rgba($dark, .5);
    transition: all 0.5s !important;
    &:hover{    
        box-shadow: none;
    }
}

.badge-xs {
    font-size: 0.5rem;
    padding: 0rem 0.3125rem;
    line-height: 1rem;
    height: 16px;
}
.badge-sm {
	font-size: 0.6875rem;
    padding: 2px 5px;
    line-height: 0.6875rem;
}

.badge-lg {
    font-size: 0.875rem;
    padding: 0rem 0.625rem;
    line-height: 1.875rem;
}

.badge-xl {
	font-size: 14px;
	padding: 0.1rem 0.9375rem;
    line-height: 2.1875rem;
	font-weight:400;
}