// breakpoints are originally comfing from Twitter Bootstrap
$breakpoint-data: (
  xs: 480px,
  sm: 768px,
  md: 992px,
  lg: 1200px,
);

@function breakpoint-width($name) {
  $value: map-get($breakpoint-data, $name);

  @if type-of($value) != number {
    @error "Breakpoint `#{$name}` not found.";
  }

  @return $value;
}

// highly inspired by sass-mq
@mixin breakpoint($from: false, $until: false) {
  $min-width: 0;
  $max-width: 0;
  $media-query: "";

  // From: this breakpoint (inclusive)
  @if $from {
    $min-width: breakpoint-width($from);
  }

  // Until: that breakpoint (exclusive)
  @if $until {
    $max-width: breakpoint-width($until) - 1px;
  }

  @if $min-width != 0 {
    $media-query: "#{$media-query} and (min-width: #{$min-width})";
  }

  @if $max-width != 0 {
    $media-query: "#{$media-query} and (max-width: #{$max-width})";
  }

  // Remove leading " and"
  $media-query: str-slice(unquote($media-query), 6);

  @media #{$media-query} {
    @content;
  }
}

// Mixin to generate the same properties for all breakpoints
@mixin class-with-responsive-variants($class-name, $properties) {
  .#{$class-name} {
    @each $property, $value in $properties {
      #{$property}: $value;
    }
  }

  // Loop through the breakpoints and generate prefixed classes for all breakpoints
  @each $breakpoint, $breakpoint-value in $breakpoint-data {
    @media (min-width: $breakpoint-value) {
      .#{$breakpoint}\:#{$class-name} {
        @each $property, $value in $properties {
          #{$property}: $value;
        }
      }
    }
  }
}