/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import {LitElement, html, css, unsafeCSS} from 'lit';
import {customElement} from 'lit/decorators.js';
import style from './breadcrumbs.css?inline';
import { breakpoints } from '../../breakpoints';

/**
 * An example element.
 *
 * @fires count-changed - Indicates when the count changes
 * @slot - This element has a slot
 * @csspart button - The button
 */
@customElement('iu-breadcrumbs')

export class Breadcrumbs extends LitElement {
  static override styles = css`
    :host{
      display: block;
      margin-top: var(--iu-spacing-3);
    }
    @media ${unsafeCSS(breakpoints.md)} {
      :host{
        margin-top: var(--iu-spacing-7);
      }
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      :host{
        margin-top: var(--iu-spacing-10);
      }
    }
    :host + *{
      background: red;
    }
    :host ul{
      margin: 0;
      padding: 0;
      display: flex;
      list-style-type: none;
    }
  `;

  override render() {
    return html`
      <iu-container>
        <nav aria-label="Breadcrumbs">
          <ul>
            <slot></slot>
          </ul>
        </nav>
      </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-breadcrumbs': Breadcrumbs;
  }
}