import { r as registerInstance, h } from './index-148a7577.js';
import { M as MediaFigureAlignment } from './media-figure-alignment.enum-a1d36567.js';

const mediaFigureCss = ".sc-digi-media-figure-h .digi-media-figure__figcaption.sc-digi-media-figure{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--mobile);color:var(--digi--color--text--neutral);margin-top:var(--digi--gutter--smaller)}.digi-media-figure--align-start.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:start}.digi-media-figure--align-center.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:center}.digi-media-figure--align-end.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:end}";
const DigiMediaFigureStyle0 = mediaFigureCss;

const MediaFigure = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.afFigcaption = undefined;
        this.afAlignment = MediaFigureAlignment.START;
    }
    get cssModifiers() {
        return {
            'digi-media-figure--align-start': this.afAlignment === 'start',
            'digi-media-figure--align-center': this.afAlignment === 'center',
            'digi-media-figure--align-end': this.afAlignment === 'end'
        };
    }
    render() {
        return (h("figure", { key: 'bf78c6b502bb19c42ab7d0a43156b64123cfa621', class: Object.assign({ 'digi-media-figure': true }, this.cssModifiers) }, h("div", { key: '5a885741daa877fd551c8cca7232e5e3e48bb358', class: "digi-media-figure__image" }, h("slot", { key: 'd33842527ecacf6305cc310a832ac83a8e766f99' })), this.afFigcaption && (h("figcaption", { key: '6c996e27377c768d1671c63bb2cd08123e25526c', class: "digi-media-figure__figcaption" }, this.afFigcaption))));
    }
};
MediaFigure.style = DigiMediaFigureStyle0;

export { MediaFigure as digi_media_figure };
