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: '1e0f32d194f45478ee10e7db3a3d61225dca5720', class: Object.assign({ 'digi-media-figure': true }, this.cssModifiers) }, h("div", { key: '66c0430815d692bead0f141bf403def13b3e0585', class: "digi-media-figure__image" }, h("slot", { key: '486e2b0a36c186f3574ba1ad78d86cf4df9c5310' })), this.afFigcaption && (h("figcaption", { key: '11b948928b9cd726a3f5d7d52be2124b99552719', class: "digi-media-figure__figcaption" }, this.afFigcaption))));
    }
};
MediaFigure.style = DigiMediaFigureStyle0;

export { MediaFigure as digi_media_figure };
