import { r as registerInstance, h, H as Host } from './index-6191c26c.js';
import { c as cls } from './helpers-7608753a.js';

const styleCss = "x-media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin:0;padding:0;text-align:inherit}x-media>img{margin:0 1.5rem 0 0;max-width:100%;height:auto;background-color:rgba(0, 0, 0, 0.1);-webkit-box-shadow:0px 3px 1rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 3px 1rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);-webkit-animation:loadingBG 0.5s infinite alternate;animation:loadingBG 0.5s infinite alternate}.is-dark-mode x-media>img{background-color:rgba(255, 255, 255, 0.1)}x-media>div.media-body{-ms-flex:1;flex:1}x-media.media-rounded>img{border-radius:0.45em}x-media.media-right>img{margin:0 0 0 1.5rem;-ms-flex-order:999;order:999}";
const XMediaStyle0 = styleCss;

const XMedia = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.src = undefined;
        this.width = undefined;
        this.height = undefined;
        this.description = undefined;
        this.align = undefined;
        this.rounded = false;
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '1490acef371c7d8e834f4a4b6785591c1d25435a', class: cls({ 'media-rounded': this.rounded, 'media-right': this.align === 'right' }) }, this.src && h("img", { key: 'd9cc2e95a1c81f7c9df962ed58099912ef550515', style: {
                width: this.width,
                height: this.height
            }, src: this.src, alt: this.description, "aria-label": this.description }), h("div", { key: 'cd0f766c8e7a8b001c7610f58d7e921f6ef77893', class: "media-body" }, h("slot", { key: '1e1de5fb2502c3ebdd0fa9ba164158732b44fbb8' })));
    }
};
XMedia.style = XMediaStyle0;

export { XMedia as x_media };
