//
// Labels and badges
// --------------------------------------------------

@if $pills {

	// Base classes
	.label,
	.badge {
		// font-size: $baseFontSize * .846;
		// font-weight: bold;
		// line-height: 14px; // ensure proper line-height if floated
		// text-shadow: 0 -1px 0 rgba(0,0,0,.25);
		@extend %pill !optional;
		display: inline-block;
		padding: $pills-padding;
		vertical-align: baseline;
		white-space: nowrap;
	}
	// Set unique padding and border-radii
	.label {
		@include border-radius($base-border-radius);
	}
	.badge {
		// padding-left: 9px;
		// padding-right: 9px;
		@include border-radius(20px);
	}

	// Empty labels/badges collapse
	.label,
	.badge {
		&:empty {
			display: none;
		}
	}

	// Hover/focus state, but only for links
	a {
		&.label:hover,
		&.label:focus,
		&.badge:hover,
		&.badge:focus {
			color: $white;
			text-decoration: none;
			cursor: pointer;
		}
	}

	// Colors
	// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
	// @each $item in label, badge {
	// 	 // Important (red)
	// 	 .#{$item}-important				 { background-color: $errorText; }
	// 	 .#{$item}-important[href]	 { background-color: darken($errorText, 10%); }
	// 	 // Warnings (orange)
	// 	 .#{$item}-warning					 { background-color: $orange; }
	// 	 .#{$item}-warning[href]		 { background-color: darken($orange, 10%); }
	// 	 // Success (green)
	// 	 .#{$item}-success					 { background-color: $successText; }
	// 	 .#{$item}-success[href]		 { background-color: darken($successText, 10%); }
	// 	 // Info (turquoise)
	// 	 .#{$item}-info							{ background-color: $infoText; }
	// 	 .#{$item}-info[href]				{ background-color: darken($infoText, 10%); }
	// 	 // Inverse (black)
	// 	 .#{$item}-inverse					 { background-color: $grayDark; }
	// 	 .#{$item}-inverse[href]		 { background-color: darken($grayDark, 10%); }
	// }

	// Quick fix for labels/badges in buttons
	.btn {
		.label,
		.badge {
			margin: -.2em -.35em 0 .35em ;
		}
	}

	// .btn {
	//	 .label,
	//	 .badge {
	//		 position: relative;
	//		 top: -1px;
	//	 }
	// }
	// .btn-mini {
	//	 .label,
	//	 .badge {
	//		 top: 0;
	//	 }
	// }
}