/* ======================== */
/* Assets - https://github.com/borodean/postcss-assets
/* ======================== */
/* PostCSS Assets is an asset manager for CSS. It isolates stylesheets from
/* environmental changes, gets image sizes and inlines files.
/* ------------------------ */

/* INPUT
/* ------------------------ */
.image {
  height: height('image.png');
  width: width('image.png');
  background-image: resolve('image.png');
  background-image: inline('image.png');
  background-size: size('image.png');
}

/* OUTPUT
/* ------------------------ */
.image {
  height: 191px;
  width: 339px;
  background-image: url('/static/img/image.png');
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVMAAAC/CAIAAADM2KhuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjJDODVENUE0RkVBMTFFNUJGOTA5RTNFNTM3OUYxRDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjJDODVENUI0RkVBMTFFNUJGOTA5RTNFNTM3OUYxRDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjMxQjJGRjRGRTUxMUU1QkY5MDlFM0U1Mzc5RjFEMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjMxQjMwMDRGRTUxMUU1QkY5MDlFM0U1Mzc5RjFEMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoAlaQMAAAG1SURBVHja7NMBDQAwCMCwcxGYB7HoILQSliyy+gHHfAnA+YDzAecDzgecDzgfcD7gfMD5gPMB5wPOB5wPOB9wPuB8wPmA88H5gPMB5wPOB5wPOB9wPuB8wPmA8wHnA84HnA84H3A+4HzA+YDzwfmA8wHnA84HnA84H3A+4HzA+YDzAecDzgecDzgfcD7gfMD5gPMB54PzAecDzgecDzgfcD7gfMD5gPMB5wPOB5wPOB9wPuB8wPmA8wHng/MB5wPOB5wPOB9wPuB8wPmA8wHnA84HnA84H3A+4HzA+YDzAecDzgfnA84HnA84H3A+4HzA+YDzAecDzgecDzgfcD7gfMD5gPMB5wPOB+cDzgecDzgfcD7gfMD5gPMB5wPOB5wPOB9wPuB8wPmA8wHnA84H50sAzgecDzgfcD7gfMD5gPMB5wPOB5wPOB9wPuB8wPmA8wHnA84HnA/OB5wPOB9wPuB8wPmA8wHnA84HnA84H3A+4HzA+YDzAecDzgecD84HnA84H3A+4HzA+YDzAecDzgecDzgfcD7gfMD5gPMB5wPOB5wPOB+cDzgfcD7gfMD5wDojwAD16QLLu8PCHgAAAABJRU5ErkJggg==');
  background-size: 339px 191px;
}

/* ======================== */
/* at2x - https://github.com/simonsmith/postcss-at2x
/* ======================== */
/* Adds at-2x keyword to background and background-image declarations to add
/* retina support for images.
/* ------------------------ */

/* INPUT
/* ------------------------ */
.at2x {
  background-image: resolve('image.png') at-2x;
}

/* OUTPUT
/* ------------------------ */
.at2x {
  background-image: url('/static/img/image.png');
}

@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .at2x {
    background-image: url('/static/img/image@2x.png');
  }
}

/* ======================== */
/* Autoprefixer - https://github.com/postcss/autoprefixer
/* ======================== */
/* PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values
/* from Can I Use.
/* ------------------------ */

/* INPUT
/* ------------------------ */
.autoprefixer {
  display: flex;
  transform: rotate(45deg);
}

/* OUTPUT
/* ------------------------ */
.autoprefixer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ======================== */
/* Enter - https://github.com/jonathantneal/postcss-pseudo-class-enter
/* ======================== */
/* Pseudo Class Enter is a PostCSS plugin that allows you to use the proposed
/* :enter pseudo-class in CSS.

/* :enter simplifies selectors targeting elements that are designated, as the
/* naming of :hover is somewhat misleading; it specifically means elements
/* designated with a pointing device, rather than any device.
/* ------------------------ */

/* INPUT
/* ------------------------ */
.enter:enter {
  box-shadow: 5px 5px 5px rgba(#000, 0.3);
}

/* OUTPUT
/* ------------------------ */
.enter:hover,
.enter:focus {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

/* ======================== */
/* FakeId - https://github.com/pathsofdesign/postcss-fakeid
/* ======================== */
/* Transform #id's to attribute selectors.

/* ID's should never be used in CSS as they are far too specific, this
/* normalizes them to be the same specificity as class declarations.
/* ------------------------ */

/* INPUT
/* ------------------------ */
#fakeId {
  content: "I shouldn't be used...";
}

/* OUTPUT
/* ------------------------ */
[id="fakeId"] {
  content: "I shouldn't be used...";
}

/* ======================== */
/* Flexbug Fixes - https://github.com/luisrudge/postcss-flexbugs-fixes
/* ======================== */
/* Fixes of common flexbox issues in older browsers
/* ------------------------ */

/* INPUT
/* ------------------------ */
.flexFlex {
  flex: 1;
}

.flexFlexCalc {
  flex: 1 0 calc(1vw - 1px);
}

/* OUTPUT
/* ------------------------ */
.flexFlex {
  flex: 1 1 0%;
}

.flexFlexCalc {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(1vw - 1px);
}

/* ======================== */
/* Property Lookup - https://github.com/simonsmith/postcss-property-lookup
/* ======================== */
/* Allows referencing property values without a variable

/* One thing to note Sass throws an error on compilation if you don't wrap the
/* reference in a string and interpolate it.

/* Declaration order doesn't matter. You can reference up or down the file.
/* ------------------------ */

/* INPUT
/* ------------------------ */
.propertyLookup {
  flex-basis: #{'@width'};
  margin-top: 10px;
  margin-bottom: #{'@margin-top'};
  width: 60%;
}

/* OUTPUT
/* ------------------------ */
.propertyLookup {
  flex-basis: 60%;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 60%;
}

/* ======================== */
/* Will Change - https://github.com/postcss/postcss-will-change
/* ======================== */
/* Plugin to insert 3D hack before will-change property.
/* ------------------------ */

/* INPUT
/* ------------------------ */
.willChange {
  will-change: transform;
}

/* OUTPUT
/* ------------------------ */
.willChange {
  backface-visibility: hidden;
  will-change: transform;
}
