import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
import { a as LayoutColumnsElement, L as LayoutColumnsGap, b as LayoutColumnsVariation } from './p-07303cb5.js';

const layoutColumnsCss = ".sc-digi-layout-columns-h{--digi--layout-columns--gap--column:var(--digi--gutter--largest);--digi--layout-columns--gap--row:var(--digi--gutter--largest);--digi--layout-columns--min-width:0;--digi--layout-columns--gap--column--32:var(--digi--global--spacing--largest-4)}.sc-digi-layout-columns-h .digi-layout-columns.sc-digi-layout-columns{display:grid;grid-column-gap:var(--digi--layout-columns--gap--column);grid-row-gap:var(--digi--layout-columns--gap--row);grid-template-columns:repeat(auto-fit, minmax(var(--digi--layout-columns--min-width), 1fr))}.sc-digi-layout-columns-h .digi-layout-columns--column-gap-32.sc-digi-layout-columns{--digi--layout-columns--gap--column:var(--digi--layout-columns--gap--column--32)}.sc-digi-layout-columns-h .digi-layout-columns--one.sc-digi-layout-columns{--digi--layout-columns--min-width:100%}.sc-digi-layout-columns-h .digi-layout-columns--two.sc-digi-layout-columns{--digi--layout-columns--min-width:calc(50% - var(--digi--layout-columns--gap--column))}.sc-digi-layout-columns-h .digi-layout-columns--three.sc-digi-layout-columns{--digi--layout-columns--min-width:calc(33% - var(--digi--layout-columns--gap--column))}.sc-digi-layout-columns-h .digi-layout-columns--four.sc-digi-layout-columns{--digi--layout-columns--min-width:calc(25% - var(--digi--layout-columns--gap--column))}";
const DigiLayoutColumnsStyle0 = layoutColumnsCss;

const LayoutColumns = /*@__PURE__*/ proxyCustomElement(class LayoutColumns extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afElement = LayoutColumnsElement.DIV;
        this.afVariation = undefined;
        this.afColumnGap = LayoutColumnsGap.DEFAULT;
    }
    get cssModifiers() {
        return {
            'digi-layout-columns--one': this.afVariation === LayoutColumnsVariation.ONE,
            'digi-layout-columns--two': this.afVariation === LayoutColumnsVariation.TWO,
            'digi-layout-columns--three': this.afVariation === LayoutColumnsVariation.THREE,
            'digi-layout-columns--four': this.afVariation === LayoutColumnsVariation.FOUR,
            'digi-layout-columns--column-gap-32': this.afColumnGap === LayoutColumnsGap.GAP_32
        };
    }
    render() {
        return (h(this.afElement, { key: '6dc9ed51631d90ea92f5e405d49edca25c5d800d', class: Object.assign({ 'digi-layout-columns': true }, this.cssModifiers) }, h("slot", { key: 'ffe0da97c5d4bd5d656da66441cc16367d810b0a' })));
    }
    static get style() { return DigiLayoutColumnsStyle0; }
}, [6, "digi-layout-columns", {
        "afElement": [1, "af-element"],
        "afVariation": [1, "af-variation"],
        "afColumnGap": [1, "af-column-gap"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-layout-columns"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-layout-columns":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LayoutColumns);
            }
            break;
    } });
}

export { LayoutColumns as L, defineCustomElement as d };
