import{LitElement as t,html as o,css as e}from"lit";import{i18n as i}from"./translation.js";class r extends t{static get properties(){return{fill:{type:Boolean,reflect:!0},position:{type:String,reflect:!0}}}constructor(){super(),this.fill=!1,this.position="top-left"}render(){return o`
      <slot></slot>
      <div class="beta">${i("cc-beta.label")}</div>
    `}static get styles(){return[e`
        :host {
          display: grid;
          overflow: hidden;
          position: relative;
        }

        :host([fill]) ::slotted(*) {
          box-sizing: border-box;
          height: 100%;
          width: 100%;
        }

        .beta {
          --height: 1.75em;
          --width: 8em;

          background: var(--cc-color-bg-strong, #000);
          color: var(--cc-color-text-inverted, #fff);
          font-size: 0.85em;
          font-weight: bold;
          height: var(--height);
          line-height: var(--height);
          position: absolute;
          text-align: center;
          transform: rotate(var(--r)) translateY(var(--translate));
          width: var(--width);
          z-index: 2;
        }

        :host([position^='top-']) .beta {
          --translate: 1.85em;

          top: calc(var(--height) / -2);
        }

        :host([position^='bottom-']) .beta {
          --translate: -1.85em;

          bottom: calc(var(--height) / -2);
        }

        :host([position$='-left']) .beta {
          left: calc(var(--width) / -2);
        }

        :host([position$='-right']) .beta {
          right: calc(var(--width) / -2);
        }

        :host([position='top-left']) .beta,
        :host([position='bottom-right']) .beta {
          --r: -45deg;
        }

        :host([position='bottom-left']) .beta,
        :host([position='top-right']) .beta {
          --r: 45deg;
        }
      `]}}window.customElements.define("cc-beta",r);export{r as CcBeta};
//# sourceMappingURL=cc-beta.js.map
