import styled, { css } from 'styled-components';
import { mediaMax, mediaMin, sizes } from '../../theme/mixins';
import { Tooltip } from '../shared/Tooltip.style';

export const OfferBlock = styled.div`
  background-color: ${props => props.theme.default.colors.white};
  border-radius: 12px;
  padding: 30px 20px;
  flex: 1;
  width: 100%;
  max-width: 500px;
  min-width: 290px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  color: ${props => props.theme.default.colors.black};
  
  ${mediaMin.large(css`
    max-width: 350px;
  `)}
  
  img {
    max-height: 70px;
    margin-bottom: 20px;
  }
  
  h4 {
    flex: 1;
  }
  
  small {
    color: ${props => props.theme.default.colors.darkGrey};
  }
  
  a {
    font-weight: bold;
    margin-top: 20px;
    display: block;
    
    // icon plus
    i {
      margin-right: 10px;
    }
  }
  
  ${Tooltip} {
    align-self: flex-start;
  }

  @media (max-width: ${sizes.large}px) and (min-width: ${sizes.medium}px){
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    
    h4,
    img {
      margin-bottom: 0;
      margin-right: 20px;
    }
    img {
      height: 70px;
    }
    
    a {
      margin-top: 0;
      margin-left: 20px;
    }
    
    ${Tooltip} {
      align-self: center;
    }
  }
`;

export const OfferWrapper = styled.div`
  margin: 40px 0;
  display: flex;
  justify-content: center;
  
   ${mediaMax.large(css`
    align-items: center;
    flex-direction: column;
  `)}
`;