/** @jsx jsx */
import { jsx } from 'theme-ui'

import React from 'react'
import { Breadcrumb } from 'gatsby-plugin-breadcrumb'

export const ThemeBreadcrumbs = props => {
  return (
    <div
      sx={{
        color: '#6C6C6C',
        textDecoration: 'none',
        listStyle: 'none',
        paddingInlineStart: '0px',

        ol: {
          listStyle: 'none',
          display: 'flex',
          p: 0
        },

        li: {
          mx: 2,
          '&:first-child': {
            ml: 0
          },
          '&:last-child': {
            mr: 0
          }
        },

        a: {
          variant: 'links.default'
        }
      }}
    >
      <Breadcrumb
        crumbSeparator="/"
        crumbLabel=" "
        {...props}
      />
    </div>
  )
}