/* 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;

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

    &.img-align-left,
    &[align='left'],
    &[alt~='align-left'] {
      @extend %img-align-left;
    }
    &.img-align-center,
    &[align='middle'], // hack to fix Firefox; see: https://stackoverflow.com/a/45901819/1341949
    &[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, 0.2);
    }
  }

  figure {
    margin: 15px auto;

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

  > .img,
  > img,
  figure > img {
    display: block;
    @extend %img-align-center;
  }

  figure .img {
    display: block;
  }

  .lightbox-close {
    background: none;
    border: 0;
    color: var(--color-text-default);
    cursor: pointer;
    display: inline-block;
    font-size: inherit;
    opacity: 0.5;
    padding: 0;
    position: fixed;
    right: 1em;
    text-rendering: auto;
    top: 1em;
    transform: scale(1.5);
    transition: 0.3s 0.3s ease-in;
    z-index: 10000000;
  }

  .lightbox.open {
    align-items: center;
    background: rgba(var(--color-bg-page-rgb), 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;

    .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, 0.2);
      }

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