// =======================================
// HAMBURGER ICONS
// =======================================
=hamburger($size: 3rem, $color: $color-default)
  position: relative
  display: block
  width: $size
  height: $size
  background-color: transparent
  cursor: pointer
  // Elements
  span
    position: absolute
    top: 50%
    left: 50%
    display: block
    width: 2.0rem
    height: 0.3rem
    background-color: $color
    transform: translate(-50%, -50%)
    transition: all 0.3s ease-in-out
    // Pseudo
    &:nth-child(1)
      margin-top: -0.5em
    &:nth-child(2)
      margin-top: 0
    &:nth-child(3)
      margin-top: 0.5em
  // Modifiers
  &.make-active
    span
      background-color: $color-primary
      // Pseudo
      &:nth-child(1)
        margin:
          top: -0.2em
          left: -1.2rem
        transform: rotate(45deg)
      &:nth-child(2)
        width: 0
        opacity: 0
      &:nth-child(3)
        margin:
          top: -0.2em
          left: -1.2rem
        transform: rotate(45deg)