import styled from '@emotion/styled';
import TransitionLayout from '~/components/layouts/_transition_layout';

const DropdownContainer = styled(TransitionLayout)<{ show: boolean }>(
	({ show, theme }) => ({
		zIndex: 99,
		position: 'absolute',
		top: 'calc(100% + 0.5em)',
		right: 0,
		minWidth: '175px',
		backgroundColor: show ? theme.colors.secondary : theme.colors.background,
		border: `2px solid ${theme.colors.secondary}`,
		borderRadius: theme.border.radius,
		boxShadow: theme.colors.boxShadow,
		display: show ? 'flex' : 'none',
		flexDirection: 'column',
		overflow: 'hidden',
	})
);

export default DropdownContainer;
