import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
import { L as LayoutContainerVariation, a as LayoutContainerMaxWidth } from './p-5f8dc01a.js';

const layoutContainerCss = ".sc-digi-layout-container-h{--digi--layout-container--width:var(--digi--container-width--smaller);--digi--layout-container--gutter:var(--digi--container-gutter--base);--digi--layout-container--vertical-padding:0;--digi--layout-container--margin-top:0;--digi--layout-container--margin-bottom:0}.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{box-sizing:border-box;width:100%;max-width:var(--digi--layout-container--width);padding:var(--digi--layout-container--vertical-padding) var(--digi--layout-container--gutter);margin-left:auto;margin-right:auto;margin-top:var(--digi--layout-container--margin-top);margin-bottom:var(--digi--layout-container--margin-bottom);box-sizing:border-box}@media (min-width: 47.9375rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--small);--digi--layout-container--gutter:var(--digi--container-gutter--small)}}@media (min-width: 48rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--medium);--digi--layout-container--gutter:var(--digi--container-gutter--medium)}}@media (min-width: 61.9375rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--large);--digi--layout-container--gutter:var(--digi--container-gutter--large)}}@media (min-width: 75rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--larger);--digi--layout-container--gutter:var(--digi--container-gutter--larger)}}@media (min-width: 87.5rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--largest);--digi--layout-container--gutter:var(--digi--container-gutter--largest)}.sc-digi-layout-container-h .digi-layout-container--max-width-1200.sc-digi-layout-container{--digi--layout-container--width:var(--digi--global--size--larger)}}.sc-digi-layout-container-h .digi-layout-container--fluid.sc-digi-layout-container{--digi--layout-container--width:none !important}.sc-digi-layout-container-h .digi-layout-container--no-gutter.sc-digi-layout-container{--digi--layout-container--gutter:0}.sc-digi-layout-container-h .digi-layout-container--vertical-padding.sc-digi-layout-container{--digi--layout-container--vertical-padding:var(--digi--padding--large)}.sc-digi-layout-container-h .digi-layout-container--margin-top.sc-digi-layout-container{--digi--layout-container--margin-top:var(--digi--margin--large)}.sc-digi-layout-container-h .digi-layout-container--margin-bottom.sc-digi-layout-container{--digi--layout-container--margin-bottom:var(--digi--margin--large)}";
const DigiLayoutContainerStyle0 = layoutContainerCss;

const LayoutContainer = /*@__PURE__*/ proxyCustomElement(class LayoutContainer extends H {
    constructor() {
        super();
        this.__registerHost();
        this._variation = LayoutContainerVariation.STATIC;
        this.afVariation = LayoutContainerVariation.STATIC;
        this.afMaxWidth = LayoutContainerMaxWidth.WIDTH_1400;
        this.afNoGutter = undefined;
        this.afVerticalPadding = undefined;
        this.afMarginTop = undefined;
        this.afMarginBottom = undefined;
    }
    variationChangeHandler() {
        this._variation = this.afVariation;
    }
    componentWillLoad() {
        this.variationChangeHandler();
    }
    get cssModifiers() {
        if (this._variation === LayoutContainerVariation.NONE) {
            return {};
        }
        return {
            'digi-layout-container': true,
            'digi-layout-container--static': this._variation === LayoutContainerVariation.STATIC,
            'digi-layout-container--fluid': this._variation === LayoutContainerVariation.FLUID,
            'digi-layout-container--max-width-1200': this.afMaxWidth === LayoutContainerMaxWidth.WIDTH_1200,
            'digi-layout-container--no-gutter': this.afNoGutter,
            'digi-layout-container--vertical-padding': this.afVerticalPadding,
            'digi-layout-container--margin-top': this.afMarginTop,
            'digi-layout-container--margin-bottom': this.afMarginBottom
        };
    }
    render() {
        return (h("div", { key: '5ff028ab3d09d71a5c5de4a4e88d50b3f17f367f', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: '56ee75891bfd6f55909841bc4acdf57b867dc235' })));
    }
    static get watchers() { return {
        "afVariation": ["variationChangeHandler"]
    }; }
    static get style() { return DigiLayoutContainerStyle0; }
}, [6, "digi-layout-container", {
        "afVariation": [1, "af-variation"],
        "afMaxWidth": [1, "af-max-width"],
        "afNoGutter": [4, "af-no-gutter"],
        "afVerticalPadding": [4, "af-vertical-padding"],
        "afMarginTop": [4, "af-margin-top"],
        "afMarginBottom": [4, "af-margin-bottom"],
        "_variation": [32]
    }, undefined, {
        "afVariation": ["variationChangeHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-layout-container"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-layout-container":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LayoutContainer);
            }
            break;
    } });
}

export { LayoutContainer as L, defineCustomElement as d };
