import { r as registerInstance, h, a as Host, g as getElement } from './index-3408babe.js';
import { c as classnames } from './index-713f92a5.js';
import { s as statusNote } from './status-note-d227f142.js';

const calloutCss = ":host{--inner-width-small:var(--telekom-spacing-unit-x20);--inner-height-small:var(--telekom-spacing-unit-x20);--inner-width-large:126.5px;--inner-height-large:96px;--width-small:120px;--height-small:120px;--height-large:160px;--width-large:160px;--color-blue:var(--telekom-color-functional-informational-standard);--color-white:var(--telekom-color-background-surface);--color-black:var(--telekom-color-text-and-icon-functional-black);--color-primary:var(--telekom-color-primary-standard);--font-family:var(--telekom-typography-font-family-sans);--font-size:calc(var(--telekom-typography-font-size-callout) * 3);--font-size-prefix:var(--telekom-typography-font-size-callout)}.callout{display:flex;justify-content:center;align-items:center;border-radius:100%;background:var(--color-primary);font-family:var(--font-family);color:var(--color-white);text-align:center}.callout.callout--color-primary{background:var(--color-primary)}.callout.callout--color-white{background:var(--color-white);color:var(--color-black)}.callout.callout--color-blue{background:var(--color-blue);color:var(--telekom-color-text-and-icon-white-standard)}.callout.callout--color-black{background:var(--telekom-color-ui-extra-strong);color:var(--telekom-color-text-and-icon-inverted-standard)}.callout.callout--size-large{width:var(--width-large);height:var(--height-large)}.callout.callout--size-small{width:var(--width-small);height:var(--height-small)}.callout.callout--size-large .callout__inner{width:var(--inner-width-large);height:var(--inner-height-large)}.callout.callout--size-small .callout__inner{width:var(--inner-width-small);height:var(--inner-height-small)}.callout__inner{transform:rotateZ(var(--rotation));overflow:hidden}.callout__prefix{font-size:var(--font-size-prefix);font-weight:400}.callout__text{font-size:var(--font-size);font-weight:700}.callout__sup{font-size:30px;cursor:help}.callout.callout--size-large.callout--asterisk .callout__prefix{margin-bottom:10px}.callout.callout--size-small .callout__prefix{margin-bottom:10px}";

const Callout = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** (optional) Variant size of the callout itself */
    this.size = 'large';
    /** (optional) Variant rotation of the callout/circle */
    this.rotation = 0;
  }
  connectedCallback() {
    statusNote({ source: this.hostElement, tag: 'beta' });
  }
  displayStyle() {
    return `:host {
      --rotation: ${this.rotation}deg;
    }`;
  }
  render() {
    return (h(Host, null, h("style", null, this.displayStyle()), h("div", { part: this.getBasePartMap(), class: this.getCssClassMap() }, h("div", { part: "inner", class: "callout__inner" }, h("div", { class: "callout__prefix" }, h("slot", { name: "prefix" })), h("div", { class: "callout__text" }, h("span", null, h("slot", null)), this.asterisk && (h("sup", { title: this.asterisk, class: "callout__sup" }, "*")))))));
  }
  getBasePartMap() {
    return this.getCssOrBasePartMap('basePart');
  }
  getCssClassMap() {
    return this.getCssOrBasePartMap('css');
  }
  getCssOrBasePartMap(mode) {
    const name = 'callout';
    const prefix = mode === 'basePart' ? '' : `${name}--`;
    return classnames(name, this.variant && `${prefix}color-${this.variant}`, this.size && `${prefix}size-${this.size}`, this.asterisk && `${prefix}asterisk`);
  }
  get hostElement() { return getElement(this); }
};
Callout.style = calloutCss;

export { Callout as scale_callout };
