import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

// widget body used by all syncmeta widgets
@customElement("loading-spinner")
export class Spinner extends LitElement {
  render() {
    return html`
      <style>
        @keyframes ldio-y0l1rz5jzvl {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        #loading_overlay {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.5448185483870968);
        }
        .ldio-y0l1rz5jzvl div {
          left: 50%;
          top: 50%;
          position: absolute;
          animation: ldio-y0l1rz5jzvl linear 1s infinite;
          background: #00549f;
          width: 14px;
          height: 14px;
          margin-left: -7px;
          margin-top: -7px;
          border-radius: 7px / 7px;
          transform-origin: 7px 47px;
        }
        .ldio-y0l1rz5jzvl div:nth-child(1) {
          transform: rotate(0deg);
          animation-delay: -0.9166666666666666s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(2) {
          transform: rotate(30deg);
          animation-delay: -0.8333333333333334s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(3) {
          transform: rotate(60deg);
          animation-delay: -0.75s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(4) {
          transform: rotate(90deg);
          animation-delay: -0.6666666666666666s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(5) {
          transform: rotate(120deg);
          animation-delay: -0.5833333333333334s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(6) {
          transform: rotate(150deg);
          animation-delay: -0.5s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(7) {
          transform: rotate(180deg);
          animation-delay: -0.4166666666666667s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(8) {
          transform: rotate(210deg);
          animation-delay: -0.3333333333333333s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(9) {
          transform: rotate(240deg);
          animation-delay: -0.25s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(10) {
          transform: rotate(270deg);
          animation-delay: -0.16666666666666666s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(11) {
          transform: rotate(300deg);
          animation-delay: -0.08333333333333333s;
          background: #00549f;
        }
        .ldio-y0l1rz5jzvl div:nth-child(12) {
          transform: rotate(330deg);
          animation-delay: 0s;
          background: #00549f;
        }
        .loadingio-spinner-spinner-bl6ykl6ungk {
          width: 100%;
          height: 100%;
          display: inline-block;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.5448185483870968);
        }
        .ldio-y0l1rz5jzvl {
          width: 100%;
          height: 100%;
          position: relative;
          transform: translateZ(0) scale(1);
          backface-visibility: hidden;
          transform-origin: 0 0; /* see note above */
        }
        .ldio-y0l1rz5jzvl div {
          box-sizing: content-box;
        }
        /* generated by https://loading.io/ */
      </style>

      <div id="loading_overlay">
        <div class="loadingio-spinner-spinner-bl6ykl6ungk">
          <div class="ldio-y0l1rz5jzvl">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    `;
  }
}