.badge {
	@include clay-badge-variant($cadmin-badge);
}

.badge-item {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: center;
	min-height: 0;
	position: relative;
	text-align: left;

	a {
		display: inline-flex;
	}

	.btn-unstyled {
		color: inherit;
		display: inline-flex;
	}

	.close {
		@include clay-close($cadmin-badge-close);
	}

	.lexicon-icon {
		height: $cadmin-badge-lexicon-icon-height;
		margin-top: $cadmin-badge-lexicon-icon-margin-top;
		width: $cadmin-badge-lexicon-icon-width;
	}
}

.badge-item-expand {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: $cadmin-badge-item-expand-min-width;
	word-wrap: break-word;

	a {
		flex-direction: column;
	}
}

.badge-item-before {
	margin-right: $cadmin-badge-item-spacer-x;
}

.badge-item-after {
	margin-left: $cadmin-badge-item-spacer-x;
}

// Quick fix for badges in buttons

.btn .badge {
	margin-right: 0;
	position: relative;
	top: -1px;
}

// Badge Variants

@each $color, $value in $cadmin-badge-palette {
	@if not clay-is-map-unset($value) {
		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
			'danger', 'dark', 'light';

		$selector: if(
			index($deprecated-keys, '#{$color}') != null,
			str-insert($color, '.badge-', 1),
			if(starts-with($color, 'badge'), str-insert($color, '.', 1), $color)
		);

		@if (starts-with($color, '%') or map-get($value, extend)) {
			#{$selector} {
				@include clay-badge-variant($value);
			}
		} @else if
			(
				starts-with($color, 'badge') or
					index($deprecated-keys, '#{$color}') !=
					null
			)
		{
			$placeholder: if(
				starts-with($color, '.') or starts-with($color, '#'),
				'%#{str-slice($color, 2)}',
				'%badge-#{$color}'
			);

			#{$placeholder} {
				@include clay-badge-variant($value);
			}

			#{$selector} {
				@extend #{$placeholder} !optional;
			}
		} @else {
			#{$selector} {
				@include clay-badge-variant($value);
			}
		}
	}
}