.circle border-radius 3px padding .25em .4em font-weight 400 line-height 1.3 font-size 85% &:empty display inline-block vertical-align inherit .circle-pill color: #fff padding-right: .6em; padding-left: .6em; border-radius 10rem .circle-sm line-height 1.2 padding-top 1px padding-bottom 2px font-size 75% .circle-lg line-height 1.5 padding 5px 7px font-size 95% .circle-xl line-height 1.7 padding 7px 9px font-size 100% .circle-dot width 8px height 8px padding 0 border-radius 100% vertical-align middle &.circle-sm width 6px height 6px &.circle-lg width 10px height 10px &.circle-xl width 12px height 12px .circle-ring position relative width 10px height 10px padding 0 border-radius 100% vertical-align middle &::after content '' position absolute top 2px left 2px width 6px height 6px border-radius 50% background-color #fff -webkit-transform scale(1) transform scale(1) -webkit-transition .3s transition .3s &.circle-sm width 8px height 8px &::after width 4px height 4px &.circle-lg width 12px height 12px &::after width 8px height 8px &.circle-xl width 14px height 14px &::after width 10px height 10px &.fill &::after -webkit-transform scale(0) transform scale(0) .circle-bold text-transform uppercase font-weight 500 letter-spacing 1px