.path-breadcrumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--spacing-25);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-black);
  margin-bottom: var(--spacing-75);
}

.path-breadcrumbs span {
  display: flex;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.path-breadcrumbs span:last-child {
  font-weight: 500;
}

.path-breadcrumbs span::after {
  content: "";
  margin: 0 var(--spacing-50);
  background-image: url("/icons/ic_arrow_path_breadcrumbs.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-width: 8px;
  display: flex;
}

.path-breadcrumbs span:last-child::after {
  content: none;
}

.path-breadcrumbs span a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 10px;
}

.path-breadcrumbs span a.problem-num::after {
  content: "";
  background-image: url(/icons/ic_ranking_down.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 8px;
  height: 8px;
  display: block;
}

.path-breadcrumbs span.shrinked-path-breadcrumbs {
  display: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .path-breadcrumbs {
    font-size: 1.3rem;
  }

  .path-breadcrumbs span::after {
    margin: 0 var(--spacing-30);
  }
  
  .path-breadcrumbs.shrinkable span {
    display: none;
  }
  .path-breadcrumbs.shrinkable span.shrinked-path-breadcrumbs, 
  .path-breadcrumbs.shrinkable span:last-child {
    display: flex;
  }
}

/* Context Menu */
.shrinked-path-breadcrumbs {
  position: relative;
}

.context-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 100;
  padding: 8px 0;
  border: 1px solid #f0f0f0;
}

.context-menu.show {
  display: block;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu ul li a {
  font-weight: 400;
  color: #333;
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  font-size: 0.9rem;
}

.context-menu ul li a:hover {
  background-color: #f7f7f7;
}