elements.tsx

import styled from '../../styled-components'

export const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: ${(props) => props.theme.color.dark};
  flex-direction: column;
`

export const Container = styled.div`
  position: relative;
  max-width: 500px;
`

export const Cancel = styled.span`
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid ${({ theme }) => theme.color.white};
  cursor: pointer;
  color: ${({ theme }) => theme.color.white};
  border-radius: 50%;
  top: 10px;
  right: 10px;
  opacity: 0.8;
  :hover {
    opacity: 1;
  }
`