import styled, { css } from 'styled-components';
import { CloseButtonProps } from 'types';
import { elevationDecorator, squareSizeDecorator } from 'utils';

export const colorDecorator = ({ background, color }: CloseButtonProps) => css`
	background: ${background};
	border: 1px solid ${color};
`;

export const CloseButton = styled.button<CloseButtonProps>`
	align-items: center;
	border-radius: 50%;
	display: flex;
	height: 1rem;
	justify-content: center;
	padding: 0.5rem;
	transition: transform 0.1s ease-in-out;
	width: 1rem;
	:hover {
		transform: translateY(-0.125rem);
	}
	:active {
		transform: translateY(0.125rem);
	}
	${props => colorDecorator(props)}
	${props => elevationDecorator(props)}
	${props => squareSizeDecorator(props)}
`;