import { styled } from 'styled-components';
export const SwipeArea = styled.div `
	position: absolute;
	width: 100%;
	height: ${({ $area }) => $area * 2}em !important;
	top: ${({ $area }) => `-${$area}`}em;
`;
const Style = styled.div `
	font-size: ${({ $scale }) => $scale}em;
	background: rgba(var(--black), var(--o09));
	position: absolute;
	bottom: 0;
	display: flex;
	width: -webkit-fill-available;
	height: ${({ $height }) => (typeof $height === 'number' ? `${$height}em` : $height === 'string' && `${$height}`) || 'max-content'};
	margin: 0 !important;
	text-align: center;
	pointer-events: ${({ $active }) => ($active ? 'initial' : 'none')};
	transform: translateY(100%);
	transform: translateY(${({ $active }) => $active && '0'});
	transition: 0.3s ease;

	${({ $height }) => typeof $height === 'object' &&
    `min-height: ${typeof $height?.min === 'number' ? `${$height?.min}em` : typeof $height?.min === 'string' && `${$height?.min}`}`};
	${({ $height }) => typeof $height === 'object' &&
    `max-height: ${typeof $height?.max === 'number' ? `${$height?.max}em` : typeof $height?.max === 'string' && `${$height?.max}`}`};

	input {
		color: white;
	}
`;
export default Style;
//# sourceMappingURL=BottomSheet.styled.jsx.map