/*doc
---
title: Circles
name: circles
category: Components - Circles
---

Basic circles are tiny objects usually only used to display a count.
They are however very flexible.

*/

/*doc
---
title: Basic example
name: circles_01_example
parent: circles
---

```htmlexample
<span class="circle">14</span>
```

Badges can also contain text.
Text inside has to be wrapped inside `.text`.

```htmlexample
<span class="circle">
  <span class="text">14</span>
</span>
```

Circle can be red if you add circle-red class.

```htmlexample
<span class="circle circle-red">
  <span class="text">14</span>
</span>
```

*/

.circle {
  display: inline-block;
  line-height: inherit;
  color: #fff;
  border-radius: 50%;
  font-size: $fs-xtiny;
  padding: 2px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  margin-left: 5px;

  .text {
    display: inline-block;
  }
}

.circle-red {
  @extend .circle;
  background-color: red;
}

.circle + .circle {
  margin-left: 5px;
}

.circle-complexity {
  @extend .circle;
  height: 10px;
  width: 10px;
  vertical-align: middle;
}
