text: import styled, { css } from 'styled-components';
  
  export const Wrapper = styled.div``;
  
  export const Remove = styled.div`
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	color: #dee2e6;
  	font-size: 24px;
  	cursor: pointer;
  	opacity: 0;
  	&:hover {
  		color: #ff6b6b;
  	}
  `;
  
  export const TodoItemBlock = styled.div`
  	display: flex;
  	align-items: center;
  	padding-top: 12px;
  	padding-bottom: 12px;
  	&:hover {
  		${Remove} {
  			opacity: 1;
  		}
  	}
  `;
  
  export const CheckCircle = styled.div`
  	width: 32px;
  	height: 32px;
  	border-radius: 16px;
  	border: 1px solid #ced4da;
  	font-size: 24px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	margin-right: 20px;
  	cursor: pointer;
  	${(props) =>
  		props.done &&
  		css`
  			border: 1px solid #38d9a9;
  			color: #38d9a9;
  		`}
  `;
  
  export const Text = styled.div`
  	flex: 1;
  	font-size: 21px;
  	color: #495057;
  	${(props) =>
  		props.done &&
  		css`
  			color: #ced4da;
  		`}
  `;
  