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

const teliaBreadcrumbsItemCss = ".telia-breadcrumbs-item{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:500;font-size:calc(1.4rem * var(--voca-rem-multiplier));color:#29003e;line-height:1;align-items:center;display:flex;height:calc(4.4rem * var(--voca-rem-multiplier));text-shadow:0 calc(0.1rem * var(--voca-rem-multiplier)) calc(0.4rem * var(--voca-rem-multiplier)) rgba(0, 0, 0, 0.1);letter-spacing:calc(0.03rem * var(--voca-rem-multiplier))}.telia-breadcrumbs-item ::slotted(a){font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;position:relative;height:100%;align-items:center;display:flex;color:inherit;text-decoration:none}.telia-breadcrumbs-item ::slotted(a)::after{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;position:absolute;bottom:calc(1.3rem * var(--voca-rem-multiplier));width:100%;content:\"\"}.telia-breadcrumbs-item ::slotted(a:hover){color:#5e0092}.telia-breadcrumbs-item ::slotted(a:hover)::after{border-bottom:calc(0.2rem * var(--voca-rem-multiplier)) solid #5e0092}.telia-breadcrumbs-item ::slotted(a:active),.telia-breadcrumbs-item ::slotted(a:focus){border-radius:calc(0.2rem * var(--voca-rem-multiplier));outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:0}.telia-breadcrumbs-item ::slotted(a:focus:not(:focus-visible)){outline:0}.telia-breadcrumbs-item__item-divider{margin:0 calc((0.4rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier)))}.telia-breadcrumbs-item--dark-background{color:#fbf0ff}.telia-breadcrumbs-item--dark-background ::slotted(a)::after{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid #fbf0ff}.telia-breadcrumbs-item--dark-background ::slotted(a:hover){color:#edc8ff}.telia-breadcrumbs-item--dark-background ::slotted(a:hover)::after{border-bottom:calc(0.2rem * var(--voca-rem-multiplier)) solid #edc8ff}";

const TeliaBreadcrumbsItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * When used on a dark background, set this
     * property to true. This will change color of text,
     * borders and hover to something suitable.
     */
    this.darkBackground = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-breadcrumbs-item';
    this.classname = 'telia-breadcrumbs-item';
    this.renderDivider = () => (h("span", { class: `${this.classname}__item-divider`, "aria-hidden": true }, "/"));
  }
  render() {
    const classes = {
      [this.classname]: true,
      [`${this.classname}--dark-background`]: this.darkBackground,
    };
    return (h("li", { "aria-current": this.current ? 'page' : false, class: classes, "data-testid": this.dataTestid }, h("slot", null), !this.current && this.renderDivider(), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
};
TeliaBreadcrumbsItem.style = teliaBreadcrumbsItemCss;

export { TeliaBreadcrumbsItem as telia_breadcrumbs_item };
