@layer components {
  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    .breadcrumbs__item {
      font-size: var(--text-base);
      color: var(--color-primary-600);
      text-decoration: underline dotted;
      &:hover {
        color: var(--color-primary-700);
        text-decoration: underline;
      }

      &.is-current {
        color: var(--color-text);
        font-weight: var(--font-semibold);
        text-decoration: none;
      }
    }

    .breadcrumbs__separator {
      color: var(--color-gray-500);
    }
  }
}