content: import { css } from '@rocket.chat/css-in-js';
  import { Box } from '@rocket.chat/fuselage';
  import React from 'react';
  
  import { useIsReducedMotionPreferred } from '../../../hooks/useIsReducedMotionPreferred';
  
  const Wrapper = ({ children }) =>
  	<Box
  		is='span'
  		display='inline-flex'
  		flexDirection='column'
  		alignItems='center'
  		justifyContent='space-between'
  		size='x24'
  		paddingBlock='x4'
  		paddingInline='x2'
  		verticalAlign='middle'
  		children={children}
  	/>;
  
  const Line = ({ animated, moved }) =>
  	<Box
  		is='span'
  		width='x20'
  		height='x2'
  		backgroundColor='currentColor'
  		className={[
  			animated && css`
  				will-change: transform;
  				transition: transform 0.2s ease-out;
  			`,
  			moved && css`
  				&:nth-child(1),
  				&:nth-child(3) {
  					transform-origin: 50%, 50%, 0;
  				}
  
  				&:nth-child(1) {
  					transform: translate(-25%, 3px) rotate(-45deg) scale(0.5, 1);
  				}
  
  				[dir=rtl] &:nth-child(1) {
  					transform: translate(25%, 3px) rotate(45deg) scale(0.5, 1);
  				}
  
  				&:nth-child(3) {
  					transform: translate(-25%, -3px) rotate(45deg) scale(0.5, 1);
  				}
  
  				[dir=rtl] &:nth-child(3) {
  					transform: translate(25%, -3px) rotate(-45deg) scale(0.5, 1);
  				}
  			`,
  		]}
  		aria-hidden='true'
  	/>;
  
  function BurgerIcon({ children, open }) {
  	const isReducedMotionPreferred = useIsReducedMotionPreferred();
  
  	return <Wrapper>
  		<Line animated={!isReducedMotionPreferred} moved={open} />
  		<Line animated={!isReducedMotionPreferred} moved={open} />
  		<Line animated={!isReducedMotionPreferred} moved={open} />
  		{children}
  	</Wrapper>;
  }
  
  export default BurgerIcon;
  