// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.

.badge {
	transition: all 0.25s ease-in;
	// scss-docs-start badge-css-vars
	--#{$prefix}badge-padding-x: #{$badge-padding-x};
	--#{$prefix}badge-padding-y: #{$badge-padding-y};
	@include rfs($badge-font-size, --#{$prefix}badge-font-size);
	--#{$prefix}badge-font-weight: #{$badge-font-weight};
	--#{$prefix}badge-font-family: #{$badge-font-family};
	--#{$prefix}badge-color: #{$badge-color};
	--#{$prefix}badge-border-color: #{$badge-border-color};
	--#{$prefix}badge-border-radius: #{$badge-border-radius};
	--#{$prefix}badge-border: #{$badge-border};
	--#{$prefix}badge-hover-color: white;
	// scss-docs-end badge-css-vars
	border: var(--#{$prefix}badge-border);
	display: inline-block;
	padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
	@include font-size(var(--#{$prefix}badge-font-size));
	font-weight: var(--#{$prefix}badge-font-weight);
	font-family: var(--#{$prefix}badge-font-family);
	line-height: 1;
	color: var(--#{$prefix}badge-color);
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	@include border-radius(var(--#{$prefix}badge-border-radius));
	@include gradient-bg();

	// Empty badges collapse automatically
	&:empty {
		display: none;
	}
	&:hover {
		--#{$prefix}border-opacity: 1;
		background-color: #{$badge-color};
		color: var(--#{$prefix}badge-hover-color, white);
	}
}

// Quick fix for badges in buttons
.btn .badge {
	position: relative;
	top: -1px;
}