import { r as registerInstance, d as createEvent, h, H as Host } from './core-34fac203.js';

const TrayItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Is the item active
         */
        this.active = false;
        /**
         * Should the item just be outlined
         */
        this.outline = false;
        /**
         * Width setting
         */
        this.width = 'auto';
        this.anjTrayItemActive = createEvent(this, "anjTrayItemActive", 7);
    }
    onActiveChange() {
        if (this.active) {
            this.anjTrayItemActive.emit();
        }
    }
    render() {
        const itemStyle = {
            width: this.width
        };
        return h(Host, { tabindex: "-1", style: itemStyle }, h("button", { class: "anj-tray-item" }, h("slot", null)));
    }
    static get watchers() { return {
        "active": ["onActiveChange"]
    }; }
    static get style() { return ".sc-anj-tray-item-h {\n  display: block;\n  overflow: hidden;\n}\n[outline].sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item {\n  background-color: transparent;\n  border: 1px dashed var(--anj-border-dark);\n  color: var(--anj-border-dark);\n}\n[outline][active].sc-anj-tray-item-h {\n  border-color: var(--anj-highlight);\n}\n[active].sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item {\n  border-color: var(--anj-highlight);\n  opacity: 1;\n}\n.sc-anj-tray-item-h:not([outline]) .anj-tray-item.sc-anj-tray-item {\n  background-color: var(--anj-light);\n  border-color: var(--anj-border);\n  color: var(--anj-dark) !important;\n}\n.sc-anj-tray-item-h:not(:last-child) {\n  margin-right: 0.5rem;\n}\n.sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item {\n  border: 1px solid transparent;\n  border-radius: 0;\n  height: 100%;\n  opacity: 0.6;\n  padding: 0.5rem;\n  text-align: left;\n  -webkit-transition: border-color 0.2s ease, opacity 0.2s ease;\n  transition: border-color 0.2s ease, opacity 0.2s ease;\n  width: 100%;\n}\n.sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item:focus {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  outline: none;\n  opacity: 1;\n}\n\n.sc-anj-tray-item-s > anj-headline > * {\n  color: var(--anj-dark) !important;\n}"; }
};

export { TrayItem as anj_tray_item };
