import{LitElement as t,html as e,css as r}from"../../../lit/index.js";class DateTitle extends t{static get tag(){return"date-title"}static get properties(){return{date:{type:String},title:{type:String}}}static get styles(){return r`
      .container {
        color: white;
        width: 300px;
        height: 300px;
        margin: 0 auto;
      }
      div.circTxt1,
      div.circTxt2 {
        color: white;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        transform-origin: 50% 50%;
      }
      div.circTxt1 p {
        color: white;
        font-size: 2em;
        margin: 0;
        color: white;
      }
      div.circTxt2 p {
        font-size: 0.8em;
        margin: 0;
        color: white;
      }
      @keyframes moveAround {
        0% {
          transform: rotate(-2deg);
        }
        25% {
          transform: rotate(2deg);
        }
        50% {
          transform: rotate(-2deg);
        }
        75% {
          transform: rotate(2deg);
        }
        100% {
          transform: rotate(-2deg);
        }
      }
    `}constructor(){super(),this.title="",this.date=""}render(){return e`<div class="container"></div>`}updated(){this.generateCircularText("circTxt1",this.title,90,-170,-100,"font-size: 20px; color: black;","transform: scaleY(-1) scaleX(-1); position:absolute"),this.generateCircularText("circTxt2",this.date,90,90,-40,"font-size: 20px; color: black;","")}generateCircularText(t,e,r,i,o,a,s){const n=e.split(""),c=this.shadowRoot.querySelector(".container"),l=c.clientHeight,d=globalThis.document.createElement("div");d.setAttribute("class",t);const p=i/n.length;n.forEach((t=>{t=`<p style="height:${r}px;${a};transform:rotate(${o}deg);left:50%;top:${l/2-r}px;position:absolute;transform-origin:0 100%">\n             <span style="${s}">${t}</span>\n           </p>`,d.innerHTML+=t,o+=p})),c.appendChild(d)}}customElements.define(DateTitle.tag,DateTitle);export{DateTitle};