import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { L as Logger } from './log.js';
import { B as BEM } from './bem.js';

const balNavLinkGroupCss = ":root{--bal-nav-link-group-background:transparent;--bal-nav-link-group-background-grey:var(--bal-color-grey);--bal-nav-link-group-background-purple:var(--bal-color-purple);--bal-nav-link-group-background-red:var(--bal-color-red);--bal-nav-link-group-background-yellow:var(--bal-color-yellow);--bal-nav-link-group-background-green:var(--bal-color-green);--bal-nav-link-group-radius:var(--bal-radius-large)}.bal-nav-link-group{display:block;background:var(--bal-nav-link-group-background);border-radius:var(--bal-nav-link-group-radius);padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal);padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-group{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}}.bal-nav-link-group--is-grey{background:var(--bal-nav-link-group-background-grey)}.bal-nav-link-group--is-purple{background:var(--bal-nav-link-group-background-purple)}.bal-nav-link-group--is-red{background:var(--bal-nav-link-group-background-red)}.bal-nav-link-group--is-yellow{background:var(--bal-nav-link-group-background-yellow)}.bal-nav-link-group--is-green{background:var(--bal-nav-link-group-background-green)}";

const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Defines the color of the group
         */
        this.color = '';
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('nav-link-group');
        const hasColor = this.color !== '';
        return (h(Host, { key: '12c1c4d22dc3827a4c186c6591b7b043f1dd378b', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '0c503bfaa7b2587f50936cc3d699e5a1bd9995a7' })));
    }
    static get style() { return balNavLinkGroupCss; }
}, [260, "bal-nav-link-group", {
        "color": [1]
    }]);
__decorate([
    Logger('bal-nav-link-group'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], NavLinkGroup.prototype, "createLogger", null);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-nav-link-group"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-nav-link-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavLinkGroup);
            }
            break;
    } });
}

const BalNavLinkGroup = NavLinkGroup;
const defineCustomElement = defineCustomElement$1;

export { BalNavLinkGroup, defineCustomElement };
