/*
CSS Image Loader - a pure CSS image loader without JS or extra HTML element

Created by github.com/MarketingPipeline

Version: 1.0.2
WARNING: The fallback error image will not show on webkit devices & you should provide a fallback for these devices using a onerror etc.

*/
img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: hsl(220, 20%, 90%);
  /* Make background pulse so it looks kinda load-y */
  animation: loading 0.8s infinite alternate;

  /* Loading Image (can used a normal url / SVG if prefered) */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 4rem;
}

@keyframes loading {
  to {
    background-color: hsl(220, 10%, 75%);
  }
}

/*
Pseudoelements will only show if the image fails to load
This means we can use them to show a nice image overlay

WARNING: ::after is not supported for webkit devices. You should provide the fall back image source using onerror etc.

*/
img::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: hsl(220, 20%, 90%);
  /* Error Image (can used a normal url or SVG if prefered) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='545.79' height='545.79' viewBox='0 0 144.407 144.407'%3E%3Cg transform='matrix(6.56831 0 0 6.56831 -603.38518 -966.29009)'%3E%3Cpath d='M98.902 149.99l2.093 2.093h8.487c.823 0 1.292.206 1.584.498s.496.759.496 1.582v8.486l1.834 1.834c.175-.512.259-1.076.259-1.666v-8.654c0-1.203-.346-2.298-1.111-3.063s-1.86-1.111-3.063-1.111zm-2.784.043c-.919.114-1.741.457-2.352 1.068-.765.765-1.109 1.86-1.109 3.063v8.654c0 1.203.345 2.297 1.109 3.062s1.862 1.109 3.064 1.109h12.652c1.049 0 2.017-.263 2.754-.838l-1.505-1.505c-.288.155-.686.251-1.249.251H96.83c-.823 0-1.292-.206-1.584-.498s-.498-.759-.498-1.582v-8.654c0-.823.205-1.29.498-1.582s.761-.498 1.584-.498h1.337z'/%3E%3Ccircle cx='108.403' cy='155.353' r='1.25'/%3E%3Cpath d='M93.277 147.113l-1.414 1.414 10.671 10.591-1.659 2.261-.237-.276-1.536-1.79-1.536 1.79-1.536 1.79h3.073.474 2.599 1.665 2.39l6.205 6.206 1.414-1.414-20.57-20.572z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Change Image Loader Colors For Prefer Dark Users */

@media (prefers-color-scheme: dark) {
  img {
    animation: none;
    background-color: black;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='white'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
  }

  img:after {
    background-color: black;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='545.79' height='545.79' fill='white' viewBox='0 0 144.407 144.407'><g transform='matrix(6.56831 0 0 6.56831 -603.38518 -966.29009)'><path d='M98.902 149.99l2.093 2.093h8.487c.823 0 1.292.206 1.584.498s.496.759.496 1.582v8.486l1.834 1.834c.175-.512.259-1.076.259-1.666v-8.654c0-1.203-.346-2.298-1.111-3.063s-1.86-1.111-3.063-1.111zm-2.784.043c-.919.114-1.741.457-2.352 1.068-.765.765-1.109 1.86-1.109 3.063v8.654c0 1.203.345 2.297 1.109 3.062s1.862 1.109 3.064 1.109h12.652c1.049 0 2.017-.263 2.754-.838l-1.505-1.505c-.288.155-.686.251-1.249.251H96.83c-.823 0-1.292-.206-1.584-.498s-.498-.759-.498-1.582v-8.654c0-.823.205-1.29.498-1.582s.761-.498 1.584-.498h1.337z'/><circle cx='108.403' cy='155.353' r='1.25'/><path d='M93.277 147.113l-1.414 1.414 10.671 10.591-1.659 2.261-.237-.276-1.536-1.79-1.536 1.79-1.536 1.79h3.073.474 2.599 1.665 2.39l6.205 6.206 1.414-1.414-20.57-20.572z'/></g></svg>");
  }
}