<svelte:options
  customElement={{
    tag: 'm-breadcrumb',
  }}
/>

<script lang="ts">
  import { ChevronRight20 } from '@mozaic-ds/icons-svelte';

  /**
   * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
   */
  interface Props {
    [key: string]: any;
    /**
     * Allows to define the breadcrumb appearance.
     */
    appearance: 'standard' | 'inverse';
    /**
     * Links of the breadcrumb.
     */
    links: Array<{
      /**
       * The label displayed for the link.
       */
      label: string;
      /**
       * URL for the link.
       */
      href: string;
      /**
       * Where to open the link.
       */
      target?: '_blank' | '_self' | '_parent' | '_top';
    }>;
  }

  let { appearance = 'standard', links, class: className, ...attrs }: Props = $props();

  const isLastLink = (index: number) => index === links.length - 1;
</script>

<nav
  class={['mc-breadcrumb', `mc-breadcrumb--${appearance}`, className]}
  aria-label="Breadcrumb"
  {...attrs}
>
  <ol class="mc-breadcrumb__container">
    {#each links as link, index (index)}
      <li class="mc-breadcrumb__item">
        <a
          href={link.href}
          target={link.target}
          class={[
            'mc-link',
            'mc-link--m',
            'mc-link--inline',
            appearance && `mc-link--${appearance}`,
            isLastLink(index) && 'mc-breadcrumb__current',
          ]}
        >
          {#if index !== 0}
            <ChevronRight20 class="mc-link__icon" />
          {/if}
          <span class="mc-link__label">{link.label}</span>
        </a>
      </li>
    {/each}
  </ol>
</nav>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-breadcrumb {
  color: var(--breadcrumb-color-text-standard, #000000);
}
.mc-breadcrumb__container {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.mc-breadcrumb__item {
  background-position: left center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 679px) {
  .mc-breadcrumb__item:nth-last-child(2) .mc-link__icon {
    transform: rotate(180deg);
  }
  .mc-breadcrumb__item:not(:nth-last-child(2)) {
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    padding: 0;
    width: 1px;
  }
}
.mc-breadcrumb__current, .mc-breadcrumb__current.mc-link {
  cursor: default;
  text-decoration: none;
}
.mc-breadcrumb__current, .mc-breadcrumb__current:active, .mc-breadcrumb__current:focus, .mc-breadcrumb__current:hover, .mc-breadcrumb__current:visited, .mc-breadcrumb__current.mc-link, .mc-breadcrumb__current.mc-link:active, .mc-breadcrumb__current.mc-link:focus, .mc-breadcrumb__current.mc-link:hover, .mc-breadcrumb__current.mc-link:visited {
  color: currentcolor;
}
.mc-breadcrumb--inverse {
  color: var(--breadcrumb-color-text-inverse, #ffffff);
}

.mc-link {
  transition: box-shadow 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  text-decoration: none;
  color: var(--link-color-text-primary, #000000);
  font-size: 0.875rem;
}
.mc-link__label {
  line-height: 1.3;
}
.mc-link__icon {
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  fill: currentcolor;
}
.mc-link:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label {
  text-decoration: underline;
}
.mc-link:focus {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-link--m {
  min-height: 2rem;
  font-size: 1rem;
}
.mc-link--secondary {
  color: var(--link-color-text-secondary, #666666);
}
.mc-link--accent {
  color: var(--link-color-text-accent, #117f03);
}
.mc-link--inverse {
  --focus-color-mid: var(--focus-color-outline-outer, #000000);
  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
  color: var(--link-color-text-inverse, #ffffff);
}
.mc-link--stand-alone {
  min-height: 2rem;
  font-weight: var(--link-font-weight, 600);
}
.mc-link--stand-alone .mc-link__label {
  border-bottom: var(--border-width-s, 0.0625rem) solid currentcolor;
}
.mc-link--stand-alone:hover .mc-link__label {
  border-color: transparent;
}
.mc-link--inline {
  font-weight: inherit;
  text-decoration: underline;
}
.mc-link--inline .mc-link__label {
  line-height: 1;
}
.mc-link--inline:hover {
  text-decoration: none;
}</style>
