import styled from 'styled-components';
import { color as colorProp } from 'styled-system';

export interface HrProps {
  color?: string;
}

export const Hr = styled.hr<HrProps>(colorProp, props => ({
  width: '100%',
  border: 'none',
  background: 'none',
  borderTop: '2px solid currentColor',
  margin: `calc(${props.theme.space.gridGap} / 2) auto`,
}));

Hr.defaultProps = {
  color: 'gray.4',
};
