@import '../../common/_util'

.container
  width: $barWidth +px
  height: $marginFive + px
  position: relative
  margin: 50px 0
  transform: rotate(0deg)
  transition: 0.5s ease-in-out
  cursor: pointer
  +minDesktopSM
    display: none

  & > span
    display: block
    position: absolute
    height: $barHeight + px
    width: 100%
    background: $black
    border-radius: $barHeight + px
    opacity: 1
    left: 0
    transform: rotate(0deg)
    transition: 0.25s ease-in-out

  & span:nth-child(1)
    top: 0px

  & span:nth-child(2),
  & span:nth-child(3)
    top: $marginTwo + px

  & span:nth-child(4)
    top: $marginFour + px

  &.open span:nth-child(1)
    top: $marginTwo + px
    width: 0%
    left: 50%

  &.open span:nth-child(2)
    transform: rotate(45deg)

  &.open span:nth-child(3)
    transform: rotate(-45deg)

  &.open span:nth-child(4)
    top: $marginTwo + px
    width: 0%
    left: 50%
