import styled from 'styled-components'
import { Paper as PaperSfe, Box, Divider as DividerSfe } from '@sofaltaeu/sofaltaeu-components'
const size = {
    mobileS: '320px',
    mobileM: '375px',
    mobileL: '425px',
    tablet: '768px',
    laptop: '1024px',
    laptopL: '1440px',
    desktop: '2560px'
  }

export const Paper = styled(PaperSfe)`
    box-sizing: border-box;
    min-height: 471px;
    display: flex;
    width: 532px;
    @media (max-width: ${size.tablet}) {
        flex-direction: column;
        width: 100%;
        min-height: 571px
    }
`
export const ContainerImage = styled(Box)<{backgroundimage:string}>`
    flex:1;
    width: 210px;
    min-height: 351px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    justify-content: center;
    align-items: center;
    background: var(--primary-color, #256be0);
    background: -moz-linear-gradient(45deg,var(--primary-color, #256be0) 0%,var(--secundary-color) 100%);
    background: -webkit-gradient(left bottom,right top,color-stop(0%,var(--primary-color, #256be0)),color-stop(100%,var(--secundary-color)));
    background: -webkit-linear-gradient(45deg,var(--primary-color, #256be0) 0%,var(--secundary-color) 100%);
    background: -o-linear-gradient(45deg,var(--primary-color, #256be0) 0%,var(--secundary-color) 100%);
    background: -ms-linear-gradient(45deg,var(--primary-color, #256be0) 0%,var(--secundary-color) 100%);
    background: linear-gradient(45deg,var(--primary-color, #256be0) 0%,var(--secundary-color) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary-color, #256be0)', endColorstr='var(--secundary-color)', GradientType=1 );
    background-size: cover;
    border: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(${props => props.backgroundimage});
    @media (max-width: ${size.tablet}) {
        width: 100%;
        min-height: 150px
    }
`
export const ContainerForm = styled(Box)`
    display: flex;
    flex-direction: column;
    padding: 16px;
    flex: 1.4;
    gap:16px;
    justify-content: flex-start;
    align-items: center;
`
export const Header = styled(Box)`
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
`

export const LogoSofaltaeu = styled.img`
    height: 16px;
`
export const Divider = styled(DividerSfe)`
    width: 100%;
`