/*
@styleguide
@title Positioning

Use positioning classes to control how elements are laid out in relation to
the viewport or other elements.

Position classes have the following values:
- `a` (absolute)
- `f` (fixed)
- `r` (relative)
- `s` (static)
- `i` (inherit)

You can also specify top, right, bottom, and left positions using the following
syntax {side}--{space}, e.g., `top--0.25`.

Space values are:
- `0`
- `0.25`
- `0.5`
- `0.75`
- `1`
- `1.5`
- `2`

<div class="position--r height--l">
  <div class="position--a bottom--0 right--0">
    Stuck to the bottom right
  </div>
</div>

```html
<div class="border b-color--main position--r height--l">
  <div class="position--a bottom--0 right--0">
    Stuck to the bottom right
  </div>
</div>
```

There is also an `absolute--fill` class that
will stretch an element to all four corners of its parent:

<div class="position--r height--l width--100-pct">
  <div class="position--a absolute--fill bg-color--dscout">
    Absolute Fill
  </div>
</div>

```html
<div class="position--r height--l width--100-pct">
  <div class="position--a absolute--fill bg-color--dscout">
    Absolute Fill
  </div>
</div>
```
*/

// === POSITIONING === //

.position--a { position: absolute; }
.position--f { position: fixed; }
.position--r { position: relative; }
.position--s { position: static; }
.position--i { position: inherit; }

.top--0    { top:    0; }
.right--0  { right:  0; }
.bottom--0 { bottom: 0; }
.left--0   { left:   0; }

.top--0\.25    { top:    .25em; }
.right--0\.25  { right:  .25em; }
.bottom--0\.25 { bottom: .25em; }
.left--0\.25   { left:   .25em; }

.top--0\.5    { top:    .5em; }
.right--0\.5  { right:  .5em; }
.bottom--0\.5 { bottom: .5em; }
.left--0\.5   { left:   .5em; }

.top--0\.75    { top:    .75em; }
.right--0\.75  { right:  .75em; }
.bottom--0\.75 { bottom: .75em; }
.left--0\.75   { left:   .75em; }

.top--1    { top:    1em; }
.right--1  { right:  1em; }
.bottom--1 { bottom: 1em; }
.left--1   { left:   1em; }

.top--1\.5    { top:    1.5em; }
.right--1\.5  { right:  1.5em; }
.bottom--1\.5 { bottom: 1.5em; }
.left--1\.5   { left:   1.5em; }

.top--2    { top:    2em; }
.right--2  { right:  2em; }
.bottom--2 { bottom: 2em; }
.left--2   { left:   2em; }

.absolute--fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}