.c__breadcrumbs {
  display: flex;
  align-items: center;
  overflow: auto;

  &__separator {
    color: var(--c--contextuals--content--semantic--neutral--tertiary);
  }

  > * {
    flex-shrink: 0;
  }
}

.c__breadcrumbs__button {
  height: 32px;
  padding: 4px;
  background-color: transparent;
  border: none;
  color: var(--c--contextuals--content--semantic--neutral--secondary);
  font-size: 16px;
  border-radius: 4px;
  font-weight: 400;
  font-family: var(--c--globals--font--families--base);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;

  &:hover {
    background-color: var(
      --c--contextuals--background--semantic--neutral--tertiary
    );
  }

  &.active {
    font-weight: 600;
    color: var(--c--contextuals--content--semantic--neutral--primary);
  }
}
