import styled, { css } from 'styled-components';
import { BoxProps } from 'types';
import {
	borderDecorator,
	borderRadiusDecorator,
	elevationDecorator,
	flexDecorator,
	heightDecorator,
	marginDecorator,
	paddingDecorator,
	positionDecorator,
	widthDecorator,
} from 'utils';

export const BoxStyles = css<BoxProps>`
	${props => elevationDecorator(props)}
	${props => borderDecorator(props)}
	${props => borderRadiusDecorator(props)}
	${props => flexDecorator(props)}
	${props => heightDecorator(props)}
	${props => marginDecorator(props)}
	${props => paddingDecorator(props)}
	${props => positionDecorator(props)}
	${props => widthDecorator(props)}
`;

export const Box = styled.div<BoxProps>`
	${BoxStyles}
`;