import styled from 'styled-components';
import { AlertProps } from 'types';
import {
	borderRadiusDecorator,
	elevationDecorator,
	heightDecorator,
	intentDecorator,
	paddingDecorator,
	positionDecorator,
	widthDecorator,
} from 'utils';

export const Alert = styled.aside<AlertProps>`
	--error: #f44336;
	--info: #2196f3;
	--success: #4caf50;
	--warning: #ff9800;
	font-weight: bold;
	overflow: hidden;
	z-index: 99;
	${props => borderRadiusDecorator(props)}
	${props => elevationDecorator(props)}
	${props => heightDecorator(props)}
	${props => intentDecorator(props)}
	${props => paddingDecorator(props)}
	${props => positionDecorator(props)}
	${props => widthDecorator(props)}
	.close-btn {
		position: absolute;
		right: 5%;
		top: 20%;
	}
`;