// ---------------------------------------------------------------------------
// Imports

@import "../../sass/ezy/media";

// ---------------------------------------------------------------------------
// Media

$width-1: 400px;
$width-2: 800px;

$breakpoint-1-a:  set-breakpoint( $max: $width-1 );
$breakpoint-1-b:  set-breakpoint( $max: $width-1, $legacy-support: true );
$breakpoint-2-a:  set-breakpoint( $min: $width-1+1, $max: $width-2 );
$breakpoint-2-b:  set-breakpoint( $min: $width-1+1, $max: $width-2, $legacy-support: true );
$breakpoint-3-a:  set-breakpoint( $min: $width-2+1);
$breakpoint-3-b:  set-breakpoint( $min: $width-2+1, $legacy-support: true);
$breakpoint-4-a:  set-breakpoint( $custom: "(min-width: 40em) and (max-width: 80em)");
$breakpoint-4-b:  set-breakpoint( $custom: "(min-width: 40em) and (max-width: 80em)", $legacy-support: true);

.test{
  @include at-breakpoint( $breakpoint-1-a ) {
    content: "Breakpoint 1 (A)";
  }
  @include at-breakpoint( $breakpoint-1-b ) {
    content: "Breakpoint 1 (B)";
  }
  @include at-breakpoint( $breakpoint-2-a ) {
    content: "Breakpoint 2 (A)";
  }
  @include at-breakpoint( $breakpoint-2-b ) {
    content: "Breakpoint 2 (B)";
  }
  @include at-breakpoint( $breakpoint-3-a ) {
    content: "Breakpoint 3 (A)";
  }
  @include at-breakpoint( $breakpoint-3-b ) {
    content: "Breakpoint 3 (B)";
  }
  @include at-breakpoint( $breakpoint-4-a ) {
    content: "Breakpoint 4 (A)";
  }
  @include at-breakpoint( $breakpoint-4-b ) {
    content: "Breakpoint 4 (B)";
  }

  // -------------------------------------------------------------------- *
  // Force legacy support

  @include at-breakpoint( $breakpoint-1-a, $legacy-support: true ) {
    content: "Forcing legacy support";
  }

  // -------------------------------------------------------------------- *
  // Custom legacy selector

  $legacy-selector: ".ie8";

  @include at-breakpoint( $breakpoint-2-b ) {
    content: "Custom legacy selector";
  }

 
}