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

import { mediaMax, mediaMin, sizes } from '../../theme/mixins';
import { FormControl } from './FormControl.style';
import { Button } from './Button.style';
import { Flex } from './Flex.style';

export const FooterBlock = styled.div`
  margin: 20px;
`;

export const SocialNetwork = styled.div`
  margin-top: 20px;

  a {
    margin-right: 13px;
    display: inline;
  }

  ${mediaMax.small(css`
    span {
      display: none;
    }
  `)}

  svg {
    max-height: 32px;
    max-width: 32px;
  }
`;

export const FooterContainer = styled.footer`
  background-color: ${props => props.theme.default.colors.black};
  color: ${props => props.theme.default.colors.white};
  font-size: ${props => props.theme.default.fonts.sizes[6]};
  padding: 30px 2%;
  
  h5 {
    margin-bottom: 1rem;
  }
  
  a:not([href]):not([tabindex]),
  a:visited,
  a {
    color: ${props => props.theme.default.colors.white};
    margin-right: 10px;

    &:active,
    &:hover {
      color: ${props => props.theme.default.colors.grey};
    }
  }
  
  p {
    margin-bottom: 5px;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  .logo,
  ${SocialNetwork} svg {
    &:not(:hover) {
      circle,
      rect,
      path {
        fill: ${props => props.theme.default.colors.white};
      }

      #f-linkedin,
      #f-facebook {
        fill: ${props => props.theme.default.colors.black};
      }
    }

    path {
      transition: all 150ms ease-out;
    }
  }
  
  svg.logo {
    margin-bottom: 1rem;
    height: 45px;
    display: block;
  }
  
  > div {
    max-width: ${sizes.extra}px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    
    ${mediaMax.medium(css`
      flex-direction: column;
    `)}    
    
    ${mediaMax.extraSmall(css`
      ${Flex}{
        flex-direction: column;
      }
    `)}
  
  }

  form {
    margin-bottom: 20px;
    position: relative;

    ${FormControl} {
      border-bottom: 2px solid ${props => props.theme.default.colors.white};
      margin-bottom: 20px;
      padding-bottom: 10px;
      padding-right: 190px;
      
      &:after {
        display: none;
      } 

      input {
        border: none;
        color: ${props => props.theme.default.colors.white};
      }

      div {
        top: 50px;
      }
    }

    ${Button} {
      padding: 6px 16px;
      
      ${mediaMin.small(css`
        width: 180px;
        position: absolute;
        z-index: 1;
        right: 0;
        top: -1px;
      `)}
    }
  }
  
  .newsletter-success {
    display: flex;
    align-items: center;
    font-size: ${props => props.theme.default.fonts.sizes[5]};
    
    p {
      flex: 1;
      margin-left: 20px;
    }
  }
`;