/*
---
name: Balloon (Top)
category:
  - object/component
  - object/component/balloon
---

```html
<div class="_c-balloon-top">
  ...
</div>
```
*/

.{_prefix}c-balloon-top {
  _balloon-top({
    background-color: #fff,
    border-color: _light(_color-gray),
    border-size: 1px,
  });

  border-radius: _border-radius;
}

/*
---
name: Balloon (Right)
category:
  - object/component
  - object/component/balloon
---

```html
<div class="_c-balloon-right">
  ...
</div>
```
*/

.{_prefix}c-balloon-right {
  _balloon-right({
    background-color: #fff,
    border-color: _light(_color-gray),
    border-size: 1px,
  });

  border-radius: _border-radius;
}

/*
---
name: Balloon (Bottom)
category:
  - object/component
  - object/component/balloon
---

```html
<div class="_c-balloon-bottom">
  ...
</div>
```
*/

.{_prefix}c-balloon-bottom {
  _balloon-bottom({
    background-color: #fff,
    border-color: _light(_color-gray),
    border-size: 1px,
  });

  border-radius: _border-radius;
}

/*
---
name: Balloon (Left)
category:
  - object/component
  - object/component/balloon
---

```html
<div class="_c-balloon-left">
  ...
</div>
```
*/

.{_prefix}c-balloon-left {
  _balloon-left({
    background-color: #fff,
    border-color: _light(_color-gray),
    border-size: 1px,
  });

  border-radius: _border-radius;
}