//############################################//
//######## Responsive Utilities #############//
//###########################################//

$breakpoints: (
    s: $small, // Mobile Screens
    m: $medium, // Tablet Screens
    l: $large, // Normal Screens
    w: $wide // Wide Screens
);

$min-width: min-width;

//############################################//
//# Customize Alom editing the variables  ###//
//###########################################//
// Example: @include breakpoint(s);
@mixin breakpoint($bp) {
  @media screen and (max-width: #{map-get($breakpoints, $bp)}) {
    @content;
  }
}


//############################################//
//####### Hide elements on devices  #########//
//###########################################//
@each $bp in map-keys($breakpoints) {
  .hide-on-#{$bp} {
    @include breakpoint($bp) {
      display: none !important;
    }
  }
}

//############################################//
//### Hide elements in only this devices  ###//
//###########################################//
@each $bp in map-keys($breakpoints) {
  .hide-on-#{$bp}-only {
    @media screen and (min-width: prev($breakpoints, #{$bp})) and (max-width: next($breakpoints, #{$bp})) {
      display: none !important;
    }
  }
}

@each $bp in map-keys($breakpoints) {
  .show-on-#{$bp} {
    display: none;

    @if ($min-width != null) {
      @media screen and (max-width: $small) {
        display: block;
      }
    }

    @else {
      @media screen and ($min-width: prev($breakpoints, #{$bp})) and (max-width: next($breakpoints, #{$bp})) {
        display: block;
      }
    }
  }
}