pdf-reader-web/components/Divider/styled.ts

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

import { color } from '../../constants/style';

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' : color['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;
  ` : '')}
`;