.wy-modal-screen
  position: fixed
  width: 100%
  height: 100%
  background: rgba(0,0,0,.5)
  top: 0
  left: 0
  z-index: $z-index-modal

.wy-modal-close
  @extend %icon
  @extend .#{$icon-prefix}-#{$icon-close}
  color: $text-color
  cursor: pointer
  position: absolute
  right: $base-line-height
  top: $base-line-height
  font-size: 0
  &:before
    font-size: 20px
  &:hover
    color: $red

.wy-modal
  position: fixed
  width: 50%
  top: 50%
  left: 50%
  margin-left: -25%
  margin-top: -25%
  background: $section-background-color
  z-index: $z-index-modal + 1
  border: solid 1px $table-border-color
  section
    padding: 0 $gutter $gutter $gutter
  header
    font-weight: 500
    padding: $base-line-height
    padding-top: $base-line-height / 2
    font-weight: bold
    font-family: $custom-font-family
    font-size: 150%
  footer
    background: $background-color
    padding: $gutter
    text-align: right
    .btn
      margin-left: 5px

.wy-body-mask
  position: fixed
  width: 100%
  height: 100%
  background: rgba(0,0,0,.8)
  display: none
  z-index: $z-index-modal - 1
  top: 0
  &.on
    display: block

+media($mobile)
  .wy-modal
    width: 100%
    margin: 0
    left: 0
    right: 0
    top: 0
