import { r as registerInstance, h, e as Host } from './index-c8b17ddb.js';

const paperCss = ".bds-hover:hover{mix-blend-mode:multiply}.focus::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.focus:focus-visible{outline:none}.focus:focus-visible::before{border-color:#c226fb}.disabled{pointer-events:none}.bg-surface-1{background-color:var(--color-surface-1, #F6F6F6)}.bg-surface-2{background-color:var(--color-surface-2, #E0E0E0)}.bg-surface-3{background-color:var(--color-surface-3, #CFCFCF)}.bg-surface-4{background-color:var(--color-surface-4, #141414)}:host{display:block;border-radius:7px}:host(.border){border:1px solid var(--color-surface-3, #CFCFCF);margin:-1px}:host(.bg-surface-1){background-color:var(--color-surface-1, #F6F6F6)}:host(.bg-surface-2){background-color:var(--color-surface-2, #E0E0E0)}:host(.bg-surface-3){background-color:var(--color-surface-3, #CFCFCF)}:host(.bg-surface-4){background-color:var(--color-surface-4, #141414)}:host(.paper__elevation--none){-webkit-box-shadow:none;box-shadow:none}:host(.paper__elevation--static){-webkit-box-shadow:0px 4px 8px var(--color-shadow-1, rgba(0, 0, 0, 0.16));box-shadow:0px 4px 8px var(--color-shadow-1, rgba(0, 0, 0, 0.16))}:host(.paper__elevation--primary){-webkit-box-shadow:0px 12px 16px var(--color-shadow-1, rgba(0, 0, 0, 0.16));box-shadow:0px 12px 16px var(--color-shadow-1, rgba(0, 0, 0, 0.16))}:host(.paper__elevation--secondary){-webkit-box-shadow:0px 4px 16px var(--color-shadow-1, rgba(0, 0, 0, 0.16)), 0px 24px 32px var(--color-shadow-1, rgba(0, 0, 0, 0.16));box-shadow:0px 4px 16px var(--color-shadow-1, rgba(0, 0, 0, 0.16)), 0px 24px 32px var(--color-shadow-1, rgba(0, 0, 0, 0.16))}.paper__display{display:contents}";

const Paper = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.hasBorder = true;
        this.constElevation = undefined;
        this.elevation = 'static';
        this.dataTest = null;
        this.border = false;
        this.height = null;
        this.width = null;
        this.bgColor = 'surface-1';
    }
    componentWillLoad() {
        this.border === true ? (this.hasBorder = false) : (this.hasBorder = true);
    }
    render() {
        return (h(Host, { key: '1782761d1797c311fe8e8d7e7feb993f02901700', class: {
                [`paper__elevation--${this.elevation}`]: this.hasBorder,
                border: this.border,
                [`bg-${this.bgColor}`]: true,
            }, style: { height: `${this.height}`, width: `${this.width}` } }, h("div", { key: 'a07f6472a0bb0dd79d5636d21ed9028b65c258e1', class: "paper__display", "data-test": this.dataTest }, h("slot", { key: '167faae5bde1c35dec65ef75cacd296b17b465a8' }))));
    }
};
Paper.style = paperCss;

export { Paper as bds_paper };

//# sourceMappingURL=bds-paper.entry.js.map