//
// Component: Badge
//
// ========================================================================


// Variables
// ========================================================================

@badge-background:                              fade(@global-primary-background, 3%);
@badge-padding-horizontal:                      20px;
@badge-font-size:                               @global-font-size;
@badge-font-weight:                             @global-body-font-weight;
@badge-line-height:                             @global-line-height;
@badge-color:                                   @global-primary-background;
@badge-text-transform:                          lowercase;

@badge-notification-font-size:                  round((@global-font-size * 0.85)); // 12px
@badge-notification-line-height:                round((@badge-notification-font-size * 1.5)); // 18px

@badge-success-background:                      fade(@global-success-background, 3%);
@badge-warning-background:                      fade(@global-warning-background, 3%);
@badge-danger-background:                       fade(@global-danger-background, 3%);


// Component
// ========================================================================

.hook-badge() {
	border-radius: @global-border-radius;
	border: none;
}


// Color modifier
// ========================================================================

//
// Modifier: `badge-success`
//

.hook-badge-success() {
	box-shadow: inset 0 0 0 1px fade(@global-success-background, 20%);
	color: @global-success-background;
}

//
// Modifier: `badge-warning`
//

.hook-badge-warning() {
	color: @global-warning-background;
	box-shadow: inset 0 0 0 1px fade(@global-warning-background, 20%);
}

//
// Modifier: `badge-danger`
//

.hook-badge-danger() {
	color: @global-danger-background;
	box-shadow: inset 0 0 0 1px fade(@global-danger-background, 20%);
}



// Miscellaneous
// ========================================================================

.hook-badge-misc() {

	.uk-badge-notification {
		padding: 0 6px;
	}
	
}