.nano-breadcrumb {
  display: flex;
  flex-wrap: wrap;

  .nano-breadcrumb__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-1-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nano-breadcrumb__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-1-5);
  }

  .nano-breadcrumb__link {
    font-size: var(--text-sm);
    color: hsl(var(--color-muted-foreground));
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);

    &:hover {
      color: hsl(var(--color-foreground));
    }

    &.nano-breadcrumb__link--current,

    &[aria-current="page"] {
      color: hsl(var(--color-foreground));
      font-weight: var(--font-medium);
      pointer-events: none;

      &:hover {
        color: hsl(var(--color-foreground));
      }
    }
  }

  .nano-breadcrumb__separator {
    font-size: var(--text-sm);
    color: hsl(var(--color-muted-foreground));
    line-height: 1;
    user-select: none;

    &::before {
      content: "/";
    }
  }
}