import styled, { css } from 'styled-components';

import { Container, ContainerProps } from '../../../shared/Container.style';
import { mediaMax, mediaMin } from '../../../../theme/mixins';
import { Link } from '../../../shared/Link.style';

export const BlockProduct = styled.div`
  position: relative;
  background-color: ${props => props.theme.default.colors.white};
  color: ${props => props.theme.default.colors.black};
  border-radius: 12px;
  padding: 40px 30px;
  align-items: center;
  box-shadow: 0 0 32px rgba(30, 140,248, .2);
  margin-top: 80px;
  display: flex;
  overflow: hidden;
  margin-left: 15px;
  margin-right: 15px;
  
  ${mediaMax.medium(css`
    flex-direction: column-reverse;
    text-align: center;
    
    ${Link} {
      margin: 0 auto;
    }
  `)}
  
  ${mediaMin.medium(css` 
    margin-left: 40px;
    margin-right: 40px;
  `)}

  ${mediaMin.extra(css` 
    margin-left: 0;
    margin-right: 0;
  `)}
  

  h1 {
    position: relative;
    font-size: ${props => props.theme.default.fonts.sizes[3]};
    ${mediaMin.small(css`
      font-size: ${props => props.theme.default.fonts.sizes[2]};
    `)}
    
    strong {
      color: ${props => props.theme.default.colors.blue};
    }
  }

  h1,
  p {
    margin-bottom: 20px;
  }
  
  ${Link} {
    margin-top: 30px;
    
    ${mediaMax.small(css` 
      span {
        display: none;
      }
    `)}
  }
  
  > div {
    :first-child {
      flex: 2;
    }
    
    
    :last-child {
      flex: 1;
      text-align: right;

      ${mediaMax.medium(css`
        text-align: center;
        margin-bottom: 70px;
      `)}
    }
  }
  
  svg {
    &.data {
      width: 70%;
      
      ${mediaMin.medium(css`
        width: 230px;
        margin-right: 20px;
      `)}
    }
    
    &.hands {
      position: absolute;
      top: 0;
      
      ${mediaMin.medium(css`
        height: 100%;
      `)}
      ${mediaMax.medium(css`
        width: 100%;
        left: 0;
      `)}
      ${mediaMax.small(css`
        width: 120%;
        left: -10%;
      `)}
      
      ${mediaMin.large(css`
        right: 0;
      `)}
      
      &.desktop {
        display: block;
      }
      &.mobile {
        display: none;
      }

      ${mediaMax.medium(css`
        &.desktop {
          display: none;
        }
        &.mobile {
          display: block;
        }
      `)}
    }
  }
  
  
`;

export const HeroContainer = styled(Container)<ContainerProps>`
  position: relative;
  padding: 50px 0 20px;
  margin-bottom: 130px;

  ${mediaMin.medium(css`
    margin-bottom: 100px;
  `)}

  ${BlockProduct} {
    margin-bottom: -200px;
  }

  // bottom curve
  > svg {
    position: absolute;
    bottom: -10px;
  }
`;