/*
@styleguide
@title Border Radii

Use rounded classes to set the border radius of an element.
Pre-defined sizes are:

- `tiny`
- `small`
- `med`
- `large`
- `extra-large`
- `circle`
- `pill`

<div class="rounded--med bg-color--dscout color--invert padding--1">Medium Rounded</div>

```html
<div class="rounded--med bg-color--dscout color--invert padding--1">Medium Rounded</div>
```

Radii can also be applied to each side of an element individually like so:

- `top`
- `right`
- `bottom`
- `left`

<div class="rounded-right--large bg-color--dscout color--invert padding--1">Rounded right</div>

```html
<div class="rounded-right--large bg-color--dscout color--invert padding--1">Rounded right</div>
```
*/

// === RADII === //

.rounded--tiny   { border-radius: var(--radius--tiny); }
.rounded--small  { border-radius: var(--radius--small); }
.rounded--med    { border-radius: var(--radius--med); }
.rounded--large  { border-radius: var(--radius--large); }
.rounded--extra-large  { border-radius: var(--radius--extra-large); }
.rounded--huge  { border-radius: var(--radius--huge); }
.rounded--circle { border-radius: var(--radius--circle); }
.rounded--pill   { border-radius: var(--radius--pill); }

.rounded-top--tiny   {
  border-top-left-radius: var(--radius--tiny);
  border-top-right-radius: var(--radius--tiny);
}
.rounded-top--small  {
  border-top-left-radius: var(--radius--small);
  border-top-right-radius: var(--radius--small);
}
.rounded-top--med    {
  border-top-left-radius: var(--radius--med);
  border-top-right-radius: var(--radius--med);
}
.rounded-top--large  {
  border-top-left-radius: var(--radius--large);
  border-top-right-radius: var(--radius--large);
}
.rounded-top--extra-large  {
  border-top-left-radius: var(--radius--extra-large);
  border-top-right-radius: var(--radius--extra-large);
}
.rounded-top--huge   {
  border-top-left-radius: var(--radius--huge);
  border-top-right-radius: var(--radius--huge);
}
.rounded-top--circle {
  border-top-left-radius: var(--radius--circle);
  border-top-right-radius: var(--radius--circle);
}
.rounded-top--pill   {
  border-top-left-radius: var(--radius--pill);
  border-top-right-radius: var(--radius--pill);
}

.rounded-right--tiny   {
  border-top-right-radius: var(--radius--tiny);
  border-bottom-right-radius: var(--radius--tiny);
}
.rounded-right--small  {
  border-top-right-radius: var(--radius--small);
  border-bottom-right-radius: var(--radius--small);
}
.rounded-right--med    {
  border-top-right-radius: var(--radius--med);
  border-bottom-right-radius: var(--radius--med);
}
.rounded-right--large  {
  border-top-right-radius: var(--radius--large);
  border-bottom-right-radius: var(--radius--large);
}
.rounded-right--extra-large  {
  border-top-right-radius: var(--radius--extra-large);
  border-bottom-right-radius: var(--radius--extra-large);
}
.rounded-right--huge   {
  border-top-right-radius: var(--radius--huge);
  border-bottom-right-radius: var(--radius--huge);
}
.rounded-right--circle {
  border-top-right-radius: var(--radius--circle);
  border-bottom-right-radius: var(--radius--circle);
}
.rounded-right--pill   {
  border-top-right-radius: var(--radius--pill);
  border-bottom-right-radius: var(--radius--pill);
}

.rounded-bottom--tiny   {
  border-bottom-left-radius: var(--radius--tiny);
  border-bottom-right-radius: var(--radius--tiny);
}
.rounded-bottom--small  {
  border-bottom-left-radius: var(--radius--small);
  border-bottom-right-radius: var(--radius--small);
}
.rounded-bottom--med    {
  border-bottom-left-radius: var(--radius--med);
  border-bottom-right-radius: var(--radius--med);
}
.rounded-bottom--large  {
  border-bottom-left-radius: var(--radius--large);
  border-bottom-right-radius: var(--radius--large);
}
.rounded-bottom--extra-large  {
  border-bottom-left-radius: var(--radius--extra-large);
  border-bottom-right-radius: var(--radius--extra-large);
}
.rounded-bottom--huge   {
  border-bottom-left-radius: var(--radius--huge);
  border-bottom-right-radius: var(--radius--huge);
}
.rounded-bottom--circle {
  border-bottom-left-radius: var(--radius--circle);
  border-bottom-right-radius: var(--radius--circle);
}
.rounded-bottom--pill   {
  border-bottom-left-radius: var(--radius--pill);
  border-bottom-right-radius: var(--radius--pill);
}

.rounded-left--tiny   {
  border-top-left-radius: var(--radius--tiny);
  border-bottom-left-radius: var(--radius--tiny);
}
.rounded-left--small  {
  border-top-left-radius: var(--radius--small);
  border-bottom-left-radius: var(--radius--small);
}
.rounded-left--med    {
  border-top-left-radius: var(--radius--med);
  border-bottom-left-radius: var(--radius--med);
}
.rounded-left--large  {
  border-top-left-radius: var(--radius--large);
  border-bottom-left-radius: var(--radius--large);
}
.rounded-left--extra-large  {
  border-top-left-radius: var(--radius--extra-large);
  border-bottom-left-radius: var(--radius--extra-large);
}
.rounded-left--huge   {
  border-top-left-radius: var(--radius--huge);
  border-bottom-left-radius: var(--radius--huge);
}
.rounded-left--circle {
  border-top-left-radius: var(--radius--circle);
  border-bottom-left-radius: var(--radius--circle);
}
.rounded-left--pill   {
  border-top-left-radius: var(--radius--pill);
  border-bottom-left-radius: var(--radius--pill);
}