// Responsive media queries

@mixin breakpoint($breakpoint) {

@if $breakpoint == "" {
  @content;
} @else {
  // Retrieves the value from the key
  $value: map-get($breakpoints, $breakpoint);

  // If the key exists in the map
  @if $value != null {
    // Prints a media query based on the value
    @media (min-width: $value) {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
      + "Please make sure it is defined in `$breakpoints` map.";
  }
}

}

// Retina media query

@mixin retina-media-query {

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-moz-min-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  @content;
}

}

// Clearfix // // Clears floats via mixin.

@mixin clearfix {

&::before {
  display: table;
  content: "";
}

&::after {
  display: table;
  clear: both;
  content: "";
}

}