import { r as registerInstance, h, f as Host } from './index-3a5d8cd6.js';

const skeletonCss = ".skeleton{min-width:8px;min-height:8px;background-color:var(--color-content-default, #454545);opacity:0.16;overflow:hidden}.skeleton_shape--circle{border-radius:50%}.skeleton_shape--square{border-radius:8px}.animation{position:absolute;width:100%;height:100%;background:-webkit-gradient(linear, left top, right top, from(rgba(246, 246, 246, 0)), color-stop(50%, rgba(246, 246, 246, 0.56)), to(rgba(246, 246, 246, 0)));background:linear-gradient(90deg, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 0.56) 50%, rgba(246, 246, 246, 0) 100%);mix-blend-mode:overlay;-webkit-animation:2.5s ease-out infinite shine;animation:2.5s ease-out infinite shine}@-webkit-keyframes shine{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}20%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes shine{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}20%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}";

const Skeleton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.shape = 'square';
    this.height = '50px';
    this.width = '100%';
    this.dataTest = null;
  }
  render() {
    return (h(Host, { style: {
        display: 'flex',
        position: 'relative',
        overflow: 'hidden',
        width: this.width,
        height: this.height,
        borderRadius: this.shape === 'circle' ? '50%' : '8px',
      } }, h("bds-grid", { xxs: "12", class: { skeleton: true, [`skeleton_shape--${this.shape}`]: true } }), h("div", { style: {
        display: 'flex',
        width: '100%',
        height: '100%',
        position: 'absolute',
        borderRadius: this.shape === 'circle' ? '50%' : '8px',
        overflow: 'hidden',
      }, "data-test": this.dataTest }, h("div", { class: "animation" }))));
  }
};
Skeleton.style = skeletonCss;

export { Skeleton as bds_skeleton };
