/* Base styling for the breadcrumb container */
.breadcrumb {
  padding: 0.5rem 0; /* Add some padding for better aesthetics */
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent line breaks */
}

/* Breadcrumb list styling */
.breadcrumb ol {
  padding: 0;
  margin: 0;
  list-style: none; /* Remove default list styling */
  display: inline-flex; /* Align items in a row */
}

/* Individual breadcrumb items */
.breadcrumb ol li {
  position: relative; /* Necessary for pseudo-elements */
  display: inline-block; /* Ensure items are inline */
}

.breadcrumb ol li a {
  font-size: 12px; /* Adjust as needed */
  white-space: nowrap; /* Prevent line breaks */
}

/* Separator between breadcrumb items */
.breadcrumb ol li:not(:last-child)::after {
  content: '/'; /* Separator character */
  color: var(--color--gray-60); /* Color for the separator */
  font-size: 12px; /* Adjust as needed */
  margin: 0 0.1rem; /* Add some spacing around the separator */
}

/* Last breadcrumb item (not a link) */
.breadcrumb ol li:last-child a {
  pointer-events: none; /* Disable pointer events */
  text-decoration: none; /* Remove underline */
  color: var(--color--gray-60);
}

/* Hide scrollbar but allow scrolling */
.breadcrumb::-webkit-scrollbar {
  display: none; /* Hide scrollbar for WebKit browsers */
}

.breadcrumb {
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

#block-system-breadcrumb-block {
  max-width: 60%;
}

@media screen and (max-width: 767px) {
  #block-system-breadcrumb-block {
    max-width: 100%;
  }
}