figure
  position: relative

figcaption
  text-align: center
  line-height: $base-line-height
  font-size: $base-font-size

figure[data-type=table]
  clear: both
figure[data-type=video]
  position: relative
  margin-bottom: $base-line-height
  text-align: center
  clear: both
  p
    margin: 0

  &.wy-figure-full
    &:before
      position: relative
      padding-bottom: 51%
      width: 100%
      height: 0
      content: ""
      display: block
    iframe
      width: 100%
      height: 100%
      position: absolute
      left: 0
      top: 0

figure[data-type=image]
  position: relative
  margin-bottom: $base-line-height
  .wy-figure-controls
    top: 0px
  img
    width: 100%
  &.wy-figure-large
    width: 100%
    clear: both
  &.wy-figure-medium
    width: 50%
  &.wy-figure-small
    width: 33%

figure[data-type=quote]
  font-family: $custom-font-family
  margin-bottom: $base-line-height
  margin-left: $base-line-height
  font-style: italic
  position: relative
  border-left: solid 5px $text-color
  padding-left: $base-line-height
  figcaption
    font-weight: bold
    text-align: left
  .wy-figure-controls
    margin-left: -5px
  &.wy-figure-medium
    font-size: 20px
  &.wy-figure-large
    font-size: 24px
  &.wy-figure-right
    width: 33%
  &.wy-figure-left
    width: 33%
    border-left: none
    border-right: solid 5px $text-color
    padding-left: 0
    padding-right: $base-line-height
    margin-left: 0
    margin-right: $base-line-height
    .wy-figure-controls
      margin-left: 0
      margin-right: -5px
  cite
    display: block
    text-align: left
    font-weight: bold
    &:before
      content: "\2014\00a0"
    &:empty:before
      opacity: 0.4
      content: "\2014 Type to add citation (optional)"

figure:hover .wy-figure-controls
  display: block

.wy-figure-controls
  background: $gray
  padding: $base-line-height / 4
  position: absolute
  display: none
  min-width: 100%
  white-space: nowrap
  left: 0
  top: -37px
  margin: auto
  font-family: $base-font-family
  border-bottom: solid 3px darken($gray, 10%)
  line-height: $base-line-height
  font-style: normal
  z-index: 5
  text-align: center
.wy-figure-controls span
  display: inline-block
  border: none
  background: none
  color: $text-invert
  vertical-align: top
  font-size: 14px
  width: 24px
  height: 24px
  line-height: 24px
  text-align: center
  cursor: pointer
  &.#{$icon-prefix}, &:before
    line-height: 24px
  &:hover
    background: rgba(255,255,255,.3)
    color: $white
  &.on
    background: $white
    color: $gray

.wy-figure-controls span
  &.wy-figure-controls-divider
    width: 1px
    background: lighten($gray, 10%)
    padding: 0
    margin: 0 2px
    cursor: normal
  &.wy-figure-controls-small
    font-size: 50%
  &.wy-figure-controls-medium
    font-size: 75%
  &.wy-figure-controls-arrow-left
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-left}
  &.wy-figure-controls-arrow-right
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-right}
  &.wy-figure-controls-arrow-up
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-up}
  &.wy-figure-controls-arrow-down
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-arrow-down}
  &.wy-figure-controls-resize-full
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-expand}
  &.wy-figure-controls-resize-small
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-compress}
  &.wy-figure-controls-delete
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-trash}
    margin-left: $base-line-height
    &:hover
      background: $red
  &.wy-figure-controls-table
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-table}
    width: auto
    padding-left: $base-line-height / 4
    text-align: left

.wy-figure-right
  float: right
  margin-left: $base-line-height
  .wy-figure-controls
    right: 0

.wy-figure-left
  float: left
  margin-right: $base-line-height

// On mobile, images should be full width
+media($mobile)
  figure[data-type=image]
    width: 100% !important
    float: none !important
    margin-left: 0
    margin-right: 0
  figure[data-type=video] iframe
    width: 100% !important
    height: auto !important
