@if $use-lozenges == true {

	/*------------------------------------*\
		$LOZENGES
	\*------------------------------------*/
	/**
	 * Create pill- and lozenge-like runs of text, e.g.:
	 *
	   <p>This <span class=pill>here</span> is a pill!</p>
	 *
	   <p>This <span class=loz>here</span> is also a lozenge!</p>
	 *
	 * Pills have fully rounded ends, lozenges have only their corners rounded.
	 *
	 * Demo: jsfiddle.net/inuitcss/N3pGm
	 *
	 */
	.pill {
		display: inline-block;
		/**
		 * These numbers set in ems mean that, at its narrowest, a lozenge will be
		 * the same width as the `line-height` set on the `html` element.
		 * This allows us to use the `.loz` in almost any `font-size` we wish.
		 */
		min-width: ($line-height-ratio * 0.666667) * 1em;
		padding-right: ($line-height-ratio * 0.166667) * 1em;
		padding-left: ($line-height-ratio * 0.166667) * 1em;
		/* =1.50em */
		text-align: center;
		background-color: $base-ui-color;
		color: #fff; /* Override this color in your theme stylesheet */

		/**
		 * Normally we’d use border-radius:100%; but instead here we just use an
		 * overly large number; `border-radius:100%;` would create an oval on
		 * non-square elements whereas we just want to round the ends of an element.
		 */
		border-radius: 100px;
	}

	.loz {
		@extend .pill;
		border-radius: $brand-round;
	}

}

//endif
