import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as d } from "../chunks/component.styles.CRO4Odto.js";
import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
import { i as f, x as m } from "../chunks/lit-element.jLBm65_O.js";
import { e as v } from "../chunks/class-map.BiVq-cVR.js";
const h = f`:host{--border-radius:var(--cx-border-radius-pill);--color:var(--cx-color-neutral-200);--sheen-color:var(--cx-color-neutral-300);display:block;position:relative}.skeleton{width:100%;height:100%;min-height:1rem;display:flex}.skeleton__indicator{background:var(--color);border-radius:var(--border-radius);flex:auto}.skeleton--sheen .skeleton__indicator{background:linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));background-size:400% 100%;animation:8s ease-in-out infinite sheen}.skeleton--pulse .skeleton__indicator{animation:2s ease-in-out .5s infinite pulse}@media (forced-colors:active){:host{--color:GrayText}}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}`;
var k = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (a, o, s, r) => {
  for (var e = r > 1 ? void 0 : r ? _(o, s) : o, n = a.length - 1, i; n >= 0; n--)
    (i = a[n]) && (e = (r ? i(o, s, e) : i(e)) || e);
  return r && e && k(o, s, e), e;
};
let t = class extends p {
  constructor() {
    super(...arguments), this.effect = "none";
  }
  render() {
    return m`<div part="base" class=${v({
      skeleton: !0,
      "skeleton--pulse": this.effect === "pulse",
      "skeleton--sheen": this.effect === "sheen"
    })}><div part="indicator" class="skeleton__indicator"></div></div>`;
  }
};
t.styles = [d, h];
l([
  c()
], t.prototype, "effect", 2);
t = l([
  u("cx-skeleton")
], t);
export {
  t as default
};
