import styled, { keyframes } from 'styled-components'
import ArrowSvg from './arrow.svg'

/* flame pulses */
const flickerAnimations = {
  one: keyframes` 
    0% { opacity: 1; }
    25% { opacity: 0.7; }
    50% { opacity: 0.3; }
    75% { opacity: 0.7; }
    100% { opacity: 1; }
  `,
  two: keyframes` 
    0% { opacity: 0.3; }
    25% { opacity: 0.7; }
    50% { opacity: 1; }
    75% { opacity: 0.7; }
    100% { opacity: 0.3; }
  `,
  three: keyframes` 
    0% { opacity: 0.3; }
    25% { opacity: 0.3; }
    50% { opacity: 0.7; }
    75% { opacity: 1; }
    100% { opacity: 0.3; }
  `
}

export const Arrow = styled.span`
  animation: ${props => flickerAnimations[props.animation]} 3s infinite;
  background: url('${ArrowSvg}') no-repeat;
  background-size: 10px 10px;
  opacity: 1;
  padding: 0 6px;
`

export const Wrapper = styled.div`
  float: right;
  height: 12px;
  padding: 3px 0 3px 9px;
`
