// Local variables
// ---------------
@badge-size-small:  14px;
@badge-size-medium: 21px;
@badge-size-large:  28px;

// Put this class manually on the parent of the badge:
.o-has-badge {
	position: relative;
}

// Base styles for the badge
.o-badge {
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 100%;
	color: #00c364;
	font-size: @badge-size-medium;
	line-height: 1;
	opacity: 0;
	position: absolute;
	right: @badge-size-medium * -0.5;
	top: @badge-size-medium * -0.5;
	transform: scale(0.25);

	// http://cubic-bezier.com/#.7,.8,.2,1.5
	transition: all 0.3s cubic-bezier(0.7, 0.8, 0.2, 1.5);

	// Toggle this class to show it:
	&.is-visible {
		opacity: 1;
		transform: scale(1);
	}

	// Size variations
	&.o-badge-small {
		font-size: @badge-size-small;
		right: @badge-size-small * -0.5;
		top: @badge-size-small * -0.5;
	}

	&.o-badge-large {
		font-size: @badge-size-large;
		right: @badge-size-large * -0.5;
		top: @badge-size-large * -0.5;
	}
}