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

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

const rocket = css`
  display: block;
  top: 50%;
  position: absolute;
  height: 100%;
  right: 40px;
  transform: translateY(-53%) scale(1.3);
  #flame {
    path {
      transform-origin: top right;
      transform-box: fill-box;
      animation: flame 3s infinite alternate ease-out;
      
      :last-child {
        animation-delay: .1s;
      }
    }
  }
  
  #all {          
    transform: scale(.9);
    transform-origin: center;
    transform-box: fill-box;
    animation: shake 4s infinite alternate cubic-bezier(.36,.07,.19,.97) both;
  }
  #henry {          
    transform: scale(.9);
    transform-origin: bottom;
    transform-box: fill-box;
    animation: shake 4s infinite alternate cubic-bezier(.36,.07,.19,.97) both;
  }
    
  @keyframes flame {
    0%,40% {
      transform: scale(.8);
    }
    100%,20% {
      transform: scale(1);
    }
  }
  @keyframes shake {
    0%, 50% {
      transform: translate3d(0, 0, 0) scale(.9);
    }
    5%, 45% {
      transform: translate3d(-1px, -1px, 0) scale(.9);
    }
    
    10%, 40% {
      transform: translate3d(2px, 1px, 0) scale(.9);
    }
  
    15%, 25%, 35% {
      transform: translate3d(-1px, -2px, 0) scale(.9);
    }
  
    20%, 30% {
      transform: translate3d(2px, 2px, 0) scale(.9);
    }
  }
`;

export const NewsletterBannerContainer = styled.div`
  background: ${props => props.theme.default.gradient.blue};
  padding: 40px 40px;
  margin: 80px 0;
  position: relative;
  
  &,
  label,
  input {
    color: ${props => props.theme.default.colors.white}!important;
  }
  
  
  label,
  .error {
    ${props => props.theme.default.fonts.ubuntuBold};
  }
  
  > svg {
    display: none;
  }
  
  ${mediaMin.medium(css`
    > div:first-child {
      width: 65%;
      max-width: ${sizes.small}px;
    }

    > svg {
      ${rocket};
    }
  `)} 
  
  ${mediaMin.large(css`
    > div:first-child {
      width: 80%;
    }
  `)}

  form {
    margin-top: 20px;
    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;
      `)}
    }
  }
  
  // success
  > div {
    display: inline-block;
  
    div {
      display: flex;
      align-items: center;
      font-size: ${props => props.theme.default.fonts.sizes[5]};
      
      p {
        flex: 1;
        margin-left: 20px;
        margin-bottom: 0;
      }
    }
  }
`;