import { theme , palette } from 'styled-tools' ; import styled , { space } from '../styled' ; import { List } from '../List' ; import { Navigation } from '../Navigation' ; import { Link } from '../Link' ; import { BreadcrumbProps } from './Breadcrumb' ; import { Inline } from '../primitives' ; export const Breadcrumb = styled ( Navigation ) < BreadcrumbProps > `
  & li + li::before {
    border-right-color: ${ props => palette ( props . separationColor || 'text100' , props . separationColor ) };
    border-right-style: solid;
    border-right-width: ${ space ( 0.5 ) }rem;
    content: '';
    display: inline-block;
    height: 0.8rem;
    margin: 0 ${ space ( 2 ) }rem;
    transform: rotate(15deg);
  }

  & [aria-current='page'] {
    font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };
    text-decoration: none;
  }

  & {
    ${ theme ( 'fannypack.Breadcrumb.base' ) };
  }
` ; export const BreadcrumbList = styled ( List ) `
  & li {
    margin-right: 0;
  }

  & {
    ${ theme ( 'fannypack.Breadcrumb.List.base' ) };
  }
` ; export const BreadcrumbStep = styled ( List . Item ) `
  & {
    ${ theme ( 'fannypack.Breadcrumb.Step.base' ) };
  }
` ; export const BreadcrumbSpan = styled ( Inline ) `
  & {
    ${ theme ( 'fannypack.Breadcrumb.Span.base' ) };
  }
` ; export const BreadcrumbLink = styled ( Link ) `
  & {
    ${ theme ( 'fannypack.Breadcrumb.Link.base' ) };
  }
` ;