import { r as o, h as s, H as r } from "./index.61732cef.js";
import { c as t } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const i = () => ':host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(       90deg,       rgba(255, 255, 255, 0) 0,       rgba(255, 255, 255, 0) 12%,       var(--s-surface-raised-default) 50%,       rgba(255, 255, 255, 0) 88%,       rgba(255, 255, 255, 0) 100%     );content:"";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}', a = class {
  constructor(e) {
    o(this, e), this.animated = !0, this.borderRadius = "base";
  }
  render() {
    const e = t("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
    return s(r, { key: "99e18a4db6a3cd3e8eef7bac349c13e7cd09c9eb", style: {
      width: !Boolean(this.width) && !Boolean(this.aspectRatio) ? "100%" : void 0
    } }, s("div", { key: "2ebbb517dc06961590a975e71f832acb9137f2c3", class: e, style: {
      aspectRatio: this.aspectRatio,
      borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none" ? `var(--s-border-radius-${this.borderRadius})` : void 0,
      height: this.height,
      width: this.width
    } }));
  }
};
a.style = i();
export {
  a as swirl_skeleton_box
};
