import { r as registerInstance, h } from './index-f1d2a96f.js';

const scBlockUiCss = ":host{display:block;position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;overflow:hidden;display:flex;align-items:center;justify-content:center}:host>*{z-index:1}:host:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;cursor:wait;background:var(--sc-color-white);opacity:var(--sc-block-ui-opacity, 0.15)}:host.transparent:after{background:transparent}";

const ScBlockUi = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.zIndex = 1;
  }
  render() {
    return (h("div", { class: { overlay: true, transparent: this.transparent }, style: { 'z-index': this.zIndex.toString() } }, h("slot", null, !this.transparent && this.spinner && h("sc-spinner", null))));
  }
};
ScBlockUi.style = scBlockUiCss;

const scSpinnerCss = ":host{--track-color:#0d131e20;--indicator-color:var(--sc-color-primary-500);--stroke-width:2px;--spinner-size:1em;display:inline-block}.spinner{display:inline-block;width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";

const ScSpinner = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
  }
};
ScSpinner.style = scSpinnerCss;

export { ScBlockUi as sc_block_ui, ScSpinner as sc_spinner };
