import styled from 'styled-components'

import { devices } from 'config/devices'

const BurgerRow = styled.div`
  width: 19px;
  height: 2px;
  border-radius: 10px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
  background: #666666;

  @media ${devices.tablet} {
    display: none;
  }
`

export const RowOne = styled(BurgerRow)``

export const RowTwo = styled(BurgerRow)``

export const RowThree = styled(BurgerRow)``

export const StyledBurger = styled.div<{open: boolean}>`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  z-index: 10;

  ${RowOne}{
    transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
  }

  ${RowTwo}{
    opacity: ${({ open }) => (open ? '0' : '1')};
  }

  ${RowThree}{
    transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
  }

  @media ${devices.tablet} {
    background-size: 100%;
    background-image: url(/images/userAccount.svg);
  }
`