/*
---
name: Text alignment
category: Foundations/Helpers
tag: helpers
---
These classes help us to modify the default aligntment of the text in our views.

If the parent is displayed using flex, it will also work because
`justify-content: left | center | right` is applied.

```html
<p class="text-l">Left alignment</p>
<p class="text-r">Right alignment</p>
<p class="text-c">Center alignment</p>
```
*/
.text-l {
  text-align: left;
  justify-content: left;
}

.text-r {
  text-align: right;
  justify-content: right;
}

.text-c {
  text-align: center;
  justify-content: center;
}

/*
---
name: Floating
category: Foundations/Helpers
tag: helpers
---
Also, we can update the float property of our blocks

```html
<div class="float-l">Float left</div>
<div class="float-r">Float right</div>
```

```html
<div class="float-n">Remove floating</div>
```
*/
.float-l {
  float: left;
}

.float-r {
  float: right;
}

.float-n {
  float: none;
}

/*
---
name: Clearfix
category: Foundations/Helpers
tag: helpers
---
Clear floating elements in the current container

```html
<div class="clearfix">
  <div class="float-l">Float left</div>
  <div class="float-r">Float right</div>
</div>
```

```html
<div class="float-n">Remove floating</div>
```
*/
.clearfix {
  @include clearfix();
}