* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

ol {
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

a {
  text-decoration: none;
}

button {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  padding: 0;
  background: none;
  border: none;
}

button:hover {
  cursor: pointer;
}

.breadcrumbs {
  --crumbs-spacing: 8px;
  position: relative;
  overflow: hidden;
}

.breadcrumbs::before,
.breadcrumbs::after {
  content: '';
  position: absolute;
  top: 0;
  width: 48px;
  height: 100%;
  pointer-events: none;
  background-color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.breadcrumbs::before {
  left: 0;
  mask-image: linear-gradient(to left, transparent, black 90%);
}

.breadcrumbs::after {
  right: 0;
  mask-image: linear-gradient(to right, transparent, black 90%);
}

.breadcrumbs.show-start-fade::before,
.breadcrumbs.show-end-fade::after {
  opacity: 1;
}

.breadcrumbs-list {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  align-items: center;
  column-gap: var(--crumbs-spacing);
}

.breadcrumbs-item:not([hidden]) {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  column-gap: var(--crumbs-spacing);
}

.breadcrumbs-item[aria-current="page"] {
  font-weight: 500;
  color: #000;
}

.breadcrumbs-label {
  padding: 0.25em 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
}

.breadcrumbs-link {
  transition: color 0.2s;
}

@media (hover: hover) {
  .breadcrumbs-link:hover {
    color: #0095ff;
  }
}

.breadcrumbs-link:active {
  color: #0080ff;
}

.breadcrumbs-link:focus-visible {
  outline-offset: -2px;
}

.breadcrumbs-separator {
  color: #999;
}

.visually-hidden {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: none;
}

const initBreadcrumbsNavigation = () => {
  const breadcrumbs = document.querySelector('.breadcrumbs');
  const breadcrumbsItems = breadcrumbs?.querySelectorAll('.breadcrumbs-item');
  const expandButton = breadcrumbs?.querySelector('#expand-button');

  if (!breadcrumbs || !breadcrumbsItems || !expandButton) {
    return;
  }

  const showAllItems = () => {
    breadcrumbsItems.forEach(crumb => crumb.removeAttribute('hidden'));
    expandButton.closest('.breadcrumbs-item').remove();
  };

  if (breadcrumbsItems.length <= 4) {
    showAllItems();
    return;
  }

  expandButton.addEventListener('click', showAllItems);
  expandButton.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      showAllItems();
    }
  });
};

const initBreadcrumbsScroll = () => {
  const breadcrumbs = document.querySelector('.breadcrumbs');
  const breadcrumbsList = document.querySelector('.breadcrumbs-list');

  if (!breadcrumbs || !breadcrumbsList) {
    return;
  }

  const checkScroll = () => {
    const isAtStart = breadcrumbsList.scrollLeft <= 1;
    const isAtEnd =
      breadcrumbsList.scrollLeft + breadcrumbsList.clientWidth
        >= breadcrumbsList.scrollWidth - 1;

    breadcrumbs.classList.toggle('show-start-fade', !isAtStart);
    breadcrumbs.classList.toggle('show-end-fade', !isAtEnd);
  };

  breadcrumbsList.addEventListener('scroll', checkScroll);
  window.addEventListener('resize', () => {
    requestAnimationFrame(checkScroll);
  });

  checkScroll();
};

const initBreadcrumbs = () => {
  initBreadcrumbsNavigation();
  initBreadcrumbsScroll();
};

document.addEventListener('DOMContentLoaded', initBreadcrumbs);