*-visible / *-hidden classes about reflex HOT 13 CLOSED

$breakpoints: (
    'xs-only'     'screen and (max-width: 29.94em)',
    'sm-only'     'screen and (min-width: 30em) and (max-width: 47.94em)',
    'sm-and-up'   'screen and (min-width: 30em)',
    'md-only'     'screen and (min-width: 48em) and (max-width: 74.94em)',
    'md-and-up'   'screen and (min-width: 48em)',
    'lg-only'     'screen and (min-width: 75em) and (max-width: 99.94em)',
    'lg-and-up'   'screen and (min-width: 75em)',
    'xlg-and-up'  'screen and (min-width: 100em)',

    'palm'               'screen and (max-width: 47.94em)',
    'lap'                'screen and (min-width: 48em) and (max-width: 74.94em)',
    'lap-and-up'         'screen and (min-width: 48em)',
    'portable'           'screen and (max-width: 74.94em)',
    'desk'               'screen and (min-width: 75em)',

    'retina'      '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
  ) !default;

@mixin media-query($mq) {
  $breakpoint-found: false;
  // Loop through the list of breakpoints we’ve provided in our settings file.

  @each $breakpoint in $breakpoints {
    // Grab the alias and the condition from their respective locations in
    // the list.
    $alias: nth($breakpoint, 1);
    $condition: nth($breakpoint, 2);
    // If the media query we’ve specified has an alias and a condition...

    @if $mq == $alias and $condition {
      // ...tell the mixin that we’ve found it...
      $breakpoint-found: true;
      // ...and spit it out here.

      @media #{$condition} {

        @content;
      }
    }
  }
  // If the user specifies a non-exitent alias, send them a warning.

  @if $breakpoint-found == false {

    @warn  'Oops! Breakpoint ‘#{$mq}’ does not exist. ';
  }
}

@mixin hide {
  display: none !important;
}

@each $state in xs-only,
  sm-only,
  sm-and-up,
  md-only,
  md-and-up,
  lg-only,
  lg-and-up,
  xlg-and-up,
  palm,
  lap,
  lap-and-up,
  portable,
  desk,
  retina {

  @include media-query(#{$state}) {
    .hide--#{$state} {
      @include hide;
    }
  }
}

.grid__col-xs-hidden, 
.grid__col-sm-hidden, 
.grid__col-md-hidden, 
.grid__col-lg-hidden, 
.grid__col-xlg-hidden {
  display: none;
}