import { styled } from 'styleh-components'

// NOTE:  the SVG fill in ONLY set via CSS, respects default icon fill
const StyledSeparator = styled.div.attrs({
  className: 'separator',
  role: 'separator',
}) `
  display: inline-block;
  ${(props: { arrow?: boolean }) =>
    props.arrow
      ? styled.css ``
      : styled.css `
          padding: 0 $spacing-small;
        `};
`

export { StyledSeparator }
export default StyledSeparator