<template>
  <yt-img-shadow class="no-transition" :height="height" :width="width" style="background-color: transparent;" loaded>
    <img id="img" class="style-scope yt-img-shadow" alt="" :height="height" :width="width" :src="imgUrl">
  </yt-img-shadow>
</template>

<script>
export default {
  name: 'ImgShadow',
  props: {
    imgUrl: String,
    height: String,
    width: String
  }
}
</script>

<!-- yt-img-shadow -->
<style>
canvas.yt-img-shadow, caption.yt-img-shadow, center.yt-img-shadow, cite.yt-img-shadow, code.yt-img-shadow, dd.yt-img-shadow, del.yt-img-shadow, dfn.yt-img-shadow, div.yt-img-shadow, dl.yt-img-shadow, dt.yt-img-shadow, em.yt-img-shadow, embed.yt-img-shadow, fieldset.yt-img-shadow, font.yt-img-shadow, form.yt-img-shadow, h1.yt-img-shadow, h2.yt-img-shadow, h3.yt-img-shadow, h4.yt-img-shadow, h5.yt-img-shadow, h6.yt-img-shadow, hr.yt-img-shadow, i.yt-img-shadow, iframe.yt-img-shadow, img.yt-img-shadow, ins.yt-img-shadow, kbd.yt-img-shadow, label.yt-img-shadow, legend.yt-img-shadow, li.yt-img-shadow, menu.yt-img-shadow, object.yt-img-shadow, ol.yt-img-shadow, p.yt-img-shadow, pre.yt-img-shadow, q.yt-img-shadow, s.yt-img-shadow, samp.yt-img-shadow, small.yt-img-shadow, span.yt-img-shadow, strike.yt-img-shadow, strong.yt-img-shadow, sub.yt-img-shadow, sup.yt-img-shadow, table.yt-img-shadow, tbody.yt-img-shadow, td.yt-img-shadow, tfoot.yt-img-shadow, th.yt-img-shadow, thead.yt-img-shadow, tr.yt-img-shadow, tt.yt-img-shadow, u.yt-img-shadow, ul.yt-img-shadow, var.yt-img-shadow {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.yt-img-shadow[hidden] {
  display: none !important;
}

yt-img-shadow {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.2s;
  -ms-flex: none;
  -webkit-flex: none;
  flex: none;
}

yt-img-shadow.no-transition {
  opacity: 1;
  transition: none;
}

yt-img-shadow.with-placeholder {
  background-color: transparent;
  min-height: unset;
  min-width: unset;
}

yt-img-shadow[loaded] {
  opacity: 1;
}

yt-img-shadow.empty img.yt-img-shadow {
  visibility: hidden;
}

yt-img-shadow[object-fit="FILL"] img.yt-img-shadow, yt-img-shadow[fit] img.yt-img-shadow {
  width: 100%;
  height: 100%;
}

yt-img-shadow[object-fit="COVER"] img.yt-img-shadow {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

yt-img-shadow[object-fit="CONTAIN"] img.yt-img-shadow {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

yt-img-shadow[object-position="LEFT"] img.yt-img-shadow {
  object-position: left;
}

img.yt-img-shadow {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: none;
  max-width: 100%;
  border-radius: none;
}
</style>
