import styled, { css } from 'styled-components';

export const Component = styled('hr')<{
  light?: boolean;
  absolute?: boolean;
  orientation?: string;
  variant?: string;
}>`
  height: 1px;
  margin: 6px 0;
  border: none;
  flex-shrink: 0;
  background-color: ${(props) =>
    props.light ? 'white' : ({ theme }) => theme.colors['light-gray']};

  ${(props) =>
    props.absolute
      ? css`
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
        `
      : ''}

  ${(props) =>
    props.orientation === 'vertical'
      ? css`
          height: 100%;
          width: 1px;
          margin: 0 6px;
        `
      : ''}

  ${(props) =>
    props.variant === 'inset'
      ? css`
          margin-left: 52px;
        `
      : ''}

  ${(props) =>
    props.variant === 'middle'
      ? css`
          margin-left: 10px;
          margin-right: 10px;
        `
      : ''}
`;

export default Component;