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

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

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

import { Props } from './index';

export const Component = styled('hr')<Props>`
  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;
  ` : ''}
`;