// # Images

img {
  display: block;
  max-width: 100%;
}

figure > img {
  display: block;
}

a img {
  border: 0;
}

// ## Non Fluid
// Non-fluid images if you specify `width` and/or `height` attributes.

//[c]
//     <img src="image.png" width="20" height="20">
//[/c]

img[width],
img[height] {
  max-width: none;
}

// ## Rounded images
// Extend or add class to html.

// <div class="example html">
//     <img src="http://fillmurray.com/100/100" class="img--round">
// </div>

%img--round,
.img--round {
  border-radius: map-fetch($border-radius, base);
}

// ## Circle images
// Extend or add class to html.

// <div class="example html">
//     <img src="http://fillmurray.com/100/100" class="img--circle">
// </div>

%img--circle,
.img--circle {
  border-radius: 100%;
}

// ## Border images
// Extend or add class to html.

// <div class="example html">
//     <img src="http://fillmurray.com/100/100" class="img--border">
// </div>

%img--border,
.img--border {
  border: 1px solid map-fetch($color, ui base);
}

// ## Image placement
// Floats images, don't use on Flexbox children.

//[c]
//     <img src="image.png" class="img--right">
//[/c]

%img--right,
.img--right {
  float: right;
  margin-bottom: spacer(1);
  margin-left: spacer(1);
}

%img--left,
.img--left {
  float: left;
  margin-right: spacer(1);
  margin-bottom: spacer(1);
}

%img--center,
.img--center {
  display: block;
  margin-right: auto;
  margin-bottom: spacer(1);
  margin-left: auto;
}