/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable no-descending-specificity */
/* stylelint-disable font-family-no-missing-generic-family-keyword */
%img-align {
  &-right {
    float: right;
    margin-left: 0.75rem;
  }

  &-left {
    float: left;
    margin-right: 0.75rem;
  }

  &-center {
    display: block;
  }
}

.markdown-body {
  img {
    border-style: none;
    box-sizing: content-box;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    outline: none !important;
    vertical-align: middle;

    &[align='right'],
    &[alt~='align-right'] {
      @extend %img-align-right;
    }

    &[align='left'],
    &[alt~='align-left'] {
      @extend %img-align-left;
    }

    &[width='80%'],
    &[align='center'],
    &[alt~='align-center'] {
      @extend %img-align-center;
    }

    &[width='smart'] {
      max-height: 450px;
      max-width: 100%;
      width: auto;
    }

    &.border {
      border: 1px solid rgba(0, 0, 0, 20%);
    }
  }

  figure {
    margin: 15px auto;

    figcaption {
      font-size: 0.93em;
      font-style: italic;
      margin-top: 8px;
      text-align: center;
    }
  }

  > img,
  figure > img {
    @extend %img-align-center;
  }

  figure .img {
    display: block;
  }

  .lightbox.open {
    align-items: center;
    background: rgba(white, 0.966);
    display: flex;
    flex-flow: nowrap column;
    height: 100vh;
    justify-content: flex-start;
    left: 0;
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    user-select: none;
    width: 100vw;
    z-index: 9999999;

    // Close Button
    &::after {
      content: '\f00d';
      cursor: pointer;
      display: inline-block;
      font: normal normal normal 2em/1 FontAwesome;
      font-size: inherit;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      opacity: 1;
      position: fixed;
      right: 1em;
      text-rendering: auto;
      top: 1em;
      transform: translate(0, 0);
      transform: scale(1.5);
      transition: 0.3s 0.3s ease-in;
    }

    &:not(.open)::after {
      opacity: 0;
      transform: scale(0);
    }

    .lightbox-inner {
      align-items: center;
      box-sizing: content-box;
      display: inline-flex;
      justify-content: center;
      margin: auto;
      min-height: calc(100vh + 8px);
      padding: 0;
      position: relative;
    }

    img {
      height: auto !important;
      max-height: 97.5vh !important;
      max-width: 97.5vw !important;
      min-width: unset !important;
      width: auto !important;

      &.border,
      &:not([src$='.png']):not([src$='.svg']):not([src$='.jp2']):not([src$='.tiff']) {
        box-shadow: 0 0.5em 3em -1em rgba(0, 0, 0, 20%);
      }

      &[src$='svg'] {
        display: block !important;
        height: 66vw !important;
        max-width: 100% !important;
        min-width: 200px !important;
        width: 42vw !important;
      }
    }
  }
}