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

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

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;
  display: flex;
  align-items: center;
  text-align: center;
  box-shadow: 0 0 32px rgba(30, 140,248, .2);
  margin-top: 80px;
  margin-left: 15px;
  margin-right: 15px;
  
  ${mediaMax.medium(css`
    flex-direction: column;

    h1:after {
      left: 50%;
      transform: translateX(-50%);
    }
    
    > div {
      width: 100%;
    }
  `)}
  
  ${mediaMin.medium(css` 
    margin-left: 40px;
    margin-right: 40px;   

    > div{
      :first-child {
        flex: 1;
        text-align: left;
        padding-right: 20px;
      }
    }
  `)}
  
  p {
    margin-bottom: 0;
  }
  
  img {
    height: 70px;
    margin-bottom: 10px;
  }
  
  a {
    margin: 20px auto;
  }
`;

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

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

  h1 {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: ${props => props.theme.default.fonts.sizes[3]};
    ${mediaMin.small(css`
      font-size: ${props => props.theme.default.fonts.sizes[2]};
    `)}
    
    :after {
      position: absolute;
      bottom: 0;
      content: "";
      display: block;
      border-radius: 2px;
      height: 4px;
      width: 60px;
      background: ${props => props.theme.default.gradient.blue};
    }
  }
  
  // bottom curve
  > svg {
    position: absolute;
    bottom: -10px;
  }
`;