/* Jacket Tests
 * Take a look around and see what Jacket can do. */
/* Single jacket context.
   The matching jacket will be output.
   $jacket: ios;  */
.misty {
  /* Universal */
  font-size: 1rem;
  /* jacket(ios) */
  top: 30px;
  /* jacket(android-2x) */
}

/* Single jacket context, with selector.
   The matching jacket will be output wrapped in the selector.
   $jacket: anorak ".freezing";  */
.blizzard {
  /* Universal */
  font-size: 1rem;
  /* jacket(anorak) */
  /* jacket(windbreaker) */
}
.freezing .blizzard {
  max-width: 90%;
}

/* Multiple jacket contexts.
   If any jacket context matches a value the jacket will be output.
   $jacket: ie7, ie8;  */
.drizzle {
  /* Universal */
  font-size: 1rem;
  /* jacket(ie7) */
  width: 100%;
  /* jacket(ie8) */
  content: 'My will also be output.';
  background: none;
}

/* Multiple values in a single jacket.
   If a jacket context matches any of the values the jacket will be output.
   $jacket: main-site; */
.sunny {
  /* Universal */
  font-size: 1rem;
  /* jacket(main-site, sub-site) */
  margin: 1.618rem 0;
  /* jacket(sub-site) */
}

/* Multiple contexts and multiple values in a single jacket.
   If a jacket context matches any of the values the jacket will be output.
   $jacket: track, overcoat, mod ".triumph"; */
.cafe-race {
  /* Universal */
  font-size: 1rem;
  /* jacket(track, tie, suit) */
  position: absolute;
  /* jacket(suit, mod, overcoat) */
  top: 3em;
  /* jacket(leather) */
}
.triumph .cafe-race {
  top: 3em;
}

/* Conditional logic with nested jackets.
   You can create 'and' logic by nesting jackets.
   $jacket: build-1, build-1-a;  */
.soire {
  font-size: 1rem;
  /* jacket(build-1) { jacket(build-1-a) {} } */
  background-image: url(titans.gif);
  /* jacket(build-1) { jacket(build-1-b) {} } */
}

/* A simple media query fallback mixin built with jacket. */
/* Output media queries
   $jacket: standards, queries; */
@media (min-width: 30em) and (orientation: portrait) {
  .casual {
    color: green;
    height: 0.5vh;
  }
}

/* Output rules without queries (probably in their own stylesheet)
   $jacket: old-ie, noqueries; */
.casual {
  color: green;
  height: 0.5vh;
}

/* Output media queries and wrapped rules without queries in the same stylesheet
   $jacket: main-site, queries, noqueries ".lt-ie9"; */
@media (min-width: 30em) and (orientation: portrait) {
  .casual {
    color: green;
    height: 0.5vh;
  }
}
.lt-ie9 .casual {
  color: green;
  height: 0.5vh;
}

/* jacket() function.
   If a jacket context matches, the value will be output.
   $jacket: space-theme; */
.container {
  background-color: #222;
  /* background-image: jacket(url(../universe-bg.png), space-theme); */
  background-image: url(../universe-bg.png);
}

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