/*
 * Figure HTML element styling
 * --------------------------------------------------
 */

figure {
  margin-bottom: .px-rem(15px)[];
  .shade;
}

figure img {
  width: 100%;
  height: auto;
  .shade;
}

figcaption {
  color: @descriptive-text-color;
  padding: .px-rem(11px)[] .px-rem(20px)[];
  &:empty {
    display: none;
  }
  margin-bottom: 0;
  background: @panel-bg;
  clear: both;
}

figure.pull-left {
  padding-left: 0;
  padding-right: 0;
  margin-right: .px-rem(20px)[];
  clear: left;
}

figure.pull-right {
  padding-left: 0;
  padding-right: 0;
  margin-left: .px-rem(20px)[];
  clear: right;
}
