/*!markdown

---
title: Opacity
---

| Class       | Properties               |
| ----------- | ------------------------ |
| opacity-0 | opacity: 0 |
| opacity-5 | opacity: 0.05 |
| opacity-10 | opacity: 0.1 |
| opacity-20 | opacity: 0.2 |
| opacity-25 | opacity: 0.25 |
| opacity-30 | opacity: 0.3 |
| opacity-40 | opacity: 0.4 |
| opacity-50 | opacity: 0.5 |
| opacity-60 | opacity: 0.6 |
| opacity-70 | opacity: 0.7 |
| opacity-75 | opacity: 0.75 |
| opacity-80 | opacity: 0.8 |
| opacity-90 | opacity: 0.9 |
| opacity-95 | opacity: 0.95 |
| opacity-100 | opacity: 1 |


*/

@mixin make-opacity($prefix: '.', $suffix: '') {
  @each $name,
    $value
      in (
        '0': 0,
        '5': 0.05,
        '10': 0.1,
        '20': 0.2,
        '25': 0.25,
        '30': 0.3,
        '40': 0.4,
        '50': 0.5,
        '60': 0.6,
        '70': 0.7,
        '75': 0.75,
        '80': 0.8,
        '90': 0.9,
        '95': 0.95,
        '100': 1
      )
  {
    #{$prefix}opacity#{suffixName($name)}#{$suffix} {
      opacity: $value;
    }
  }
}

@include make-opacity();
@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include make-opacity('.' + selector-escape($deivce + ':'));
  }
}

// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));