import*as LitHtml from"../third_party/lit-html/lit-html.js";import{get2DTranslationsForAngle}from"./CSSAngleUtils.js";const{render:render,html:html}=LitHtml,styleMap=LitHtml.Directives.styleMap,swatchWidth=11;export class CSSAngleSwatch extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.angle={value:0,unit:"rad"}}set data(t){this.angle=t.angle,this.render()}render(){const{translateX:t,translateY:e}=get2DTranslationsForAngle(this.angle,2.75),s={transform:`translate(${t}px, ${e}px) rotate(${this.angle.value}${this.angle.unit})`};render(html`
      <style>
        .swatch {
          position: relative;
          display: inline-block;
          margin-bottom: -2px;
          width: 1em;
          height: 1em;
          border: 1px solid var(--selection-inactive-fg-color);
          border-radius: 1em;
          overflow: hidden;
          cursor: pointer;
          background-color: var(--toolbar-bg-color);
        }

        .mini-hand {
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          height: 55%;
          width: 2px;
          background-color: var(--accent-fg-color);
          border-radius: 5px;
        }
      </style>

      <div class="swatch">
        <span class="mini-hand" style=${styleMap(s)}></span>
      </div>
    `,this.shadow,{eventContext:this})}}customElements.get("devtools-css-angle-swatch")||customElements.define("devtools-css-angle-swatch",CSSAngleSwatch);