@inkline/inkline/components/IBreadcrumbItem/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Breadcrumb Item
 */
.breadcrumb-item {
  margin-bottom: 0;
  padding-left: var(--breadcrumb--padding-left, var(--padding-left));
  color: var(--breadcrumb--color);
}
.breadcrumb-item a {
  color: var(--breadcrumb--color);
}
.breadcrumb-item a[href], .breadcrumb-item a[to] {
  color: var(--breadcrumb--link--color, var(--breadcrumb--color));
}
.breadcrumb-item.-active {
  color: var(--breadcrumb--active--color, var(--breadcrumb--color));
}
.breadcrumb-item > span {
  display: inline-block;
}
.breadcrumb-item:first-of-type {
  padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: var(--breadcrumb--padding-right, var(--padding-right));
  display: inline-block;
  content: var(--breadcrumb--separator, "/");
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}
.breadcrumb-item :not([href], [to]) {
  text-decoration: none;
}
.breadcrumb-item [href],
.breadcrumb-item [to] {
  cursor: pointer;
}