import { r as registerInstance, c as createEvent, h } from './index-cdf8e526.js';
import { m as modifiersToClass } from './utils-f909044c.js';

const breadcrumbItemCss = ".ibk-breadcrumb-item{display:inline-block;font-family:var(--fontGeometria);text-transform:uppercase;font-size:12px;text-decoration:none;font-weight:600;letter-spacing:0.7px;transition:color var(--fast);cursor:pointer;color:var(--gray2)}.ibk-breadcrumb-item:not(.ibk-breadcrumb-item--current):active{transform:translateY(1px)}.ibk-breadcrumb-item:not(.ibk-breadcrumb-item--current):hover{color:var(--primaryGreen1)}.ibk-breadcrumb-item:not():hover{color:var(--primaryGreen1)}.ibk-breadcrumb-item--current{color:var(--grayText);cursor:default;pointer-events:none}.ibk-breadcrumb-item--negative{color:rgba(255, 255, 255, 0.4)}.ibk-breadcrumb-item--negative.ibk-breadcrumb-item--current{color:white}.ibk-breadcrumb-item--negative:not(.ibk-breadcrumb-item--current):hover{color:rgba(255, 255, 255, 0.7)}";

const IbkBreadcrumbItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.onclick = createEvent(this, "onclick", 7);
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-breadcrumb-item', [
      { current: this.current },
      { negative: this.negative }
    ]);
  }
  render() {
    return (h("a", { class: this.containerClass(), href: this.href, onClick: this.onclick.emit, innerHTML: this.text }));
  }
};
IbkBreadcrumbItem.style = breadcrumbItemCss;

export { IbkBreadcrumbItem as ibk_breadcrumb_item };
