//------------------------------------------------------------------------------------------------
// BADGE COMPONENT
//------------------------------------------------------------------------------------------------

/*
A small component used for sublimentary labelling. Similar to tooltip, but with
very short content which is always visible. Think "New", "2 Posts" etc.
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-badge-color: 'dark' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-badge {
	display: inline-block;
	padding: 0.2em 0.4em 0.25em 0.4em;
	font-size: 75%;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	border-radius: rem($global-border-radius);
	transition: box-shadow $global-transition-duration, background-color $global-transition-duration, border-color $global-transition-duration, color $global-transition-duration;
	background-color: color($component-badge-color);
	color: get-theme-text-color($component-badge-color);
	font-family: $global-body-font;
	line-height: 1;
	margin-left: 0.5em;
}

a.c-badge {
	text-decoration: none;
	
	&:hover,
	&:active,
	&:focus {
		outline: none;
	}
	
	&:hover {
		background-color: color('#{$component-badge-color}-dark');
	}
	
	&:focus {
		background-color: color('#{$component-badge-color}-dark');
		box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-badge-color), 0.5) /* [3] */
	}
}


// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-badge--small {
	font-size: 50%;
	transform: translateY(-10%);
	padding: 0.25em 0.4em 0.25em 0.4em;
	border-radius: rem($global-border-radius / 1.5);
}


.c-badge--tiny {
	font-size: 35%;
	transform: translateY(-25%);
	padding: 0.3em 0.4em 0.3em 0.4em;
	border-radius: rem($global-border-radius / 2);
}


// REVERSE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-badge--reverse {
	margin-left: 0;
	margin-right: 0.5em;
}