/**
 * Bar
 *
 * Description: Styles for a percent bar.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Bar
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Bar
 * -----------------------------------------------------------------------------
 */

.bar {
	$font-size: 17px;
	font-size: em($font-size);
	border: 2px solid $green;

	.bar-meter {
		background-color: $green-light; 
		height: em(20px, $font-size);
		text-align: right;

		.bar-text {
			position: relative;
			word-wrap: normal;
			font-weight: 600;
			top: -2px;
			padding-right: em(10px, $font-size);
			padding-left: em(8px, $font-size);
			display: inline-block;
		}
	}
}