@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