@layer atoms {
  .mobius-breadcrumb {
    box-sizing: border-box;
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;

    & ul,
    & ol {
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }
  }

  .mobius-breadcrumb__item {
    box-sizing: border-box;
    color: var(--color-text);
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .mobius-breadcrumb__separator {
    margin-left: var(--size-xs);
    margin-right: var(--size-xs);
  }
}
