// @flow
import styled from 'styled-components';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

const RotatingChevron = styled.span`
  position: relative;
  height: 10px;
  width: 15px;

  :before,
  :after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.15rem;
    height: 100%;
    transition: all 0.3s;
    background-color: ${ApoliticalBrand.color.coolGrey};
  }
  :before {
    left: -1px;
    transform: ${(props) => (props.openOptions ? 'rotate(45deg)' : 'rotate(-45deg)')};
  }
  :after {
    left: 5px;
    transform: ${(props) => (props.openOptions ? 'rotate(-45deg)' : 'rotate(45deg)')};
  }
`;

export default RotatingChevron;