import styled from "styled-components";
import {
    Box,
    MenuItem as MenuItemSfe,
    FormGroup as SfeFormGroup
} from '@sofaltaeu/sofaltaeu-components'


const size = {
    mobileS: '320px',
    mobileM: '375px',
    mobileL: '425px',
    tablet: '768px',
    laptop: '1024px',
    laptopL: '1440px',
    desktop: '2560px'
  }


export const Form = styled.form`
    display: flex;
    flex-direction: column;
    width: 346px;
    gap: 16px;
    justify-content: center;
    flex: 1;
    @media (max-width: ${size.tablet}) {
        width: 100%;
    }
`

export const ContainerButton = styled(Box)`
    display: flex;
    gap: 16px;
`

export const ContainerFormPrivacidade = styled(Box)`
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
`
export const FormGroup = styled(SfeFormGroup)`
    display: flex;
    gap: 16px;
    flex: 1
`
export const MenuItem = styled(MenuItemSfe)`
    display: flex;
    gap: 16px;
`

export const ContainerOfertas = styled(Box)`
    display: flex;
    gap: 16px;
    padding-left: 32px;
`