import { r as registerInstance } from './core-b78a8f7e.js';

const Container = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The elevation of the container using 0 - 4 values of the design system elevation specs.
         * Default is 2.
         */
        this.elevation = 2;
        /**
         * If true the container will display as flex instead of block
         */
        this.flex = false;
        /**
         * The padding of the container using the container padding specs 0 - 5.
         * Default is 1.
         */
        this.gutter = 1;
        /**
         * The border radius using the container radius specs from 0 - 2.
         * Default is 0.
         */
        this.radius = 0;
    }
    static get style() { return ".sc-anj-container-h {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  border-radius: 0;\n  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);\n  padding: 1rem;\n  background-color: var(--anj-light);\n  display: block;\n}\n.sc-anj-container-h, .sc-anj-container-h::before, .sc-anj-container-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-container-h:focus, .sc-anj-container-h:active, .sc-anj-container-h *.sc-anj-container:focus, .sc-anj-container-h *.sc-anj-container:active {\n  outline: none;\n}\n[elevation=\"0\"].sc-anj-container-h {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n[elevation=\"1\"].sc-anj-container-h {\n  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n}\n[elevation=\"2\"].sc-anj-container-h {\n  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);\n}\n[elevation=\"3\"].sc-anj-container-h {\n  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n}\n[elevation=\"4\"].sc-anj-container-h {\n  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);\n}\n[elevation=\"5\"].sc-anj-container-h {\n  -webkit-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);\n}\n[flex].sc-anj-container-h {\n  display: -ms-flexbox;\n  display: flex;\n}\n[gutter=\"0\"].sc-anj-container-h {\n  padding: 0.5rem;\n}\n[gutter=\"1\"].sc-anj-container-h {\n  padding: 1rem;\n}\n[gutter=\"2\"].sc-anj-container-h {\n  padding: 1.5rem;\n}\n[gutter=\"3\"].sc-anj-container-h {\n  padding: 2rem;\n}\n[gutter=\"4\"].sc-anj-container-h {\n  padding: 2.5rem;\n}\n[gutter=\"5\"].sc-anj-container-h {\n  padding: 3rem;\n}\n[radius=\"1\"].sc-anj-container-h {\n  border-radius: 0.125rem;\n}\n[radius=\"2\"].sc-anj-container-h {\n  border-radius: 0.25rem;\n}"; }
};

export { Container as anj_container };
