// Get break point
@function breakpoint($breakpoint-name) {
  $breakpoint-value: map-get($breakpoints, $breakpoint-name);

  @if $breakpoint-value {
    @return $breakpoint-value;
  }

  @warn "Breakpoint '#{$breakpoint-name}' not found in $breakpoints";
}

// Write media query
@mixin respond-above($breakpoint-name) {
  $breakpoint-value: breakpoint($breakpoint-name);

  @if $breakpoint-value {
    @media screen and (max-width: $breakpoint-value) {
      @content;
    }
  }
}

// Write classes hidden and visible to each breakpoint
@each $breakpoint-name, $breakpoint-value in $breakpoints {
  .hidden_above_#{$breakpoint-name}{
    @media screen and (min-width: $breakpoint-value) {
      display: none !important;
    }
  }
  .hidden_below_#{$breakpoint-name}{
    @media screen and (max-width: $breakpoint-value) {
      display: none !important;
    }
  }
  .visible_above_#{$breakpoint-name}{
    @media screen and (min-width: $breakpoint-value) {
      display: block !important;
    }
  }
  .visible_below_#{$breakpoint-name}{
    @media screen and (max-width: $breakpoint-value) {
      display: block !important;
    }
  }
}
