//
// Variables
//

// Dependencies
@import 'config/variables';

$screen-desktop: #{map-get(map-get($variables, 'screens'), 'screen-desktop')}px;
$screen-tablet: #{map-get(map-get($variables, 'screens'), 'screen-tablet')}px;
$screen-mobile: #{map-get(map-get($variables, 'screens'), 'screen-mobile')}px;
$screen-sm-mobile: #{map-get(map-get($variables, 'screens'), 'screen-sm-mobile')}px;

@mixin screens($screens: map-get($variables, 'screens')) {
  $variant: '' !global; // !global allows us to "pass" $variant to the @content
  @content; // mobile first... then other breakpoints
  @each $screen, $s in $screens {
    @media (min-width: #{$s}px) {
      $variant: $screen + '\\:' !global;
      @content;
    }
  }
  $variant: '' !global;
}