@use "../theme";

.breadcrumbs {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: theme.spacing(4);
  list-style: none;
  margin: 0;
  padding: 0;

  .breadcrumb {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: theme.spacing(4);

    .separator {
      color: theme.color("muted");
      width: theme.spacing(4);
      height: theme.spacing(4);
    }

    .crumb,
    .current {
      font-size: theme.font-size();
      font-style: normal;
      font-weight: theme.font-weight("medium");
      line-height: 1;
    }

    .crumb {
      color: theme.color("link", "primary");
    }

    .current {
      color: theme.color("heading");
    }
  }
}