@import '../../stylesheets/jacket';

/* Jacket Tests
 * Take a look around and see what Jacket can do. */

$jacket: ios;
/* Single jacket context.
   The matching jacket will be output.
   $jacket: #{$jacket};  */

.misty {
  /* Universal */
  font-size: 1rem;

  /* jacket(ios) */
  @include jacket(ios) {
    top: 30px;
  }
  /* jacket(android-2x) */
  @include jacket(android-2x) {
    bottom: 30px;
  }
}

$jacket: anorak '.freezing';
/* Single jacket context, with selector.
   The matching jacket will be output wrapped in the selector.
   $jacket: #{$jacket};  */

.blizzard {
  /* Universal */
  font-size: 1rem;

  /* jacket(anorak) */
  @include jacket(anorak) {
    max-width: 90%;
  }
  /* jacket(windbreaker) */
  @include jacket(windbreaker) {
    max-width: none;
  }
}

$jacket: ie7, ie8;
/* Multiple jacket contexts.
   If any jacket context matches a value the jacket will be output.
   $jacket: #{$jacket};  */

.drizzle {
  /* Universal */
  font-size: 1rem;

  /* jacket(ie7) */
  @include jacket(ie7) {
    width: 100%;
  }
  /* jacket(ie8) */
  @include jacket(ie8) {
    content: 'My will also be output.';
    background: none;
  }
}

$jacket: main-site;
/* Multiple values in a single jacket.
   If a jacket context matches any of the values the jacket will be output.
   $jacket: #{$jacket}; */

.sunny {
  /* Universal */
  font-size: 1rem;

  /* jacket(main-site, sub-site) */
  @include jacket(main-site, sub-site) {
    margin: 1.618rem 0;
  }

  /* jacket(sub-site) */
  @include jacket(sub-site) {
    line-height: 1.444rem;
  }
}

$jacket: track, overcoat, mod ".triumph";
/* Multiple contexts and multiple values in a single jacket.
   If a jacket context matches any of the values the jacket will be output.
   $jacket: #{$jacket}; */

.cafe-race {
  /* Universal */
  font-size: 1rem;

  /* jacket(track, tie, suit) */
  @include jacket(track, tie, suit) {
    position: absolute;
  }
  /* jacket(suit, mod, overcoat) */
  @include jacket(suit, mod, overcoat) {
    top: 3em;
  }
  /* jacket(leather) */
  @include jacket(leather) {
    position: fixed;
  }
}

$jacket: build-1, build-1-a;
/* Conditional logic with nested jackets.
   You can create 'and' logic by nesting jackets.
   $jacket: #{$jacket};  */

.soire {
  font-size: 1rem;

  /* jacket(build-1) { jacket(build-1-a) {} } */
  @include jacket(build-1) {
    @include jacket(build-1-a) {
      background-image: url(titans.gif);
    }
  }
  /* jacket(build-1) { jacket(build-1-b) {} } */
  @include jacket(build-1) {
    @include jacket(build-1-b) {
      background-image: url(zardoz.gif);
    }
  }
}

/* A simple media query fallback mixin built with jacket. */
@mixin jacket-mq($media-query) {
  @include jacket(queries) {
    @media #{$media-query} {
      @content;
    }
  }
  @include jacket(noqueries) {
    @content;
  }
}

$jacket: standards, queries;
/* Output media queries
   $jacket: #{$jacket}; */

.casual {
  @include jacket-mq('(min-width: 30em) and (orientation: portrait)') {
    color: green;
    height: 0.5vh;
  }
}

$jacket: old-ie, noqueries;
/* Output rules without queries (probably in their own stylesheet)
   $jacket: #{$jacket}; */

.casual {
  @include jacket-mq('(min-width: 30em) and (orientation: portrait)') {
    color: green;
    height: 0.5vh;
  }
}

$jacket: main-site, queries, noqueries ".lt-ie9";
/* Output media queries and wrapped rules without queries in the same stylesheet
   $jacket: #{$jacket}; */

.casual {
  @include jacket-mq('(min-width: 30em) and (orientation: portrait)') {
    color: green;
    height: 0.5vh;
  }
}

$jacket: space-theme;
/* jacket() function.
   If a jacket context matches, the value will be output.
   $jacket: #{$jacket}; */

.container {
  background-color: #222;
  /* background-image: jacket(url(../universe-bg.png), space-theme); */
  background-image: jacket(url(../universe-bg.png), space-theme);
}

$jacket: simple;
/* $jacket: #{$jacket}; */
.container {
  background-color: #222;
  /* background-image: jacket(url(../universe-bg.png), space-theme); */
  background-image: jacket(url(../universe-bg.png), space-theme);
}
